Load a Variable File Based on Query String with jQuery and Ajax

Including files with PHP based on a query string is easy. But if you find yourself in a situation where you can only use client-side languages, it gets a little trickier. I ran into this problem on a recent project and came up with the following. I hope it helps you out.

First, check out the example to see what we're doing.

As you can see, a red box or blue box is displayed, depending on your query string. Nothing too fancy. But, what's cool is that there's no server-side logic involved. Here's how it works…

First, you have to grab the variables from the query string using jQuery/JavaScript. For that, I grabbed a function from this blog post and saved it as geturlvars.js:

1.   //from http://jquery-howto.blogspot.com/2009/09/get-url-parameters-values-with-jquery.html
2.   $.extend({
3.     getUrlVars: function(){
4.   	var vars = [], hash;
5.   	var hashes = window.location.href.slice(window.location.href.indexOf('?') + 1).split('&');
6.   	for(var i = 0; i < hashes.length; i++)
7.   	{
8.   	  hash = hashes[i].split('=');
9.   	  vars.push(hash[0]);
10.  	  vars[hash[0]] = hash[1];
11.  	}
12.  	return vars;
13.    },
14.    getUrlVar: function(name){
15.  	return $.getUrlVars()[name];
16.    }
17.  });

Once that's done, the rest is really simple. You just match the variables to the include files you want to use. That's found in example.js:

1.   $(document).ready(function() {
2.   	var color = $.getUrlVar('color');
3.   	if ((color == 'blue') | (color == 'red')) {
4.   		var url = color + '.txt';
5.   		$.ajax({
6.   			url: url,
7.   		}).done(function(response) {
8.   			$('#color_display').html(response);
9.   			$('#message').html('You successfully selected a color:');
10.  		}).fail(function(jqXHR, textStatus, errorThrown) {
11.  			var message = 'Error! The Ajax call didn\'t work.<br><br>URL: ' + url;
12.  			$('#message').html(message);
13.  		});
14.  	} else {
15.  		$('#message').html('Error! An invalid color was selected.');
16.  	}
17.  });

With both of those scripts in place, all that's left is the HTML itself:

1.   <!doctype html>
2.   <html lang="en">
3.   <head>
4.   	<meta charset="utf-8">
5.   	<title>Example</title>
6.   	<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
7.   	<script src="geturlvars.js"></script>
8.   	<script src="example.js"></script>
9.   </head>
10.  <body>
11.  <h1>Example</h1>
13.  <p>This example is a supplement to the <a href="https://inkplant.com/code/query-string-ajax">Load a Variable File Based on Query String with jQuery and Ajax</a> article on the Ink Plant Code blog.</p>
15.  <p id="message">Error! This message should have been replaced with something else. The fact that you're reading this means something went wrong with the JavaScript.</p>
17.  <div id="color_display"></div>
19.  <p style="margin-top:30px;">
20.  	<a href="index.html?color=red">Red</a> - 
21.  	<a href="index.html?color=blue">Blue</a>
22.  </p>
24.  </body>
25.  </html>

You have to make the include files too (red.txt and blue.txt) of course. I saved them as .txt files, but they can be saved as .html instead if you prefer.

That wraps it up. Super easy.

Leave a Comment

Name and email are required. Your email will not be published.

This post was published on November 23rd, 2015 by Robert James Reese in the following categories: Ajax, JavaScript, and jQuery. Before using any of the code or other content in this post, you must read and agree to our Terms & Conditions.