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
36 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
good example: myspace vs facebook...
There are tons of good ColdFusion based sites out there. MySpace just happens to be one of the most high profile sites, and it does suck. But don't judge the entire CF community by MySpace. MySpace is run by "fly the seat of your pants" programmers. And you will find these kinds of sites written in all programming languages.
(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];
}
}
}
})();
but don't know how to get the data to pass to my HTML using a document.write or alert. Can anyone help me to show me how to make this simple command pull the data from this script?
Thank you,
John