CODEWITHSUNDEEP
javascripturljquery
TikaL13
TikaL13

Reputation: 1488

How to properly pass url parameters in jquery mobile

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.

Upvotes: 1

Views: 2402

Answers (2)

dana
dana

Reputation: 18125

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;
}

Upvotes: 1

Lawson Kurtz
Lawson Kurtz

Reputation: 636

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()">

Upvotes: 1

Related Questions