How to properly pass url parameters in jquery mobile

Question

I was wondering if you could give me some insight on what I can do when it comes to passing url parameters in the url to a specific page on my jquery mobile run site.

So I have a link living on site A that look like this: http://www.m.mysite.org/donate?s_src=1234&s_subsrc=12345

And if someone clicks on that link I am then taken to my mobile site where I have a donation form. within the donation form I have two hidden fields called

<input type="hidden" id="source" value="" />
<input type="hidden" id="sub_source" value="" />

I want to grab the values of those parameters and fill those values that maybe empty or not. This is the script that I have to grab those parameters and their values:

var source = getUrlVars()["s_src"];
var subsourc = getUrlVars()["s_subsrc"];
if (source != "" && source != 'undefined' && source != null) {
    document.getElementById('source').value = source;
}
if (subsourc != "" && subsourc != 'undefined' && subsourc != null) {
    document.getElementById('sub_source').value = subsourc;
}

function getUrlVars()
{
var vars = [], hash;
var hashes = window.location.href.slice(window.location.href.indexOf('?') + 1).split('&');
for(var i = 0; i < hashes.length; i++)
{
    hash = hashes[i].split('=');
    vars.push(hash[0]);
    vars[hash[0]] = hash[1];
}
return vars;
}

Problem is that these values are not being applied to those hidden input fields.

I created a plug-in that might help you if you're still struggling with this. Maybe I'll change it but note that I define a function getUrlVars() in my plug-in which could cause issues with your function — Cameron Askew
– Cameron Askew, Commented Apr 4, 2014 at 21:45

dana · Accepted Answer · 2012-01-19 00:14:33Z

Per my comment on Lawson's answer, you could use the ready() function. Also, I am now using jQuery to set the values of the hidden inputs vs. using the document object directly.

jQuery.ready(function() {
    var source = getUrlVars()["s_src"];
    var subsourc = getUrlVars()["s_subsrc"];
    if (source != "" && source != 'undefined' && source != null) {
        jQuery("#source").val(source);
    }
    if (subsourc != "" && subsourc != 'undefined' && subsourc != null) {
        jQuery("#sub_source").val(subsourc);
    }
});

function getUrlVars()
{
    var vars = [], hash;
    var hashes = window.location.href.slice(window.location.href.indexOf('?') + 1).split('&');
    for(var i = 0; i < hashes.length; i++)
    {
        hash = hashes[i].split('=');
        vars.push(hash[0]);
        vars[hash[0]] = hash[1];
    }
    return vars;
}

Lawson Kurtz · Accepted Answer · 2012-01-18 23:54:56Z

1

I think the problem here is that you are trying to write the values to the inputs before jQuery mobile has fully manipulated the DOM. Try wrapping the top portion of your code in a function that you call onload.

function onload()
{
var source = getUrlVars()["s_src"];
var subsourc = getUrlVars()["s_subsrc"];

if (source != "" && source != 'undefined' && source != null) {
document.getElementById('source').value = source;
}

if (subsourc != "" && subsourc != 'undefined' && subsourc != null) {
    document.getElementById('sub_source').value = subsourc;
}
}
function getUrlVars()
{
var vars = [], hash;
var hashes = window.location.href.slice(window.location.href.indexOf('?') + 1).split('&');
for(var i = 0; i < hashes.length; i++)
{
    hash = hashes[i].split('=');
    vars.push(hash[0]);
    vars[hash[0]] = hash[1];
}
return vars;
}
###
<body onload="onload()">

answered Jan 18, 2012 at 23:54

Lawson Kurtz

6363 silver badges6 bronze badges

1 Comment

dana Over a year ago

Or more in the spirit of jQuery, you could use the ready() function api.jquery.com/ready

Collectives™ on Stack Overflow

How to properly pass url parameters in jquery mobile

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related