jQuery Why are these two conflicting?

[phoenixrip]

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

[seco]

you wouldnt happen to have this on the net somewhere where we can look at it running?

[Fumigator]

Ditto... if that's not possible can we at least see (a) your initial HTML layout and (b) the page's HTML source after the page has loaded?

[phoenixrip]

Heya guys.

Thanks for getting back to me.

Of course... here is a live version of the broken stuff, html and both javascript callls are in the html

http://robbie-white.com/testurl/


Its a complicated problem, so I have tried to explain a little on that broken URL, but essentially, the important thing is that both versions of the code work without the other one, but when together only the second one (in this case the internal links) works, the first on called in the html is broken for some reason.