Why are these two jquery codes conflicting?
Heya guys. I'm pretty stuck, but fairly certain there is an obvious, simple solution to this:
I have two different types of ajax call in my document, both use the same method, but each is reloading and calling a different amount of content, depending on the ID of a link that is clicked, so one link ID triggers reloading of just the content, and the other triggers reloading of the content and the navigation as well.
They both work individually, but when both are loaded into the document, on the one that is loaded last will work.
can any one help me figure out what is conflicting between the two?
Here is the first piece of code, for just the div#content being reloaded:
-
$j(document).ready(function() {
$j('#content').wrap('<div id="content-wrapper"></div>');
function pageload(hash) {
if(hash.substr(hash.length-3, hash.length) == "php") {
$j("#content-wrapper").load(hash.substr(0,hash.length-3) + ".php #content",'',function(){
$j('#content-wrapper').slideFadeShow(1000);
$j('#load').fadeOut('normal');
});
}
else if(hash.substr(hash.length-3, hash.length) == "htm") {
$j("#content-wrapper").load(hash.substr(0,hash.length-3) + ".htm #content",'',function(){
$j('#content-wrapper').slideFadeShow(1000);
$j('#load').fadeOut('normal');
});
}
else if(hash) {
$j("#content-wrapper").load(hash + ".html #content",'',function(){
$j('#content-wrapper').slideFadeShow(1000);
$j('#load').fadeOut('normal');
});
}
}
$j.historyInit(pageload);
$j('a.ajaxcontentlink').livequery('click',function(){
var hash = $j(this).attr('href');
hash = hash.replace(/^.*#/, '');
if (hash.substr(hash.length-3, hash.length) == "php") {
hash = hash.substr(0, hash.length-4) + "php";
}
else if (hash.substr(hash.length-3, hash.length) == "htm") {
hash = hash.substr(0, hash.length-4) + "htm";
}
else {
hash = hash.substr(0,hash.length-5);
}
$j('#content-wrapper').slideFadeHide(1000,function(){$j.historyLoad(hash)});
$j('#load').remove();
$j('#wrapper').append('<div id="load">LOADING<div id="loaderimage"></div></div>');
$j('#load').fadeIn('normal');
return false;
});
});
Here is the second piece, which should reload everything in div#contentwithnav
-
$j(document).ready(function() {
$j('#contentwithnav').wrap('<div id="content-wrapper-withnav"></div>');
function pageloadwithnav(hashwithnav) {
if(hashwithnav.substr(hashwithnav.length-3, hashwithnav.length) == "php") {
$j("#content-wrapper-withnav").load(hashwithnav.substr(0,hashwithnav.length-3) + ".php #contentwithnav",'',function(){
$j('#content-wrapper-withnav').slideFadeShow(1000);
$j('#load').fadeOut('normal');
});
}
else if(hashwithnav.substr(hashwithnav.length-3, hashwithnav.length) == "htm") {
$j("#content-wrapper-withnav").load(hashwithnav.substr(0,hashwithnav.length-3) + ".htm #contentwithnav",'',function(){
$j('#content-wrapper-withnav').slideFadeShow(1000);
$j('#load').fadeOut('normal');
});
}
else if(hashwithnav) {
$j("#content-wrapper-withnav").load(hashwithnav + ".html #contentwithnav",'',function(){
$j('#content-wrapper-withnav').slideFadeShow(1000);
$j('#load').fadeOut('normal');
});
}
}
$j.historyInit(pageloadwithnav);
$j('a.ajaxandnavigationlink').livequery('click',function(){
var hashwithnav = $j(this).attr('href');
hashwithnav = hashwithnav.replace(/^.*#/, '');
if (hashwithnav.substr(hashwithnav.length-3, hashwithnav.length) == "php") {
hashwithnav = hashwithnav.substr(0, hashwithnav.length-4) + "php";
}
else if (hashwithnav.substr(hashwithnav.length-3, hashwithnav.length) == "htm") {
hashwithnav = hashwithnav.substr(0, hashwithnav.length-4) + "htm";
}
else {
hashwithnav = hashwithnav.substr(0,hashwithnav.length-5);
}
$j('#content-wrapper-withnav').slideFadeHide(1000,function(){$j.historyLoad(hashwithnav)});
$j('#load').remove();
$j('#wrapper').append('<div id="load">LOADING<div id="loaderimage"></div></div>');
$j('#load').fadeIn('normal');
return false;
});
});
for those wondering, there are custom effects setup like this:
-
jQuery.fn.slideFadeHide = function(speed, easing, callback) {
return this.animate({opacity: 'hide', height: 'hide'}, speed, easing, callback);
};
jQuery.fn.slideFadeShow = function(speed, easing, callback) {
return this.animate({opacity: 'show', height: 'show'}, speed, easing, callback);
};
Any help would be greatly appreciated, and an answer could be rewarded with a paypal donation, as this is driving me MENTAL
Cheers
Robbie