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!

Try _api/web/lists/GetByTitle('Job Tickets')?$select=ListItemEntityTypeFullName gives you and that should be your entityname in your POST — Mike
– Mike, Commented May 12, 2017 at 16:57
Thanks for your input. I had already tried that and confirmed I had the right name, but to make sure I ran it again. It returned: "ListItemEntityTypeFullName": "SP.Data.Job_x0020_TicketsListItem". As you can see, that is the name I am using for type in the metadata. — maleman
– maleman, Commented May 12, 2017 at 17:17

Gautam Sheth · Accepted Answer · 2017-05-12 18:02:36Z

3

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);
            }
});

edited May 12, 2017 at 18:02

answered May 12, 2017 at 17:14

Gautam Sheth

31.1k1 gold badge37 silver badges65 bronze badges

1

I downvoted for a few reasons. First, headers are not case sensitive as per RFC 7230, so accept will work (I know this from experience as well). Second, since data is being sent, you have to indicate content-type. Third, the encoding of the space has absolutely no impact (in fact, jQuery encodes it for you).

wjervis
– wjervis

2017-05-12 17:29:11 +00:00
Commented May 12, 2017 at 17:29
1

Just noticed that you simply moved content-type outside of headers. It makes no difference where it is, since jQuery will do xhr.setRequestHeader("content-type", contentType); regardless of how you do it.

wjervis
– wjervis

2017-05-12 17:36:56 +00:00
Commented May 12, 2017 at 17:36
It worked! The culprit was in fact the url. I was using $filter which worked as a web part but not in an app add-in. After correcting the url per Gautam's suggestion it worked. Note... I left my content-type as is in the headers section.

maleman
– maleman

2017-05-12 17:37:34 +00:00
Commented May 12, 2017 at 17:37
@ - maleman - glad that it worked. @wjervis - i apologize for this. I agree with each and every word of your comments. So totally deserve the downvote :( However, not sure what to do now ? Should i modify the answer ?

Gautam Sheth
– Gautam Sheth

2017-05-12 17:50:57 +00:00
Commented May 12, 2017 at 17:50
I'll remove my answer, if you want to put the bit about /items(id) fixing it in yours. The edit will allow me to remove my downvote.

wjervis
– wjervis

2017-05-12 17:53:54 +00:00
Commented May 12, 2017 at 17:53

Add a comment |

Saad Zulfiqar · Accepted Answer · 2017-05-15 04:34:14Z

1

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.

answered May 15, 2017 at 4:34

Saad Zulfiqar

3502 silver badges11 bronze badges

Add a comment |

RussGove · Accepted Answer · 2017-05-13 00:33:27Z

0

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

answered May 13, 2017 at 0:33

RussGove

1,2541 gold badge17 silver badges24 bronze badges

Add a comment |

Stack Exchange Network

SharePoint Framework jQuery REST POST returns 400 Bad Request error

3 Answers 3

Your Answer

Hot Network Questions

SharePoint Framework jQuery REST POST returns 400 Bad Request error

3 Answers 3

Your Answer

Sign up or log in

Post as a guest

Related

Hot Network Questions