jQuery mobile: supply parameters in hash URL?

Question

I'm working in jQuery mobile, which is great. I have a question about supplying parameters inside the hash part of a URL.

Here's some example code. In the content part of the home page, I'd like to be able to link to a page called eg '#photo-123' and have it load the 'photo' page below. I'd then extract the photo number from the URL, and load image 123.

  <!-- Home page -->
    <div data-role="page" id="home"> 
        <div data-role="header">
            <h1>Home</h1> 
        </div> 
        <div data-role="content">    
            <p><a href="#photo" data-role="button">Photo ###</a></p>  
        </div> 
    </div> 
    <!-- Photo page -->
    <div data-role="page" id="photo">
        <div data-role="header">
            <h1>Photo ###</h1>
        </div>
        <div data-role="content">
              <img id="myphoto" src="" />
        </div>
    </div>

This is so I can reuse the URL, ie the user can reload that page directly.

Is it possible to pass parameters inside a hash URL with jQuery mobile? (or indeed with HTML generally - I know it's possible with eg the BBQ plugin, but I'd rather avoid plugins if possible)

Answer 1

You can use global event hooks and data- tags to process and store parameters for internal (ie between #blah -> #blah2) transitions:

1. In your HTML you can go

   < a href="#photo" data-params="id=123">....< /a>

2. Intercept the clicks on all links and look for a specific data- element, say, data-params:

    $('a').live('click', function(e) { params = $(e.target).jqmData("params") } ) 

In this case you are creating a global params object, which you should be able to access in a uniform manner from all your code.

Answer 2

If you can structure your hashes like #photo?id=123, something like this can work:

$("#page").live("pageinit", function(e) {
    var id = $(e.target).attr("data-url").replace(/.*id=/, "");
    //now you have the id, do page-rendering logic
});

And to catch direct-links:

if (window.location.hash && window.location.hash.indexOf("?") !== -1) {
    var pageID = window.location.hash.split("?")[0];
    $(pageID).trigger("pageinit");
}

Answer 3

Check this fix out:

https://github.com/flodev/jquery-mobile/commit/f3b2e5d84493f3b8b27f9f423863cab2a416007a

Had a similar issue but adding this one line of code to the jquery.mobile js file allowed me to pass parameters in the URL without having to add plugins and js routing solutions.

Answer 4

you want to use .changPage() function

$("[name=button_name]").click(function() { 
    $.mobile.changePage('anotherPage.php?parm=123','slide',false,true);
});

Answer 5

You could do something like this:

$('#photo').ready(function () {
    var photoId = window.location.hash.replace("#photo", "");
    $("#myphoto").attr("src", "http://dummyimage.com/600x400/000/" + photoId);
    window.location.hash = "#photo";
});

This will force jQuery to transition to the #photo page, however need to stop jQuery mobile from trying to load up #photofff first. This ends up causing a quick flash on the page that there was an error loading the page and then the redirect to correct #hash tag.

Update
If you disable hash tracking on that page you should be able to remove the error message display.

<script type="text/javascript">
    $.mobile.hashListeningEnabled = false;
</script>

$('#photo').ready(function () {
    var photoId = window.location.hash.replace("#photo", "");
    $("#myphoto").attr("src", "http://dummyimage.com/600x400/000/" + photoId);
    $.mobile.changePage("#photo");
});