2

Currently I have a page created with Jquery Mobile and the content on the page is formed based on the URL id such as this http://domainname/page?id=2. The way I get the content is a ajax request when the page event beforepageshow is fired, using this jquery statement $(document).on( "pagebeforeshow", "#player", function( e ). This works fine however I want to know how i can retain this content even when I move away from the page.

For example if I go back i should go to a list however if a press button it should take me back to player page and shows all the content that I got from the ajax request on the page and the proper URL. How can this be done?

Gajotres
  • 57,309
  • 16
  • 102
  • 130
Kern Elliott
  • 1,659
  • 5
  • 41
  • 65

1 Answers1

1

There are several way this can be achieved. You will need to store your data or to move it during the page transitions. Here are some possible solutions:

Data/Parameters storing between page transitions

It is possible to send a parameter/s from one page to another during page transition. It can be done in few ways.

Reference: https://stackoverflow.com/a/13932240/1848600

Solution 1:

You can pass values with changePage:

$.mobile.changePage('page2.html', { dataUrl : "page2.html?paremeter=123", data : { 'paremeter' : '123' }, reloadPage : true, changeHash : true });

And read them like this:

$("#index").live('pagebeforeshow', function () {
    var parameters = $(this).data("url").split("?")[1];;
    parameter = parameters.replace("parameter=","");  
    alert(parameter);
});

This will only work on multi html page format.

Solution 2:

Or you can create a persistent javascript object for a storage purpose. As long ajax is used for page loading (and page is not reloaded in any way) that object will stay active.

var storeObject = {
    firstname : '',
    lastname : ''
}

Example: http://jsfiddle.net/Gajotres/9KKbx/

Solution 3:

You can also access data from the previous page like this:

$('#index').live('pagebeforeshow', function (e, data) {
    alert(data.prevPage.attr('id'));
});

prevPage object holds a complete previous page.

Solution 4:

As a last solution we have a nifty HTML implementation of localStorage. It only works with HTML5 browsers (including Android and iOS browsers) but all stored data is persistent through page refresh.

if(typeof(Storage)!=="undefined") {
    localStorage.firstname="Dragan";
    localStorage.lastname="Gaic";            
}

Example: http://jsfiddle.net/Gajotres/J9NTr/

Everything mentioned here and much more can be found in my other ARTICLE, or HERE. Just search for the chapter called: Data/Parameters storing between page transitions

Community
  • 1
  • 1
Gajotres
  • 57,309
  • 16
  • 102
  • 130
  • 1
    This seems to be the way forward for me thanks will try to implement soon – Kern Elliott Mar 28 '13 at 19:09
  • one issue, if I go back from the player page to the list page but try to return to the player page via the url `http://domainname/page` the the `beforepageshow` function will fire again but I don't want to happen. I want to store the link to the actual data but not reload all the data. – Kern Elliott Mar 29 '13 at 17:46
  • Think of a song playing on the player page, you press back on the player page to go to a previous list of songs. Then you decide to go forward which will make the user return to the player page. this is fine but you don't want the song to stop playing you want it to continue as is – Kern Elliott Mar 29 '13 at 17:49
  • Then you need to use some kind of if statement to check if content has already been loaded. Or instead of pagebeforeshow event you should use pageinit, it will trigger only once. – Gajotres Mar 29 '13 at 17:51
  • I tried the `pageinit` but for some reason it doesn't ketch the id of the url in time so it loads nothing via ajax – Kern Elliott Mar 29 '13 at 17:53
  • Then you should use an if to check if content has already been loaded. Pagebeforeshow event will trigger every time page is shown, so you need some kind of check against that. – Gajotres Mar 29 '13 at 17:55
  • to get the id within the url I use this function `function getParam(name) { name = name.replace(/[\[]/, "\\\[").replace(/[\]]/, "\\\]"); var regexS = "[\\?&]" + name + "=([^]*)"; var regex = new RegExp(regexS); var results = regex.exec(window.location.href); if (results == null) return ""; else return results[1]; }` then pass the returned value into the ajax function – Kern Elliott Mar 29 '13 at 17:55