REST and SharePoint 2010 Quick Start Guide: POST Data with JQuery

 

Table of Contents for this Series

The next topic I want to cover is posting data from a browser client back to SharePoint 2010. This time we look at this sites calendar, as shown

 

image

 

 

 

 

 

 

 

 

 

 

 

 

I’ll use http://win-dcbei0i59th/_vti_bin/ListData.svc/Calendar as the service url

The ability to INSERT items into the Calendar hinges on constructing a properly formatted atom XML string that is then POST(ed) to the server – see a sample request/response at the following link – http://msdn.microsoft.com/en-us/library/dd928669.aspx. The xml shown is a mouthful but if we take this a step at a time we can see its not so bad.

Lets start by getting back some information (and saving it to notepad) from a single calendar entry using the following URL.

http://win-dcbei0i59th/_vti_bin/ListData.svc/Calendar(1)

The response looks as follows

image

 

 

 

 

 

 

 

 

 

 

 

 

 

We can use this response to help construct our ajax POST. Here is the essential xml string fleshed out – only Title, StartTime, and EndTime properties are provided as they are required calendar fields. Based on http://msdn.microsoft.com/en-us/library/dd928669.aspx and the information above the xml that Creates a new entry will look something like the following.

<entry xmlns:d="http://schemas.microsoft.com/ado/2007/08/dataservices"                                             xmlns:m="http://schemas.microsoft.com/ado/2007/08/dataservices/metadata" 
                       xmlns="http://www.w3.org/2005/Atom">
                       <content type="application/xml">
                         <m:properties>
                            <d:Title>Team Meeting</d:Title>
                            <d:StartTime m:type="Edm.DateTime">2009-12-30T17:00:00</d:StartTime>
                            <d:EndTime m:type="Edm.DateTime">2009-12-30T18:00:00</d:EndTime>
                         </m:properties>
                       </content>
                   </entry>

The JQuery code then looks as follows

$(document).ready(function() {

    // required fields are Title, Start Date, and End Date

    var postdata = ‘<?xml version="1.0" encoding="utf-8" standalone="yes"?>
                    <entry xmlns:d="http://schemas.microsoft.com/ado/2007/08/dataservices"
                       xmlns:m="http://schemas.microsoft.com/ado/2007/08/dataservices/metadata"
                       xmlns="http://www.w3.org/2005/Atom">
                       <content type="application/xml">
                         <m:properties>
                            <d:Title>Team Meeting</d:Title>
                            <d:StartTime m:type="Edm.DateTime">2009-12-30T17:00:00</d:StartTime>
                            <d:EndTime m:type="Edm.DateTime">2009-12-30T18:00:00</d:EndTime>
                         </m:properties>
                       </content>
                   </entry>’;

    $.ajax({
             type: "POST",
             url: "http://win-dcbei0i59th/_vti_bin/ListData.svc/Calendar",
             data: postdata,
             cache: false,
             timeout: 5000,
             contentType: "application/atom+xml; charset=utf-8",
             error: function(xhr) {
                 alert(xhr.status + ‘: ‘ + xhr.statusText);                                   
             }
          });

});

When the page is refreshed I see

image

The Calendar now contains the new entry as shown below

Cal

 

 

 

 

 

 

 

 

 

 

 

 

This works nicely and is very exciting, the only misunderstanding I still have is why the ajax error: function is triggered. Further work on that point is required. The other ajax parameters for timeout and cache are optional.

That’s it for now

Cheers!

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s