Monday, December 17, 2012

Implementing a jQuery Callback Function for SharePoint

Introduction

It is sometimes useful to be able to subscribe to the successful completion of asynchronous jQuery calls. For example, if you make a call to get data, you may want several events to fire upon successful completion of that call and the events may vary based on what page or area of the site you are on. You could just call those events directly from the asynchronous data call and add conditional logic for each page, but a layer of abstraction allows for more flexible and reusable code. This post will show you how to setup your asynchronous jQuery data calls in a generic way (for example, to be included in your master page) and then setup custom subscriber events that vary by page or page layout.

Generic Subscriber and Data Retrieval Functions

The code below is a function that sets up jQuery callbacks and allows subscribers to add or remove themselves from the callbacks. You would include this in a javascript library on your master page (note that this function is not my creation but comes from here: https://gist.github.com/1321768).

 jQuery.Status = function(id) {  
   var callbacks,  
     status = id && statuses[id];  
   if (!status) {  
     callbacks = jQuery.Callbacks();  
     status = {  
       publish: callbacks.fire,  
       subscribe: callbacks.add,  
       unsubscribe: callbacks.remove  
     };  
     if (id) {  
       statuses[id] = status;  
     }  
   }  
   return status;  
 };  

The code below is a sample ajax data call to a web service that returns json data. If, for example, this data is commonly used throughout your SharePoint farm, you could include a jQuery library on your master page that includes this function.

 function GetData() {  
   $.ajax({  
     type: "GET",  
     url: path,  
     data: {},  
     dataType: "json",  
     timeout: 10000,  
     success: function (data) {  
       //Do Stuff  
       //Publish event  
       $.Status("EventToSubscribeTo").publish();  
     },  
     error: function (xhr, status, error) {  
       alert(error);  
     }  
   });  
 }  

Page or Layout Specific Code

Once you have your master page setup, you could include code on a single page or layout to call the GetData function. You could then subscribe to the successful completion of the GetData function using the code below. The code below subscribes to the successful completion of the "EventToSubscribeTo" function. Once the "EventToSubscribeTo" function is successfully complete, it calls the "EventToFire" function. I do not include code for the "EventToFire" function, but that is where you would add page or layout specific code to manipulate the resulting data call.

 $.Status("EventToSubscribeTo").subscribe(EventToFire);  

Conclusion

Abstracting asynchronous data calls by placing the functions to make those calls in a master page javascript library allows for more flexible and reusable code. You could then call the functions to get the data on a page specific basis and manipulate the data in a custom manner by subscribing to the successful completion of the data call.

4 comments:

  1. The Status function is a copy of Addy Osmani's pub sub samples posted here https://gist.github.com/1321768

    Thought I would mention that ;)

    ReplyDelete
  2. Yes, it is. Thank you for pointing that out. I believe that's where I got the status function from. I couldn't remember where I got it from though. I will modify the post to reflect the source.

    ReplyDelete
  3. Don't know where this code is from bu it is for sure that this is going to help lot of developers dealing with SharePoint as it has helped me out to implement a application where this was in a need.

    ReplyDelete
  4. Just to be clear, I the code for the generic subscriber function came from Addy Osmani's pub samples, posted here: https://gist.github.com/1321768

    The point of this article is to demonstrate how you can use that code (along with asynchronous web service calls) to make your client side code more flexible and reusable on the SharePoint platform.

    ReplyDelete