Question

I have a single HTML page where I need to have three jqm pages (data-role=page) (named #one, #two, #three). In each but page #one, I also have a back button in the header. In each page, I have a simple listview. On HTML generation, only the listview on page #one is populated. On click of an item in the list, I perform some ajax to get the contents of the next list and populate it. Everything works great until I click the back button and select a different item from the list. The result is that the nicely formatted jqm listview becomes a vertical list of links, not jqm styled and colored horiz bars with content.

My HTML and script is below.

<div data-role="page" id="one">
    <div data-role="header">
        <h1>Make</h1>
    </div>
    <div data-role="content">
        <ul data-role="listview" data-theme="b" id="cutpoint_makes_mobile">
            @foreach (var make in Model)
            {
                <li><a href="#">@make</a></li>
            }
        </ul>
    </div>
</div>
<div data-role="page" id="two">
    <div data-role="header">
        <a href="#one" data-role="button" data-icon="arrow-l">Back</a>
        <h1>Model</h1>
    </div>
    <div data-role="content">
        <ul data-role="listview" data-theme="b" id="cutpoint_models_mobile">
        </ul>
    </div>
</div>
<div data-role="page" id="three">
    <div data-role="header">
        <a href="#two" data-role="button" data-icon="arrow-l">Back</a>
        <h1>Size</h1>
    </div>
    <div data-role="content">
        <ul data-role="listview" data-theme="b" id="cutpoint_sizes_mobile">
        </ul>
    </div>
</div>
<div data-role="page" id="four">
    <div data-role="header">
        <a href="#three" data-role="button" data-icon="arrow-l">Back</a>
        <h1>Details</h1>
    </div>
    <div data-role="content">
        <h2 id="cutpoint_detail_mobile">
        </h2>
    </div>
</div>

… and the jquery code …

var make = null;
var model = null;

$(document).ready(function () {
    $("#cutpoint_makes_mobile a").click(function () {
        make = $(this).text();
        loadAllModelsMobile_Request(make);
    });
    $("#cutpoint_models_mobile a").live("click", function () {
        model = $(this).text();
        loadAllSizesMobile_Request(make, model);
    });
    $("#cutpoint_sizes_mobile a").live("click", function () {
        var size = $(this).text();
        loadDetailsMobile_Request(make, model, size);
    });
});

// NOTE, only the load models ajax calls are listed for brevity
// *** loadAllModelsMobile (Request/Response/Error) ***
function loadAllModelsMobile_Request(make) {
    var qs = "make=" + make;
    var url = "/HomeJson/CutPointsAllModels";
    $.ajax({
        type: "POST",
        url: url,
        dataType: "json",
        data: qs,
        success: loadAllModelsMobile_Response,
        error: loadAllModelsMobile_Error
    });
}
function loadAllModelsMobile_Response(data) {
    if (data.Success) {
        $("#cutpoint_models_mobile").find("li").remove().end();
        model = null;
        $.each(data.Data, function () {
            $("#cutpoint_models_mobile").append('<li><a href="#">' + this + '</a></li>');
        });
        $.mobile.changePage($("#two"));
    } else {
        // ToDo: handle errors
        //$("#admin_alert_msg").text(data.Data);
        //$("#dlg_admin_alert").dialog("open");
    }
}
function loadAllModelsMobile_Error(xhr) {
    // ToDo: handle errors
    //showAjaxErrorMessage("loadAllModelsMobile_Error", xhr.status, xhr.response);
}

I even used the pagebeforechange event notification and cleared out the li in there, but no change (same as clearing out the li in the ajax response since that’s before page change).

My question: how do I get jqm to style the list after it has already been styled once and I remove/replace its contents?

Answer 1

Some notes; this line does not need the .end() function call, that is used to return to the previous selection and you aren’t doing anything with the selection:

$("#cutpoint_models_mobile").find("li").remove().end();

Should change to:

$("#cutpoint_models_mobile").find("li").remove();

Appending each LI is CPU expensive, a better alternative is to either concoct a string or create an array of LIs.

Change:

    $.each(data.Data, function () {
        $("#cutpoint_models_mobile").append('<li><a href="#">' + this + '</a></li>');
    });

To:

    var output = [];
    for (var i = 0, len = data.Data.length; i < len; i++) {
        output[output.length] = '<li><a href="#">' + data.Data[i] + '</a></li>';
    }
    $("#cutpoint_models_mobile").append(output.join(''));

The for loop I used also performs faster than $.each() (although $.each() is quite a bit faster than $(<selector>)).each() and for (a in b)).

Now to get to your question.

You have to manually refresh listview widgets (and all other widgets) if you update their structure. You can do this with the .listview() function by passing it the string: "refresh". So the example just above this would turn-out like this:

    var output = [];
    for (var i = 0, len = data.Data.length; i < len; i++) {
        output[output.length] = '<li><a href="#">' + data.Data[i] + '</a></li>';
    }
    $("#cutpoint_models_mobile").append(output.join('')).listview('refresh');

Documentation for listview widgets is here: http://jquerymobile.com/demos/1.0/docs/lists/docs-lists.html (the section regarding updating a listview is at the bottom of the page)

UPDATE

Sometimes you will run into the problem of not knowing if the listview has been initialized yet or not. You can check for the existence of the .ui-listview class on the <ul> element, if it is there then the listview has already been initialized:

    var output    = [],
        $listview = $("#cutpoint_models_mobile");
    for (var i = 0, len = data.Data.length; i < len; i++) {
        output[output.length] = '<li><a href="#">' + data.Data[i] + '</a></li>';
    }

    $listview.append(output.join(''))
    if ($listview.hasClass('ui-listview')) {
        $listview.listview('refresh');
    } else {
        $listview.trigger('create');
    }