ansaurus

Question

JQuery Ajax: Old content flicks in before showing the loaded content

Answer 1

+1 A:

You could try emptying your content element before issuing the AJAX retrieve command:

jQuery(document).ready(function() {

jQuery('.ajax').click(function(){  

var toLoad = jQuery(this).attr('href'); 
jQuery('#ajax_content').hide('slow',loadContent);  
jQuery('#load').remove();  
jQuery('#main').append('<span id="load">LOADING...</span>');  
jQuery('#load').fadeIn('normal');  

function loadContent() {  
    jQuery('#ajax_content').empty().load(toLoad,'',showNewContent())  
}  
function showNewContent() {  
    jQuery('#ajax_content').show('normal',hideLoader());  
}  
function hideLoader() {  
    jQuery('#load').fadeOut('normal');  
}  
return false;  

});  

});

To make the application more robust, you can also use the .queue() methods to build a queue of actions. Then when a user clicks another link while one is already loading, it's easy to cancel.

MvanGeest 2010-06-04 15:28:07

Thanks a lot! Works perfect. I will also have a look at queues!But one problem i still have. This slide out effect only works once, slide out doesn't work. The new content just pops up...

madmax 2010-06-04 18:13:02

Could you create a working example on www.jsfiddle.net and post the URL? That might enable us to tell you more.

MvanGeest 2010-06-04 18:16:10

Found out that it works on a simple html.But i use it in Magento, and after i load the content, the sliding functions don't work anymore. I would understand it a bit more if all the functions won't work after loading, but it's only the animation. Loading works...Maybe there is a conflict with Prototype in Magento ? But i use noconflictmode for jQuery...

madmax 2010-06-04 20:52:40

I suggest you try temporarily removing Prototype from your test page and trying it that way. There's an official jQuery doc page about conflicts, but I believe you've already done everything it says (http://docs.jquery.com/Using_jQuery_with_Other_Libraries).

MvanGeest 2010-06-04 21:23:40

Well, thanks a lot for the help!Think there is something different i didn't bear in mind.greets max

madmax 2010-06-05 08:36:51

ansaurus

tags:

views:

answers:

JQuery Ajax: Old content flicks in before showing the loaded content

related questions