jQuery with Client Object Model in SharePoint 2010

It’s been more than a month since I blogged. Didn’t find much to blog actually. Anyway right now I’m here to blog about accessing SharePoint data using Client Object Model in jQuery.

I started learning jQuery only a few days back and found it really interesting and started to integrate it with SharePoint 2010.

Recipe:

To create a Content Editor Web Part with jQuery script which shows the current sub site’s title.

How to do?

  1. Download the jQuery plug in form here.
  2. Create a folder called jQuery in the layouts folder of your SharePoint server and save it there.
  3. Create a web part page in  your SharePoint site and add a Content Editor Web Part in the web part page.
  4. After adding the web part, click below the web part in order to edit the HTML source as shown in the below figure to open the content editor.
  5. Add the below script which refers the jQuery file in the layouts folder to the top of the editor.



< <script type=”text/javascript” src=”/_layouts/jquery-1.7.js”></script>
6. Now, add the below JavaScript which executed once the web page finishes loading.

             <script type=”text/javascript”>
             JSRequest.EnsureSetup();
            $(document).ready(function() {
             ExecuteOrDelayUntilScriptLoaded(Post_COM_Load, “sp.js”);
             });

The ExecuteOrDelayUntilScriptLoaded(Post_COM_Load, “sp.js”) function in the above script executes the Post_COM_Load method after the sp.js file finishes loading.

7. Now, add the below coding for Post_COM_Load method which implements COM to get the current’s site’s title.

           function Post_COM_Load()
          {
             SP.ClientContext clientContext = new SP.ClientContext.get_current();
             web = clientContext.get_web();
             clientContext.load(web, ‘Title’);
              clientContext.executeQueryAsync(Function.createDelegate(this, this.onSiteLoadSuccess),                Function.createDelegate(this,                 this.onQueryFailed));
             }

8. Add the below script for onSiteLoadSuccess and onQueryFailed respectively.

            function onSiteLoadSuccess(sender, args) {
            $(“h3”).html(“site title : ” + web.get_title()); // h3 refers to the heading element in the UI which we will be adding shortly
             }

           function onQueryFailed(sender, args) {
           alert(‘request failed ‘ + args.get_message() + ‘\n’ + args.get_stackTrace());
            }

9. Close the script with </script> tag.

10. Below the above script design the UI for the CEWP with the below HTML.

           <div>
           <h3></h3> //this is where we will display our sub site’s title
           </div>

11. Click OK to save the content in the editor and click Stop Editing in the top Ribbon.

Here is the complete code of the above solution

<script type=”text/javascript” src=”/_layouts/COM/jquery-1.7.js”></script>
<script type=”text/javascript”>
JSRequest.EnsureSetup();
$(document).ready(function() {

ExecuteOrDelayUntilScriptLoaded(Post_COM_Load, “sp.js”);
});

function Post_COM_Load()
{
SP.ClientContext clientContext = new SP.ClientContext.get_current();
var web = clientContext.get_web();
clientContext.load(web, ‘Title’);
clientContext.executeQueryAsync(Function.createDelegate(this, this.onSiteLoadSuccess), Function.createDelegate(this, this.onQueryFailed));
}

function onSiteLoadSuccess(sender, args) {
$(“h3”).html(“site title : ” + web.get_title());
}

function onQueryFailed(sender, args) {
alert(‘request failed ‘ + args.get_message() + ‘\n’ + args.get_stackTrace());
}
</script>

<div>
<h3></h3>
</div>

Hop it was useful for people looking for accessing the SharePoint data in jQuery.

Advertisements

2 thoughts on “jQuery with Client Object Model in SharePoint 2010

  1. Thanks a lot for the good post. But in this post it is to set auto search feature by querying a list. Is there any way to implement searching by querying the all the data from a site collection instead of a list. In server side we can SPsearch methods provided by API. But in client side scripting how can we accomplish this?

    Regards,
    Rahul.

  2. Hi Rahul,

    I’m not sure if there is a class called SPSearch in server side API, I haven’t heard about it. I think if you want to search the whole site collection, then you need to use the web service of the Search service application.

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 )

Twitter picture

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

Facebook photo

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

Google+ photo

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

Connecting to %s