If you have ever had to work with PHP the luxury of becoming used to simple things like request parameter processing can be lost. Sometimes you have no alternative if you are working with a simple HTML file.
Hence comes in this nifty little jquery plugin, it allows you to grab parameters from the url and then process them accordingly. One way that this could be useful is if you wanted to detect a page state or to display or hide an element depending on the state.
You can download the plugin here and its also fairly light too which is good.
Here is an example of the source, its relatively short so i am posting it here and you can give it a try:
Javascript
/* Copyright (c) 2006 Mathias Bank (http://www.mathias-bank.de)
* Dual licensed under the MIT (http://www.opensource.org/licenses/mit-license.php)
* and GPL (http://www.opensource.org/licenses/gpl-license.php) licenses.
*
* Thanks to Hinnerk Ruemenapf - http://hinnerk.ruemenapf.de/ for bug reporting and fixing.
*/
jQuery.extend({
/**
* Returns get parameters.
*
* If the desired param does not exist, null will be returned
*
* @example value = $.getURLParam("paramName");
*/
getURLParam: function(strParamName){
var strReturn = "";
var strHref = window.location.href;
var bFound=false;
var cmpstring = strParamName + "=";
var cmplen = cmpstring.length;
if ( strHref.indexOf("?") > -1 ){
var strQueryString = strHref.substr(strHref.indexOf("?")+1);
var aQueryString = strQueryString.split("&");
for ( var iParam = 0; iParam < aQueryString.length; iParam++ ){
if (aQueryString[iParam].substr(0,cmplen)==cmpstring){
var aParam = aQueryString[iParam].split("=");
strReturn = aParam[1];
bFound=true;
break;
}
}
}
if (bFound==false) return null;
return strReturn;
}
});
HTML
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head profile="http://gmpg.org/xfn/11">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Get the URL prameter with jQuery</title>
</head>
<body>
<script src="http://www.google.com/jsapi"></script>
<script>
// Load jQuery
google.load("jquery", "1");
</script>
<script src="http://www.koders.com/javascript/fid589B53905C9C92AFB7D81C3FBAB9911BE65C24C8.aspx?s=%22Justin+Palmer%22" type="text/javascript"></script>
<style>
/** Get URL Params **/
#hidden_message, #hide_message{
display:none;
}
</style>
<body>
<h1> Welcome to the test Page</h1>
<h3> <a id="show_message" href="?=1"> Show Hidden Message </a> <a id="hide_message" href="?=0"> Hide this Message </a></h3>
<h3 id="hidden_message"><em> This is the hidden message </em> and the Parameter</h3>
</body>
</html>