CODEWITHSUNDEEP
jqueryscriptingrefresh
user648466
user648466

Reputation: 21

Jquery loaded content, doesn't work with other scripts

I'm a beginner jquery user so I'm really hoping this will be quite straight forward for someone with a bit of experience. I recently implemented a jquery script that loads the content for a div from another html page. This works beautifully and I'm really happy with the result. The problem I'm now having is that my Lytebox and Flexcroll scripts won't work on the loaded content. Below is the load content script. I thought I could just add

fleXenv.initByClass("flexcroll"); 
initLytebox();

to the end of the script. This doesnt work when the content is loaded the first time. But if I click a dead link in the page and it runs this script again then the Lytebox and Flexcroll scripts kick in. I basically need to know when and how to refresh the Lytebox and Flexcroll scripts

$(document).ready(function() {  
$('#nav li a').click(function(){  

var toLoad = $(this).attr('href')+' #content';  
$('#content').fadeOut('400',loadContent);  
$('#load').remove();  
$('#wrapper').append('<span id="load">LOADING...</span>');  
$('#load').fadeIn('normal');  
function loadContent() {  
    $('#content').load(toLoad,'',showNewContent()); 
}  
function showNewContent() {  
    $('#content').fadeIn('400',hideLoader());  
}   
function hideLoader() {  
    $('#load').fadeOut('normal');  
}  
return false;  
}); 


});

Any help would be much appreciated. I am currently at the bottom of a 3day pit of dispair. Dreamweaver is making a fool of me!

Upvotes: 0

Views: 1076

Answers (3)

user648466
user648466

Reputation: 21

Sussed it! For anyone who is suffering with this as I have for the last 3 days. Here is my fix:

I created a new script in the html header:

$(document).ajaxComplete(function(){     
// fire when any Ajax requests complete })

And then told all scripts to initialise within this script.

Upvotes: 2

Thomas
Thomas

Reputation: 181725

You can't just add these to the end of the script, because the loading happens asynchronously. In other words, by the time your click function returns, nothing has been loaded yet; this happens in the background, and your callback function showNewContent is called after it's done.

I'm guessing that you'd want to do the initialization in that function as well:

function showNewContent() {  
    fleXenv.initByClass("flexcroll");
    initLytebox();
    $('#content').fadeIn('400',hideLoader());  
}

Also, instead of this:

$('#content').load(toLoad,'',showNewContent());

write this:

$('#content').load(toLoad,'',showNewContent);

Instead of calling the showNewContent function and passing its result to the load function, you want to pass the showNewContent function itself to load. You can do this because, in JavaScript, everything is an object.

The same thing goes for hideLoader.

Also also, I think there's a space too many inside the quotes here:

var toLoad = $(this).attr('href')+' #content';

Upvotes: 0

Desi
Desi

Reputation: 375

Seems like they are clashing because of using the same selectors. This can also happen when the script reference order is incorrect in the head of your page.

Try using the JQuery noconflict method;

http://api.jquery.com/jQuery.noConflict/

If that does not work then override the $ function. Instructions are here;

http://docs.jquery.com/Using_jQuery_with_Other_Libraries

I hope that helps.

Upvotes: 0

Related Questions