Edit in JSFiddle

/* For Demo */
/* add elements based on retrieved data */
function showStuff(page, data) {
    var data = data ? data : "noValue";
    var $page = $(page);
    var demo = {
        fruits: ["Orange", "Apple"],
        vegetables: ["Tomato", "Carrot"],
        noValue: ["nothing"]
    };
    var list = $("<ul/>", {
        "data-role": "listview",
            "data-inset": true,
            "data-theme": "b"
    });
    var items = '';
    $.each(demo[data], function (i, v) {
        items = $("<li>" + v + "</li>");
        list.append(items);
    });
    $("ul", $page).remove();
    $(".ui-content", $page).append(list);
    $("ul", $page).listview();
}

/* Pass data with changePage */
$(document).on("pageinit", "#p1", function () {
    $(".data").on("click", function () {
        $.mobile.pageContainer.pagecontainer("change", "#p2", {
            stuff: this.id,
            transition: "flip"
        });
    });
});

/* retrieve data and run function to add elements */
$(document).on("pagebeforechange", function (e, data) {
    if ($.type(data.toPage) == "object" && data.toPage[0].id == "p2") {
        var stuff = data.options.stuff ? data.options.stuff : null;
            showStuff("#p2", stuff);
    }
});