Take the 2-minute tour ×

i have the following problem :

I'm using Jquery mobile , user can search for products and the details of those page are created dynamically :

something like :

 $("body").append('<div class="products" data-role="page" id="'+pageId+'"><div data-role="header"><p class="backSearch"><a href="#base" data-rel="back" data-role="button" data-inline="true" data-icon="back">back</a></p><h1>' +data.title+ '</h1></div></div>');

 // create the content DIV
 $('#'+pageId).append('<div data-role="content" id="content_'+pageId+'">...</div>');

It's working fine , but the problem is that when you go to the product details and you click on the refresh the form appears again and since the Dom is refreshed i don't have access to the product details anymore (need to do another search etc..)

Any solution in mind to resolve this issue ?

share|improve this question
I've always used a placeholder page, added the data dynamically and refreshed the page –  Phill Pafford Sep 16 '11 at 18:46
add comment

3 Answers

up vote 2 down vote accepted

To save these details locally, and keep them available after a browser refresh, try using store.js. It's a cross browser javascript library for storing local variables:


share|improve this answer
Thank's for the answer but i prefer to only use a jquery solution –  Tarek Sep 16 '11 at 16:28
You won't be able to store these variables using jQuery alone. You'll need to use local storage. So your best options are either local storage via something like store.js or doing something clever with your URLs. –  Spike Sep 16 '11 at 17:15
add comment

I'm storing data using localstorage of the browser. When the page is refreshed i check the data in the variable and load from the localstorage if I need.

share|improve this answer
add comment

Use empty() to clear the contents of the target

$('#'+pageId).empty().append('<div data-role="content" id="content_'+pageId+'">...</div>');
share|improve this answer
add comment

Your Answer


