JavaScript URL variables
Today I needed to get the value of a URL variable in JavaScript. Unlike ColdFusion, in JavaScript there isn't a built-in scope that contains all of your URL variables. You have to manually parse the URL and split the name value pairs. Here is a function I use for this purpose:
function getURLVar(urlVarName) {
//divide the URL in half at the '?'
var urlHalves = String(document.location).split('?');
var urlVarValue = '';
if(urlHalves[1]){
//load all the name/value pairs into an array
var urlVars = urlHalves[1].split('&');
//loop over the list, and find the specified url variable
for(i=0; i<=(urlVars.length); i++){
if(urlVars[i]){
//load the name/value pair into an array
var urlVarPair = urlVars[i].split('=');
if (urlVarPair[0] && urlVarPair[0] == urlVarName) {
//I found a variable that matches, load it's value into the return variable
urlVarValue = urlVarPair[1];
}
}
}
}
return urlVarValue;
}
//divide the URL in half at the '?'
var urlHalves = String(document.location).split('?');
var urlVarValue = '';
if(urlHalves[1]){
//load all the name/value pairs into an array
var urlVars = urlHalves[1].split('&');
//loop over the list, and find the specified url variable
for(i=0; i<=(urlVars.length); i++){
if(urlVars[i]){
//load the name/value pair into an array
var urlVarPair = urlVars[i].split('=');
if (urlVarPair[0] && urlVarPair[0] == urlVarName) {
//I found a variable that matches, load it's value into the return variable
urlVarValue = urlVarPair[1];
}
}
}
}
return urlVarValue;
}
So, in ColdFusion I would do this to get a URL variable:
<cfset lastTabVisted = url.lastTab>
and now with this JavaScript function I can do this:
var lastTabVisted = getURLVar('lastTab');
Jake Munson
35 Yrs old
for(i=0; i<=(urlVars.length); i++){
should be:
for(var i=0; i<=(urlVars.length); i++){
In anycase, thanks for the function, it'll come in real handy.
[PHP is for fart-huffers and ColdFusion gets you laid]
function getURLVar(urlVarName) {
var urlHalves = String(document.location).toLowerCase().split('?');
var urlVarValue = '';
if(urlHalves[1]){
var urlVars = urlHalves[1].split('&');
for(var i=0; i<=(urlVars.length); i++){
if(urlVars[i]){
var urlVarPair = urlVars[i].split('=');
if (urlVarPair[0] && urlVarPair[0] == urlVarName.toLowerCase()) {
urlVarValue = urlVarPair[1];
}
}
}
}
return urlVarValue;
}
Your update even did a lowercase to the content of the variable. So this update will be better:
function getURLVar(urlVarName) {
var urlHalves = String(document.location).split('?');
var urlVarValue = '';
if(urlHalves[1]){
var urlVars = urlHalves[1].split('&');
for(var i=0; i<=(urlVars.length); i++){
if(urlVars[i]){
var urlVarPair = urlVars[i].split('=');
if (urlVarPair[0] && urlVarPair[0].toLowerCase() == urlVarName.toLowerCase()) {
urlVarValue = urlVarPair[1];
}
}
}
}
return urlVarValue;
}
Greetz,
Karim
<InvalidTag>
function showEntry(recordAction) {
if (recordAction == 'Update') {
var selectedBillingJournalID = ColdFusion.getElementValue('gridBillingJournalEntry','frmBillingJournal','BillingJournalID');
var selectedBillingBatchID = ColdFusion.getElementValue('gridBillingJournalEntry','frmBillingJournal','BillingBatchID');
}
else if (recordAction == 'Create') {
var selectedBillingJournalID = '';
var selectedBillingBatchID = <cfoutput>#URL.billingBatchID#</cfoutput>;
}
day = new Date();
var windowID = 'trust' + day.getTime();
var windowOptions = new Object();
windowOptions.width = 840;
windowOptions.height = 500;
windowOptions.center = true;
windowOptions.modal = true;
windowOptions.resizeable = true;
windowOptions.initshow = true;
windowOptions.draggable = true;
windowOptions.closeable = true;
windowOptions.headerstyle = 'font-family: verdana; background-color: #0066FF;';
ColdFusion.Window.create(windowID,'Billing Journal Entry','editbillingjournalentry.cfm?billingBatchID=' + selectedBillingBatchID + '&billingJournalID=' + selectedBillingJournalID + '&runMode=' + recordAction, windowOptions);
}
</script>
Did you see me grab the value of the URL variable right in the JavaScript code using a simple cfoutput - look at the else? Yes before someone mentions it there is an IsDefined test on this in a different part of the page. By the way, the JavaScript function does look nice and I can see where it could come in handy, but if your goal was as stated...
"Today I needed to get the value of a URL variable in JavaScript. "
then what I've got here would've done the trick.
Am I missing something here?
What if you don't want to pass your JavaScript through the CF server? In my case, I never put the JS code directly in my pages, I put it in .js files and then pull those into each page as needed. So my JS code is never parsed by the CF server.
1) the .split('&') should be replaced with .split('&') or .split('%26')
2) and here's where i get stuck:
in the for loop, i'm getting an "XML Parsing Error: not well-formed" message pointing to the '<=' operator. am i the only one who's running into this issue?
the problem i was running into can be explained [url=http://javascript.about.com/library/blxhtml.htm]here[/url] (http://javascript.about.com/library/blxhtml.htm)
i didn't have the CDATA tag. i guess i really am a fart-huffer :|
I'm glad you got it solved.
(function(){ // Import GET Vars :D
document.getVars = [];
var urlHalves = String(document.location).split('?');
if(urlHalves[1]){
var urlVars = urlHalves[1].split('&');
for(var i=0; i<=(urlVars.length); i++){
if(urlVars[i]){
var urlVarPair = urlVars[i].split('=');
document.getVars[urlVarPair[0]] = urlVarPair[1];
}
}
}
})();
now you can access your getvars by going through the document object:
document.getVars.varname