Wednesday, February 27, 2013

Demonstration of a jQuery implementation of the JavaScript Promise Pattern

In preparation for my talk at the last Chicago SharePoint Developers User Group meeting, I spent some time putting together a few lines of code to demonstrate jQuery reading a web service and asynchronously rendering data from the web service in a grid. The JavaScript and jQuery portion of the code is shown here for reference for anybody that wants to use it.

The grid used in this example is a jQuery grid called ParamQuery. You can find out more about it here: http://paramquery.com/grid. I simply downloaded the minified JavaScript library for paramquery and, after reading a little of the documentation, wrote the appropriate code to format my data into the table. You can see the implementation of the paramquery grid in the code below.

In the video below I demonstrate the grid. I click on a row and it loads a picture from LinkedIn using the column with the LinkedIn picture url. The grid is resizable and draggable. I then demonstrate adding a row to the SQL Azure database, reloading the page, and seeing the new data.

The jQuery grid gets the data from a completely unrelated data source. The data source has a back end Azure database with a web service that exposes data in JSON format. In the video, I simple add a row to the table and the web service does the work of exposing the data in a format I can read with my jQuery



Here is the JavaScript and jQuery for the page demonstrated in this example (in its entirety). Note that the code uses the jQuery implementation of a JavaScript Promise pattern (.deferred). It is not necessary here but was used to illustrate the pattern.


2 comments:

  1. You have some good stuff posted. I just found your blog. Thanks. Is there a link to the Javascript and JQuery?

    Thanks again for your contribution.

    ReplyDelete
  2. execution and versatility application for you. In our advancement procedure we take after the lithe system and take after the best business models for application improvement handle. java

    ReplyDelete