Simple parameter passing to dynamic pages
A question that often comes up is how to pass parameters to some dynamic page. I'm using a rather loose definition of "dynamic page". By that I mean a page that has some content creation done in Javascript (whether or not the page was originally provided by a server).
Typically, parameters are passed in the URL as a query string. Then you have to parse the query string, and it also looks ugly in the URL bar of desktop browsers. Why go to all that trouble?
Such pages usually have a pagebeforeshow event, and this is where content is typically added by Javascript code. It so happens that pagebeforeshow tells you which page was "previous", and so you have access to any data in the previous page.
A good example is when transferring to a dialog page from some detail page. The detail page has some details about some "thing". You have some dialog that needs to do something with that "thing". If you've stored some aspects of the "thing" in data- attributes in previous page, then you can easily transfer them to the new page:
- $(document).on("pagebeforeshow", ".my-dialog", function(event, data) {
- var $page = $(this),
- $prevPage = data.prevPage;
- $page.jqmData("section", $prevPage.jqmData("section"));
- $page.jqmData("item", $prevPage.jqmData("item"));
- });
Of course, you can access anything within the previous page, not just jqmData, and, as well, you can stuff the data you extract anywhere you'd like in the new page or the new page's jQuery object. In many cases, it may be sufficient to simply store the reference to the previous page, and then code for the new page can reference anything on the previous page at it's leisure.
In my particular case, I had a popup that didn't work-out as a popup. (Because it has a text entry box, and text entry boxes in popups are pretty broken on iOS.) So, I had to re-do it as a dialog. Since a popup is a part of the page that it pops-up from, the popup code had access to data stored in the page. When I changed it to a dialog, now it is a page on it's own, and doesn't have this data. But by transferring the data as above, I didn't have to re-write code originally meant for the popup.