Passing value to JS function through URL on window load

Question

my page http://www.dinomuhic.com/2010/index.php loads the Showreel at the start of the page using an onLoad call in body like this:

<body onLoad="sndReq('96')">

96 is the ID of the showreel in the SQL Library. The JS function "sndReq" is an AJAX call using JQuery which opens the requested item and displays it in the main window.

Now my question: What if I want to send a link to a client which opens a specific item directly so he does not have to navigate through the site?

Something like http://www.dinomuhic.com/2010/index.php?sndReq=234 (which of course doesn't work now and just opens the showreel, probably because the onLoad in the body tag overrides it)

How can I implement this? I want to be able to open specific items by URL but if nothing is passed through the URL it should always open item 96.

Thank you in advance. I'm sure its pretty easy I just can't see it.

Cletus

score 7 · Accepted Answer · answered Oct 14 '11 at 17:15

7

You need to parse the query string. I find the easiest way to deal with the query string is to do the following. First, you need to extract the query string from the URL:

var queryStr = window.location.search; // will give you ?sndReq=234

Then, you can strip out the ? and split each query string parameter into an array:

var paramPairs = queryStr.substr(1).split('&');

Now you can build a hash table object of the name/value pairs making up the query string:

var params = {};
for (var i = 0; i < paramPairs.length; i++) {
    var parts = paramPairs[i].split('=');
    params[parts[0]] = parts[1];
}

In your onload, you can now use the parameter thusly:

sndReq(params.sndReq);

Make sure that the code is run within a script in the head of your document so that it's computed before the onload is executed.

answered Oct 14 '11 at 17:15

Jacob

77,566
24
149
228

what if the string contains hash #? – ShawnDaGeek Oct 14 '11 at 17:21
1

That will be in `window.location.hash`, not included in `window.location.search`. – Jacob Oct 14 '11 at 17:28
Thanks, I combined yours and keeganwatkins solution into one that fits me perfect! Again thank you both very much! – Cletus Oct 14 '11 at 19:33
in case someone wants to know: `var queryStr = window.location.search; var paramPairs = queryStr.substr(1).split('='); var query = paramPairs[1]; if ( !query ) { query = '96'; } sndReq(query);` – Cletus Oct 14 '11 at 19:36

score 4 · Answer 2 · answered Oct 14 '11 at 17:08

4

if you are using jQuery, why not use the DOM-ready handler instead of onload ? on that note, if it's just an ajax request, you don't even need to wait for DOM-ready. if you parse the query, you should be able to pass that in to your existing function.

// Wait for DOM-ready, may not be needed if you are just
// making a request, up to you to decide :)
$(function() {
    // window.location.search represents the query string for
    // current URL, including the leading '?', so strip it off.
    var query = window.location.search.replace(/^\?/, "");

    // If there is no query, default to '96'
    if ( !query ) {
        query = '96';
    }

    // Call existing function, passing the query value
    sndReq( query );
});

hope that helps! cheers.

answered Oct 14 '11 at 17:08

keeganwatkins

3,636
1
14
12

Hey thanks, I understood how to replace my onLoad in the body tag with the Query call. But the rest doesnt work. Leaves me with a page where no item is being shown. Where do I have to put the whole function? Or is it enough to place everything whats in our function into my window.ready function? – Cletus Oct 14 '11 at 19:05
you should be able to place that function in the `head` tag, or add the code from the function into another DOM-ready handler (if you already have one). if you do `console.log(query)` before calling `sndReq` does it have the value you expect? – keeganwatkins Oct 14 '11 at 19:16
I put it into the window.ready function like this `var queryStr = window.location.search; var paramPairs = queryStr.substr(1).split('='); var query = paramPairs[1]; if ( !query ) { query = '96'; } sndReq(query);` and it worked. Thank you very much – Cletus Oct 14 '11 at 19:41

ShawnDaGeek · Answer 3 · 2011-10-14T18:10:07.817

1

You can use RegExp to accomplish this, read the url parameters and pass them to ajax.

this simple script will read the current url and pass through regex to filter for paramters you specify.

EG: ThisReq = gip('sndReq'); pulls sndReq and value from the url.

<script language="javascript">
    function gip(name) {
        name = name.replace(/[\[]/, "\\\[").replace(/[\]]/, "\\\]");
        var regexS = "[\\?&]" + name + "=([^&#]*)";
        var regex = new RegExp(regexS);
        var results = regex.exec(window.location.href);
        if (results == null)
            sndReq('96');
         else
            return results[1];
    }
    // parameter pulled from url.
    ThisReq = gip('sndReq');
    // executes function sndReq();
    sndReq(''+ThisReq+'');
</script>

edited Oct 14 '11 at 18:10

answered Oct 14 '11 at 17:08

ShawnDaGeek

4,145
1
22
39

1

`window.location.search` has this value already (it's more reliable than manual parsing). also, why add to extra globals (`gip` and `ThisReq`) if they are not needed? – keeganwatkins Oct 14 '11 at 17:11
those globals i added in my case because i have more than 9 parameters to filter, all being dynamic. I guess i just did not know a better way. ` pfWidth = gup('width'); pfHeight = gup('height'); pfThumbs = gup('Thumbs'); pfThumbSize = gup('ThumbSize'); pftheURL = gup('theURL'); pfAppID = gup('AppID'); pftheID = gup('theID'); pfDefault = gup('SetDefault'); pfAlbum = gup('DefaultAlbum');` – ShawnDaGeek Oct 14 '11 at 17:14

Passing value to JS function through URL on window load

3 Answers3

Linked