jQuery Mobile $.mobile.changePage post to page

Question

I'm using jQuery Mobile to create a mobile (obviously) website. I have a list of items which are created dynamically based off an AJAX request. This works well!

The next thing is that these list items need to link to another "page" which would require a parameter being sent to it.

The code I'm using is:

$("#cwCountries [data-role='listview'] a").live("click", function() {
    var dataurl = $(this).data("url");
    if(dataurl != null) {
        $.mobile.changePage($("#cwCountrySpec"), {
            type: "post",
            data: dataurl
        });
    }
});

Which does change to the cwCountrySpec page as you'd expect. As you can see I'm using the second parameter in $.mobile.changePage to pass the data through that I want my already-existent page to be able to receive and make use of.

I can intercept the change to cwCountrySpec with this code:

$("#cwCountrySpec").live('pagebeforecreate', function(event) {
    console.log(event);
});

But when I check the console, the data value is returned as undefined .

Is this possible, and if so, how?

Edit Well that's a shame...

I've just check the jQuery Mobile Methods docs, and it states,

Used only when the 'to' argument of changePage() is a URL.

That sucks. So how else can I send data between a page change?

Answer 1

How about setting the 'dataurl' value to a global variable, and then picking-up the value of that global variable when the '#cwCountrySpec' page loads.

var tmp_data;
$("#cwCountries [data-role='listview'] a").live("click", function() {
    var dataurl = $(this).data("url");
    if(dataurl != null) {
        tmp_data = dataurl;
        $.mobile.changePage($("#cwCountrySpec"));
    }
});

$("#cwCountrySpec").live('pagebeforeshow', function() {
    console.log(tmp_data);
});

---- EDIT ----

When you load the information into the new page, you can check to see if that page is empty or not so the page is only loaded once.

$("#cwCountrySpec").live('pagebeforeshow', function() {
    if ($("#cwCountrySpec div[data-role='content']").is(':empty')) {
        $("#cwCountrySpec div[data-role='content']").load(tmp_data);
    }
    console.log(tmp_data);
});

Answer 2

Well that's a shame...

I've just check the jQuery Mobile Methods docs, and it states,

Used only when the 'to' argument of changePage() is a URL.

That sucks. So how else can I send data between a page change?

Edit: Also seems that the developers don't want to include routes as part of the framework, unlike Sencha.