SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Enthusiast
    Join Date
    Nov 2004
    Location
    Meriden, CT
    Posts
    43
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    jquery DOM troubles after load

    I am having an issue with some jQuery I wrote, below. Basically, sometimes my final two steps appear to run, and sometimes they don't. I believe this is because the load() function is taking a variable amount of time to complete.

    Let me walk you through quickly. I have an unordered list with each LI having an onclick event of "changeTabContent". When the page loads, I trigger the active LI's click.
    On a click, first thing I do is remove the previous results, which are a UL living under the "li.active" element. Next, I move the "active" class to the LI that was pushed and off the old one. Next, I add a loading animation to the screen. Next I append a new UL to the new "li.active" and use the load() method to insert a bunch of LI's from a different page. onSuccess, I remove the loading animation. [note 1]
    Next, you'll see a hack I added, more on that in a minute...
    Last two steps are to add a "more" link to the bottom of the returned li's, if a link was passed into the function, and finally I remove a handful of LI's (excluding more link) so there are only "x" on the screen.

    My #1 problem is that the more link is not showing up at times, and the cleanList function is not removing LI's. I believe the problem is that with the load being async, sometimes those last two steps are being hit, but there is no LI's in the DOM yet. You can see I tried to run a hack so the while loop will execute when there is no "ul" yet.

    [note 1] - I tried to add the final two steps into the load() callback, but the LI's were NEVER loaded in the DOM when the callback function was executed.

    Code:
    <script type="text/javascript" language="javascript">
    $(document).ready(function() {
    	$(".tabbed-dynamic-content li.active").trigger('click');
    });
    function changeTabContent(element,strURL,strMoreURL) {
    
    	//remove results UL if there
    	$(".tabbed-dynamic-content ul li.active ul").remove(); 
    	//change active class to button pushed
    	$(".tabbed-dynamic-content ul li.active").removeClass("active");$(element).addClass("active");
    	
    	//add loading image, remove on callback of load()
    	$(".tabbed-dynamic-content").append(
    		'<div class="ajaxLoading"><img src="ajax-loader.gif" alt="loading animation"></div>'
    	);	
    	//make ajax call
    	$(".tabbed-dynamic-content ul li.active").append($('<ul>').load(strURL + " ul.results li", 
    		function() {
    			//remove loading image
    			$(".tabbed-dynamic-content .ajaxLoading").remove();
    		}
    	));
    	//this is a hack to wait for the load to finish (when the <ul> will appear in the DOM)
    	while ($(".tabbed-dynamic-content ul li.active ul").length == 0) {}
    	
    	//add more link
    	if (strMoreURL!='') {
    		$(".tabbed-dynamic-content ul li.active ul").append('<li class="moreLink"><a href="'+strMoreURL+'">more</a></li>');
    	}
    	//clean the results
    	cleanList();
    }
    function cleanList() {
    	var intMaxResults = $(".tabbed-dynamic-content #ssMaxResults").val()-1;
    	$(".tabbed-dynamic-content ul li.active ul li:gt(" + intMaxResults + "):not(.moreLink)").remove();
    }
    </script>

  2. #2
    SitePoint Wizard bronze trophy
    Join Date
    Jul 2008
    Posts
    5,757
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    What version of jquery?

    The source in 1.4.2 definitely calls the callback after inserting the result into the element. So, appending the "morelink" inside the callback function should be solid. cleanlist() needs to go in there too(like you said, otherwise you face a race condition)

  3. #3
    SitePoint Enthusiast
    Join Date
    Nov 2004
    Location
    Meriden, CT
    Posts
    43
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    OK, as an update...

    I tried again putting the last two operations into the callback, because to me, it seems that's how it should work. When I do this, the two operations work fine on the first call... If I have to load a tab a second time (ex. click tab B, then tab C, then back to tab B) the two operations do not seem to fire. I have narrowed this down to some kind of caching issue in the load() function, but I don't know WHY it's happening.

    at the top of my script, I am using:

    Code:
    $.ajaxSetup({cache:false});
    this seems to fix that issue. I still don't know why the caching is somehow affecting WHAT the load does. It's not a "stale data" problem... it seems to be that a cached page is actually not loaded into the DOM before the callback is run, which is really exactly the problem I described in my first post.

    Thanks for your reply, crmalibu. If anyone has any thoughts to why this cache issue is operating this way, please let me know.

  4. #4
    SitePoint Wizard bronze trophy
    Join Date
    Jul 2008
    Posts
    5,757
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Ya that seems odd to me too.

    Any chance you have a small demo? I may give it a shot with a debugger.

  5. #5
    SitePoint Enthusiast
    Join Date
    Nov 2004
    Location
    Meriden, CT
    Posts
    43
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    it's actually an intranet site, so I won't be able to give you a link... let me see if I can put together a local copy demo you could work with.

    Thanks for your help!


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •