In previous posts, I’ve covered the core architecture of jQuery. How it works. How you call methods. A brief overview of what’s available.
From here on out, we will focus more on specific solutions that jQuery can provide. One of those is the ability to load partial content from the server and display it back in a section of our web page.
There are several reasons why you might want to do this. Remember back in the days of frames when we thought a good modular web site meant trying to code the content in frames for the different sections of the web site? How quickly we found out that didn’t work! To start with, the back button didn’t behave correctly, but there were other major problems with this approach as well.
Using jQuery and some DIV tags, you can load content as you need it into the DIV tags using some pretty simple syntax.
That simple line of code will replace whatever is between the open and closing html tags represented by “#elementId with whatever content is in the file represented by ‘path/to/Content.htm’.
If you want to, you can filter the data that is returned from the call to load by also specifying a selector:
And of course, if the URL is an ASPX page (or other dynamic content) you could pass in parameters on the query string to tell the server what data to retrieve.
You can also send parameters to the server using a post by specifying a second parameter, data, that a set of name/value pairs that will be sent to the server. You can use this in combination with the serialize() method to pass the contents of form elements in with your request. This is a step above what the MS-AJAX stuff does. When you use the default AJAX that comes with ASP.NET, all of the form elements get posted to the server. With this method, we are able to select exactly which form elements we are sending back and even what ASPX page we might be calling.
Finally, we can pass a third parameter which is a call-back function that will be called by load when it completes. Note, this is not to say it completed successfully, but only that it did complete. It will be passed three parameters: the response text, the status, and the XMLHttpRequest object.
Other post in jQuery
- jQuery - The Man, The Myth, The Legend - October 8th, 2008
- Getting started with jQuery and ASP.NET - October 15th, 2008
- jQuery Simple Selectors - October 28th, 2008
- jQuery Selectors - Looks just like CSS - November 6th, 2008
- jQuery Looks like XPath - November 12th, 2008
- jQuery - class manipulation - November 19th, 2008
- jQuery - Events - December 2nd, 2008
- jQuery - Positioning Elements - January 6th, 2009
- AjaxToolKit TabControl Disabled Tab - January 12th, 2009
- jQuery, JSON, and ASP.NET - January 15th, 2009
- jQuery - Retrieving HTML Fragments - January 22nd, 2009
- jQuery GUI - Drag - February 3rd, 2009
- jQuery - Drop - February 12th, 2009
- jQuery UI - Resizable w/ ASP.NET Themes - February 18th, 2009
- jQuery, bgiframe and IE6 z-order hacks - February 19th, 2009
- jQuery - Sliders (scrollbars to the rest of us) - March 4th, 2009
- jQuery - Using Slider as a Scrollbar - March 12th, 2009
- jQuery - Auto Scrolling the Slider - March 23rd, 2009
- jQuery – Accordion - May 6th, 2009
- CustomValidationControl and jQuery - May 11th, 2009
- Mixing ASP.NET, jQuery and JSON - May 12th, 2009
- jQuery Progressbar - May 20th, 2009
- jQuery – Dialog - June 2nd, 2009
- Does jQuery Make Us Lazy? - June 18th, 2009
- jQuery Dialog – With Validation Controls - June 25th, 2009
- jQuery – Date Picker - July 2nd, 2009
- jQuery Splitter - July 21st, 2009
- jQuery Expand/Collapse Using Head Tags - October 15th, 2009
- Flash to jQuery - November 30th, 2009
- jQuery, Each() and Async Gets - December 2nd, 2009
- jQuery and ASP.NET UpdatePanel - January 6th, 2010
- AddThis.com From E-Mail - May 25th, 2011
- jQuery - Creating Plug-ins - June 4th, 2012
- jQuery - Calling Your Own Functions - July 24th, 2012
- jQuery Tabs - October 2nd, 2012
- jQuery - Explaining Last Week's Code - October 16th, 2012
- jQuery – Modal Dialog - November 20th, 2012
- Host jQuery at Google (with Intellisense support) - December 4th, 2012
- JQuery, Cufon, and Dynamic Content - January 1st, 2013
- jQuery - Loading Partial Content - January 29th, 2013
Republished by Blog Post Promoter