Stopping Redundant Query Output

programming web dev
1

Hi guys! Thanks in advance for any help =]

I’m trying to get this JQuery script to work. I have another JS file that it connects with and uses, which is also in my scripts folder, but I’m pretty sure I can get the results I want by modifying this script file.

What the script does is it takes what’s in div#content in my website, and switches it out for the div#content from another file, so that my page content changes without actually leaving the page. I have a flash file with video and music running, and I wanted an uninterrupted experience for the user.

Here is the code I have currently:

$(document).ready(function() {
						   
	var hash = window.location.hash.substr(1);
	var href = $('a.switch').each(function(){
		var href = $(this).attr('href');
		if(hash==href.substr(0,href.length-4)){
			var toLoad = hash+'.php #content';
			$('#content').load(toLoad)
		}											
	});

	$('a.switch').click(function(){
								  
		var toLoad = $(this).attr('href')+' #content';
		$('#content').hide('normal',loadContent);
		$('#load').remove();
		$('#wrapper').append('<span id="load">LOADING</span>');
		$('#load').fadeIn('normal');
		window.location.hash = $(this).attr('href').substr(0,$(this).attr('href').length-4);
		function loadContent() {
			$('#content').load(toLoad,'',showNewContent())
		}
		function showNewContent() {
			$('#content').show('normal',hideLoader());
		}
		function hideLoader() {
			$('#load').fadeOut('normal');
		}
		return false;
		
	});

});

Then I implemented a part of the site which calls from a database, and creates the page based on the query which is appended to the filename, for instance:

racers.php?orderby=racername&dir=ASC

This screws up my whole script for the following reason. The JQuery script (when switching from index.php to racers.php) pulls the content from racers.php in the div#content, plops it in index.php’s div#content, and makes the location bar read index.php#racers. So when I’m in racers.php and trying to navigate around the database table by organizing values by ‘ASC’ (ascending) or ‘DESC’ (descending), it won’t work because the first time I click a link, the content switches out like it should, but the second time, the URL becomes like this:

racers.php?orderby=racername&dir=DESC?orderby=racername&dir=ASC

In other words, it just appends the query onto the end of the existing query, returning the correct collation of the racers in racers.php, but the JQuery switching out the content doesn’t work (i.e. it loads a new page just like clicking a regular link, which interrupts the Flash file, which then starts over).

I tried to find a workaround so that instead of just adding the database query I need onto the end of the URL, it would first search for an existing query, chop it off, and then add the new query. My attempt was as follows:

$(document).ready(function() {
						   
	var hash = window.location.hash.substr(1);
	var href = $('a.switch-stats').each(function(){
		var href = $(this).attr('href');

		if(hash.match("?")){
			hash.substring(0,(hash.indexOf("?")));

			if(hash==href.substr(0,href.length-4)){
				var toLoad = hash+'.php#content';
				$('#content').load(toLoad)
			}
		} else {
			if(hash==href.substr(0,href.length-4)){
				var toLoad = hash+'.php#content';
				$('#content').load(toLoad)
			}
		}
	});

	$('a.switch-stats').click(function(){
								  
		var toLoad = $(this).attr('href')+' #content';
		$('#content').hide('normal',loadContent);
		$('#load').remove();
		$('#wrapper').append('<span id="load">LOADING</span>');
		$('#load').fadeIn('normal');
		window.location.hash = $(this).attr('href').substr(0,$(this).attr('href').length-4);
		function loadContent() {
			$('#content').load(toLoad,'',showNewContent())
		}
		function showNewContent() {
			$('#content').show('normal',hideLoader());
		}
		function hideLoader() {
			$('#load').fadeOut('normal');
		}
		return false;
		
	});

});

So what I was trying to do was to use an IF statement to check for a ‘?’ character in the URL, chop off the string after that point, and then add a new URL, but what I’m not sure of is whether I chopped off the string BEFORE the ‘?’ or AFTER the ‘?’ character. I’m also not sure if I had the script perform the chopping action BEFORE appending the new desired query, or AFTER.

Help, please! I’m kind of a Javascript newbie, and I feel like I’m in way over my head! I spent many hours last night looking for ways to accomplish what I wanted to do, and as the night wore on, I just felt more and more lost! =[