CODEWITHSUNDEEP
jquerymobileappendquery-string
Sonorus
Sonorus

Reputation: 31

Adding query string to href url on page load with jquery mobile

I am working on a web site using jquery mobile. In a page with a list of links, I need to append a query string parameter to hyperlinks that indicates the page size (obtained via javascript). So, the link

/view/id:1

should become 

/view/id:1?size={sizeInPixels}

The marked up list looks like this:

<li><a data-ajax="false" class="imagelink" href="/view/id:2840"><h2>text here</h2></a></li>
<li><a data-ajax="false" class="imagelink" href="/view/id:2841"><h2>text here</h2></a></li>

The javascript is:

$(document).on('pageinit', '[data-role="page"]', function() {
        var newSize = $(window).height()*.8;
        newSize = parseInt(newSize); 
        $("a.imagelink[href!='ignore']").each(function() {
                this.href += '?size=' + newSize;
        });
});

When the page is first accessed, the size parameter is not appended; if the page is refreshed it works fine.

How can I get the size parameter appended when a user first loads the page?

Upvotes: 0

Views: 1493

Answers (1)

IvanL
IvanL

Reputation: 2485

So basically you have a list of links to images that you want to give size information to so they can be re-sized server side to take into account the height of the display. To achieve this you run a script client side to transform the href of these links to include this querystring parameter.

I'm afraid your script might be running before the links are in the DOM causing your script to fail the first time (when everything still needs to be loaded) and work the second time (as it's coming from cache).

Edit: I removed the script (as it was jQuery instead of jQuery mobile). Take a look at the following URLs that Stano provided in the comment: Difference between $(document).ready and $(document).on('pageinit') and http://jquerymobile.com/demos/1.2.0-alpha.1/docs/api/events.html

Upvotes: 1

Related Questions