cordova&jquery：value sent to another static html page

Question

I'm doing an ios web app using Cordova and JQuery. I create the index.html which has a 3-row list view. when the row is clicked, the page will change to another page.html. According to the clicked row, the JS will ask data from the server and refresh the page.html. Now My Question is what is the best practice to implement it? I mean which is the regular style to do it as I'm fresh to the front-end. Currently I add the anchor in index.html:

<li><a href="page.html">A Header Bars</a></li>

However, I meet problems:

1. I don't know how to get the clicked row information in page.html

2. In page.html, how I can start a request to fetch the data? In page.html, I write:

   $(document).ready(function()
   {
       console.log("test");
       document.write("page test");
   })
   

But it is not called.

Thanks.

Answer 1

If you want a value from one page to another you have few options (same rules apply for single jQM html with multiple page's and for jQM project built around multiple html files):

I. On the second page use pagebeforeshow and retrieve all needed data through a data object. Lets say you have 2 html files, first html has an id "page1" and second one has an id "page2"), example:

$('#page2').live('pagebeforeshow', function (e, data) {
    alert(data.prevPage.find('div[data-role="content"]').attr('id'));
});

II. Second option is to create a shared object which will be used as data storage:

var storeObject = {
    someValue : '1',
    anotherValue : '2'
}

This is an easiest solution but it will only work while ajax page loading is active.

III. 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:

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

More info

If you want to learn more about this topic take a look at this article. You will find several solutions with examples.

Answer 2

check this example here, Hope it will help

http://wpcertification.blogspot.com/2012/05/using-jquery-mobile-in-phonegapcordova.html

Answer 3

https://stackoverflow.com/a/16497284/3169868 answers this well. For cordova+wp8, the option with LocalStorage is easy to implement.