jQuery, Each() and Async Gets
One of the things to keep in mind when using jQuery is that nothing is a blocking call. Sure, there is a certain sequence to when things operate. But, to be safe, you should always assume that step two will happen during step one.
Nowhere is this more evident than when retrieving content from a URL and inserting that content in your page.
The temptation is to write code that looks something like this
$.each(json, function(index, entry) { jQuery.get(entry['url'], function(html) { // insert the HTML here. } }
The problem with this is that jQuery.get is an asynchronous call. This means that once the get has fired, the each loop will continue. This can cause all kinds of trouble for you, including having a complete iteration skipped, or if you are doing some kind of concatenation prior to inserting the HTML, having HTML for one iteration showing up in the middle of another.
Not exactly what you had in mind, eh?
But there is a fix. Use the ajax call instead and specify async:false to force the call to complete before allowing another call.
$.each(json, function(index, entry) { jQuery.ajax({ url: directory + '/' + entry['url'] , success: function(html) { // insert the HTML here. } }, async: false });
Note too that using ajax without the async: false is the same as just using get.
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
Related Post
-
Anibal
-
Anibal
-
Anibal
-
Anibal




