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

Question

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?

If you're still having issues, You can try my [plug-in](https://github.com/CameronAskew/jquery.mobile.paramsHandler) which allows jQM pages to be loaded with URL parameters, and maintains those parameters within the URL so that page refreshes/etc work fine. — Cameron Askew, Apr 04 '14 at 22:13

score 1 · Accepted Answer · edited May 23 '17 at 10:32

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

Thanks @IvanL for the references. I'd read the second-cited document from @Stano previously, but a second more careful reading helps. I've changed the 1st line in the javascript code snippet to `$(document).bind('pageinit', '[data-role="page"], function() {` and that seems to address the issue. Thanks! — Sonorus, Jun 26 '13 at 05:31

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

1 Answers1