javascript&jquery: show URL parameters on load

Question

I'm accessing the URL parameters with javascript. Then I manipulate the DOM with jQuery Mobile. But when I access the html file with the parameter, it doesn't show. I need to refresh the page to make it work. What can I do?

Javascript:

<script type="text/javascript" charset="utf-8">
    $(document).ready(function() {
    // Read a page's GET URL variables and return them as an associative array.
        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;
        }
        var vars = getUrlVars()
        console.log(vars.institutname)
        $("#tasksPage").find("h1").append(vars.institutname)
        })
    </script>

EDIT

I just noticed that NONE of the jQuery/javascript is executed. To be clear: I have a link to that html page with the URL parameter. But if I click on that link and the page opens, it does not execute my code. I need to refresh to make that work.

I'm using jQuery Mobile.

Does your script show the same behavior if you use the event 'onload' instedead of 'document.ready'? — Reporter, Aug 01 '13 at 10:54
you mean this? $(window).load(function() { Then yes, same behavior. I must say, I'm using jQuery Mobile. — lornz, Aug 01 '13 at 10:59
`getUrlVars` works fine here? At least in Chrome and FireFox. Inserted in a testfile, url.html, called as `http://localhost/url.html?institutname=test1&var2=test2` - `tasksPage` -> `h1` is appended with test1 (without refresh). Or do I misunderstand? — davidkonrad, Aug 01 '13 at 11:05
Yes it works. And it works if you open the page directly. But I'm having another page with a link to that page. And it does not execute my code when coming via the link. — lornz, Aug 01 '13 at 11:08
Or did I missunderstand your post? Are you linking to the file? — lornz, Aug 01 '13 at 11:14
Ah, see this http://stackoverflow.com/questions/5622581/jquery-mobile-document-ready-equivalent [look for accepted answer] (I tried use a link to load the page, still it works) - so i guess it is `document.ready` that is not working properly in jQuery mobile — davidkonrad, Aug 01 '13 at 11:18

score 0 · Answer 1 · answered Aug 01 '13 at 10:56

0

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[hash[0]] = hash[1];
        }
        return vars;
    }

vars needs to be an object so that you can do vars[hash[0]] = hash[1];

answered Aug 01 '13 at 10:56

chim

8,407
3
52
60

Tried that. The function getUrlVars() is correct in my question. I don't have any problems with it. My problem is the console.log and the DOM manipulation does only work on reloading the page. I have a link to this page with the URL parameter, and I need to refresh the page to get the jQuery do it work. – lornz Aug 01 '13 at 11:04
add a parameter to the URL ;) – lornz Aug 01 '13 at 15:03

score 0 · Answer 2 · answered Aug 01 '13 at 12:11

0

Solved it. I needed to add this to the link to the page:

data-ajax='false'

answered Aug 01 '13 at 12:11

lornz

306
5
16

javascript&jquery: show URL parameters on load

EDIT

2 Answers2