Steven Ng

About 2 years ago I posted an article called “Quick Ajax Example Using Prototype.js” and some visitors commented that my instructions weren’t clear so I just wanted to post a quick follow up. This is basically the same example using the more efficient jQuery library.

1. Create a file named ShowTime.aspx that will display the current time when the page is called. Follow steps 1-4 from my old article.
2. Create a ShowTime.html file with a link click to see updated time without page refresh and a

   to display the updated time when the link is clicked.

3. Call jQuery library from google between your tags like this
4. Now add this jQuery script inside the tags after calling jQuery library.

   1 2 3 4 5 6 7 8 9

   <code> $(function(){ $("#gettime").click(function(){ $("#time").load("http://dev.hostreaction.net/examples/showtime.aspx"); });     }); </code>

5. Check out the demo and view source to get the exact HTML and jQuery.
6. To briefly explain what’s going on in step 4: everything between the $(function(){ ... }); loads as soon as the DOM is loaded. Then we attach a “click” event to the “gettime” link (notice the # sign corresponding to the link ID attribute, jQuery uses CSS selectors). Inside the “click” event we run the .load function which is an ajax call to “showtime.aspx” and we tell it to display it to

   element.