SharePoint Framework jQuery REST POST returns 400 Bad Request error

Question

I am totally stumped again as to what is causing my update to fail. The same process works fine using the "old" approach inside a web content editor. Now that I am using the framework the jQuery ajax call fails! Thinking that the problem was related to being in the workbench, I packaged my app add-in and installed it on my test SharePoint Online site. The problem still occurs with the same message. Here is the detail of what I am doing:

Error:

400 Bad Request - "The type SP.ListItemEntityCollection does not support HTTP PATCH method."

ajax URL:

https://[site URL]/_api/web/lists/GetByTitle('Job%20Tickets')/items?$filter=Id%20eq%2028

Request Payload (from Chrome console)

{__metadata: {type: "SP.Data.Job_x0020_TicketsListItem"}, Notes: " ",…}
Completed
:
"2017-05-12T15:19:04.583Z"
Completed_x0020_By
:
"Michael Aleman"
Notes
:
"                        "
__metadata
:
{type: "SP.Data.Job_x0020_TicketsListItem"}
type
:
"SP.Data.Job_x0020_TicketsListItem"

Json object returned from a GET

    {
    "odata.metadata": "https://strattechbiz.sharepoint.com/CPMDevV1/_api/$metadata#SP.ListData.Job_x0020_TicketsListItems",
    "value": [{
        "odata.type": "SP.Data.Job_x0020_TicketsListItem",
        "odata.id": "53e22fbc-d5dd-4f87-b77c-57d30dda1b0d",
        "odata.etag": "\"1\"",
        "odata.editLink": "Web/Lists(guid'e78373b6-db70-475f-902c-fa7e1b2b88ed')/Items(28)",
        "FileSystemObjectType": 0,
        "Id": 28,
        "ServerRedirectedEmbedUri": null,
        "ServerRedirectedEmbedUrl": "",
        "Title": "Aqua Systems New Website Home Page",
        "Order0Id": 1,
        "OrderLineId": 0,
        "ProcessId": 1,
        "Sequence": 0.0,
        "Activity": 0.0,
        "Days": 13.0,
        "Completed": null,
        "Activity_x0020_Description": "Order Special Instructions",
        "Special_x0020_Instructions": "<div class=\"ExternalClassA95F1BDBDDA74AF2A8DC6E45FAD89C7E\">Just a single page website. Make sure to include contact us &quot;form&quot;.</div>",
        "Notes": null,
        "ContentTypeId": "0x01009C1FBE60225CF547A736A7C52A1F3E76",
        "Completed_x0020_By": null,
        "ID": 28,
        "Modified": "2017-05-05T18:18:00Z",
        "Created": "2017-05-05T18:18:00Z",
        "AuthorId": 10,
        "EditorId": 10,
        "OData__UIVersionString": "1.0",
        "Attachments": false,
        "GUID": "c1a345ca-df3f-4258-8804-81c260157663"
    }]
}

javaScript code

    var getDigestCall = jQuery.ajax({
    url: siteContext.siteURLSP + '/_api/contextinfo',
    method: "POST",
    headers: {
        "accept":       "application/json;odata=verbose"
    }
})

getDigestCall.done(function(data, textStatus, jqXHR){
    requestDigest = data.d.GetContextWebInformation.FormDigestValue;
    today= new Date();

    fullUrl = siteContext.siteURLSP + siteContext.urlJobTicketsId + jobActivity;
    var ajaxData ={
        '__metadata': {'type': 'SP.Data.Job_x0020_TicketsListItem'},
        'Notes' : jQuery("#inputNotes").val(),
        'Completed_x0020_By': siteContext.currentUser,
        'Completed': today.toISOString()
        }


    jQuery.ajax({
            url: fullUrl,
            type: "Post",
            data: JSON.stringify(ajaxData),
            headers: {
                "accept":       "application/json;odata=verbose",
                "content-type": "application/json;odata=verbose",
                "X-RequestDigest" : requestDigest,
                "IF-MATCH": "*",
                "X-HTTP-Method": "MERGE",
            },
            success: onActivityCompletedSuccess,
            error: function(jqXHR, status, error){
                onJobTicketsFailed(jqXHR, status, error);
            }
    });

})

Thanks in advance for your help!

Answer 1

Update

Thanks to @wjervis for pointing out.

To update list item using REST API, the endpoint would be as below:

https://[site URL]/_api/web/lists/GetByTitle('List Title')/items(ID)

where ID = item id of the list item.

Your full url should be somewhat as below:

https://[site URL]/_api/web/lists/GetByTitle('Job Tickets')/items(2028)

And your end code would be replaced as below:

jQuery.ajax({
            url: "https://[site URL]/_api/web/lists/GetByTitle('Job Tickets')/items(2028)",
            type: "POST",
            data: JSON.stringify(ajaxData),             
            headers: {
                "Accept": "application/json;odata=verbose",                
                "X-RequestDigest" : requestDigest,
                "IF-MATCH": "*",
                "content-type": "application/json;odata=verbose",
                "X-HTTP-Method": "MERGE"
            },
            success: onActivityCompletedSuccess,
            error: function(jqXHR, status, error){
                onJobTicketsFailed(jqXHR, status, error);
            }
});

Answer 2

Rather then using JQuery, you should use PnP for CRUD operations on SP list, it will reduce so much of the effort and issues that you are facing. Here is Basic Operations using PnP-JS.

Answer 3

You could also use pnp-js-core to do this. It's much easier to work with.