JQuery mobile: hash url feed options?

Question

I work in jQuery mobile and it is great. I have a question about supplying parameters inside the hash of the url.

Here is a sample code. In the content part of the main page, I would like to be able to link to a page called, for example. '# photo-123' and load the photo page below. Then I will extract the photo number from the URL and upload 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 means that I can reuse the URL, i.e. user can reload this page directly.

Is it possible to pass parameters inside a hash url using jQuery mobile? (or, generally speaking, with HTML in general - I know that this is possible, for example, using the BBQ plugin, but I would prefer to avoid plugins if possible)

Answer 1

You can use global event hooks and data tags to process and save parameters for internal (i.e. between #blah → # blah2) transitions:

• In your HTML you can go

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

• Intercept clicks on all links and find a specific data item, say data-params:

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

In this case, you create a global params object that you must have access uniformly from all of your code.

Answer 2

If you can structure your hashes like #photo? id = 123, something like this might 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 catch the direct links:

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

Answer 3

you want to use . function changPage ()

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

Answer 4

You can 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 go to the #photo page, however, you must disconnect jQuery mobile from trying to download #photofff . This causes a quick flash on the page that an error occurred while loading the page, and then redirected to the correct #hash tag.

Update
If you disable hash tracking on this page, you can remove the display of the error message.

 <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"); }); 

Answer 5

Check out this fix:

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

If a similar problem had been added, but adding this line to the jQuery jquery jchoery.mobile file allowed me to pass parameters in the url without the need to add plugins and js routing solutions.