0

I guess I should just be happy because of the general awesomeness of JQuery-Mobile, but I still can't imagine why JQueryMobile would not have a native way to pass variables.

Anyway, I'm trying to pass some variables around to create custom content on dynamically created "pages".

The pages are dynamically created fine. However I haven't been able to pass one single variable and have been trying for over a couple days now.

Any help would be awesome.

For the latest attempt at passing variables, I'm trying CameronAskew's $.mobile.paramsHandler.addPage code which works great out of the box.

Apart from generic jquery-mobile starting point, I Started With This Script which works really well to make pages dynamically, shown here: 

// Prepare your page structure
var newPage = $("<div data-role='page' id='page'><div data-role=header><a data-iconpos='left' data-icon='back' href='#' data-role='button' data-rel='back'>Back</a><h1>Dynamic Page</h1></div><div data-role=content>Stuff here</div></div>");

// Append the new page into pageContainer
newPage.appendTo($.mobile.pageContainer);

// Move to this page by ID '#page'
$.mobile.changePage('#page');

Here's the full javascript:

run();
setInterval(function(){    
    run();
},5000);

function run() {
    var output;
    $.ajax({
        url: "http://[url_here]/mobile_get_data_2.php",
        success: function( data ) {
            var obj = jQuery.parseJSON( data );
            var output='';
            var charts='';
            var idx=1;          
            $.each(obj,function(k,v){
                output += '<ul data-role="listview" data-count-theme="a" data-inset="true">';
                output += '<a data-count-theme="a" href="#chart?param1=212121&param2=32327"><li>[returned description here]';
                output += '<span class="ui-li-count">';
                output += [returned count here];
                output += '</span></a></li>';
                output += '</ul>';
                idx = (idx+1);
            });
            $('#sensors').html(output).trigger("create");
        }
    });
}

$('#sensors').on('click', function ( e) {
    // Prepare your page structure
    var newPage = $(
        "<div data-role='page' id='page'>"
        + "<div data-role=header>"
        + "<a data-iconpos='left' data-icon='back' href='#' data-role='button' data-rel='back'>Back</a>"
        + "<h1>Chart</h1>"
        + "</div>"
        + "<div data-role=content>Chart Here</div>"
        + "</div>"
    );
   newPage.appendTo($.mobile.pageContainer); // Append the new page into pageContainer

    // Move to this page by ID '#page'
     $.mobile.changePage('#page');     
});

// CameronAskew
$(function () {
    $.mobile.paramsHandler.addPage(
        "page",                      // jquery mobile page id which will accept parameters
        ["param1", "param2"],       // required parameters for that page
        [],                          // optional parameters for that page,
        function (urlVars) {
            // $("#param1display").html(urlVars.param1);
            // $("#param2display").html(urlVars.param2);
            alert( urlVars.param1);
        }
    );

    $.mobile.paramsHandler.init();
});

And the HTML:

<div data-role="page" id="summary">
<div data-role="header"><h1>MakerSpace</h1></div>
<ul id="sensors" data-role="listview" data-count-theme="c" data-inset="true"></ul></div>
<div data-role="footer"></div>
</div>
Cœur
  • 37,241
  • 25
  • 195
  • 267
Doparoo
  • 57
  • 7

1 Answers1

0

The stars aligned!

Changed this

$('#sensors').on('click', function ( e) {

to this

$('ul').on('click', function () {

put the variable in (obviously)

output += '<a data-count-theme="a" href="#chart?param1=[returned id]"><li>[returned description]';

And now it works.

I hope this helps someone out there...

Doparoo
  • 57
  • 7