Using the load method of JQuery to load the selected data from the response

I recently had a requirement where in I had to display documents from a Knowledge management repository in an unordered list items view. There was already a standard server side component which was displaying the documents but not in the format required and I had no control over this component to change it (This is the case for most of us who are working on customizations for some standard product). There were two options for me to implement this requirement.

• To implement a new server side component which retrieves the data in the format required (or)
  
• Use the same server side component, retrieve the data using the Javascript and asynchronous technique and display the partial data (in this case, bunch of links holding a specific class) and decorate these links with an unordered list.
  

I instantly chose the second option. There were quite a good number of reasons for choosing this option, I would not like to get into those details in this article though. I was implementing the JQuery in my applications for quite some time I found the very good use of "load()" method to display the selected elements from the response of an asynchronous call to the server. And it turned out to be as simple as we talk. Here I am drafting the steps for implementing this.

1. Create a div in the HTML to hold the dynamically retrieved data from the server. And we can also define the server side URL which needs to be retrieved dynamically.
   

   <div id="kmContent" href="some server side URL" > </div>

   
   

2. Write the JQuery document ready function to retrieve the contents from the URL specified in the div. In the load method, the first parameter is the URL and the element selector separated by a space and this is the reason why we need to make sure that the URL does not have any space in it. The space should be escaped. But it's better to use the escape function of Javascript to escape the URL for safer side. And the second parameter is the function reference, which will be called by JQuery when the loading is completed.
   

   $(function() {
   

   var url = escape($("#kmContent").attr("href"));
   

   $("#kmContent").load(url +" a.someSpecificClass");
   

   });

   
   

   This piece of script, sends the request to the specified URL and retrieves the response and selects only "a" elements with the specified CSS class "someSpecifiedClass" and inserts that into "kmContent" div.
   

3. The next and ofcourse the last step is to define a callback function, which will be called when the loading is complete. This callback function is responsible for decorating the links with unordered list.
   

   $("#kmContent").load(url +" a.someSpecificClass", function() {
   

   $('#kmContent a').wrapAll('<ul></ul>').wrap("<li></li>").addClass("someFormattingClass");
   

   });

   
   

   
   

   And I placed this HTML with the script as part of my content management system and there you go. JQuery does the job perfectly well.
   

   In this age of agile development, the frameworks like JQuery are the best fit without any doubt.