Monday, June 28, 2010

jQuery By Examples: Load data through Ajax - 2

In this example, I am populating a Drop Down list asynchronously through the .load() method. Advantage of loading data through .load() method is that it allows us to specify a portion of the remote document to be inserted. This is achieved with a special syntax for the url parameter. If one or more space characters are included in the string, the portion of the string following the first space is assumed to be a jQuery selector that determines the content to be loaded. Therefore instead of loading the complete document, here I can load specific portion of the document. In this example first I am getting the list of all the Tags available under the Index section of the page. This is achieved through the special URL syntax used in the .load() method. The next setp is to load the data in a temporary div. Here is the sample data available in the div element:

<li>
<a dir='ltr' href='http://myerrorslog.blogspot.com/search/label/Application%20Server%20FAQs'>Application Server FAQsa>
<span dir='ltr'>(1)span>
li>
<li>
<a dir='ltr' href='http://myerrorslog.blogspot.com/search/label/Articles'>Articlesa>
<span dir='ltr'>(1)span>
li>

Once the data is loaded in the div, I am populating the drop down by creating option element dynamically. Every option has following attributes:
text - text from the a tag
value - href from the a tag

Once all the li elements are process, the temp div is removed.

Now when a user, clicks the button to get the posts for the selected Tag, data is loaded again asynchronously through the .load() method. Instead of loading the complete post, I am loading specific part of the post.

Demo:








Click the link to show code fragment



1 comment:

Unknown said...

Hi Yash,

Hi Yash,
Greeting!!!
My name is Rohit Arya, and I work for Xenisys IT Services Pvt. Ltd. Xenisys is a US based firm in India we are based out at Bangalore, We are a leading organization in Corporate IT trainings. We have few open short term training assignments on Mobile Application Developer (M1) & Mobile System Administrator (M2)Training. We have found your contacts from Naukri.com and other job sites matching with our open training assignments, Please let me know your availability if you want to have a detailed discussion on this.
Rohit Arya
07204232661