Question

Im going through a serious headache, for the last few hours I cant figure out why when I flick between pages (dynamically loaded by ajax) that the styling all goes.

I have read dozens of posts on the net about this, and have tried .page() trigger(“Refresh”) trigger create and many more.

Page 1 has a list, on click of the item it fetches the complete contents of another list and put them into the DOM.

JQuery Versions (mobile 1.1rc2 – but same issue with 1.0.1 stable):

<script src="scripts/ajax.js"></script>
<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script src="http://code.jquery.com/mobile/latest/jquery.mobile.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/mobile/latest/jquery.mobile.css">

This link is clicked on initial list:

javascript:GetGarageList("G9236")

which triggers :

// show garages for factor
function GetGarageList(accNo) {
    $.mobile.showPageLoadingMsg("b", "Loading", false);
    $.ajax({
        type: "POST",
        url: "Default.aspx/GetGarageList",
        data: "{'accNo':'" + accNo + "'}",
        contentType: "application/json; charset=utf-8",
        dataType: "json",
        success: function (msg) {
            $("#garageList").html(msg.d);
            $.mobile.changePage("#garageList");
        },
        error: function () {
            ShowError("Error :(");
        },
        complete: function () {
            $.mobile.hidePageLoadingMsg();
        }
    });
};

On first load, the 2nd page looks perfect :

But when I press back button up top. Then click another link :

javascript:GetGarageList("G9336")

I get messed up view :

Please help!

EDIT :

Others have used .trigger(“create”); and say they solved the problem… but everytime I add that to my code like so :

$("#garageList").html(msg.d).trigger("create");

or

$("#garageList").html(msg.d);
$("#garageList").trigger("create");

It just gives me a loading spinner forever.

EDIT 2:

As per Barnes suggestion below I have changed the html as so :

    <%--Garage List--%>
    <div data-role="page" id="garageList" data-add-back-btn="true" data-theme="a">
        <div data-role='header' data-position='fixed'>
            <h1>Garages</h1>
            <a href='index.html' data-icon='plus' data-iconpos='notext' class='ui-btn-right' data-theme='b'></a>
        </div>
        <div data-role='content' id="abc">
            <ul data-role='listview' id='xyz' data-filter='true' data-filter-theme='a' data-filter-placeholder='search name or account no...' data-split-icon='info' data-split-theme='a'>

/// --> new content goes here... as simply many <li> items.

</ul>
        </div> <!-- /content -->
    </div> <!-- /page -->

Then I tried (in the ajax success):

            $("#xyz").empty();
            $("#xyz").html(msg.d);
            $("#abc").listview("refresh");
            $.mobile.changePage("#garageList");

AND

            $("#xyz").html(msg.d);
            $("#xyz").listview("refresh");
            $.mobile.changePage("#garageList");

HERE is some sample output of msg.d :

"<li><a href='javascript:GetGarageDetails(16267)'><h3>A KETCHEN MOTOR ENGINEERS</h3><p><strong>MID LOTHIAN</strong></p></a><a href="javascript:GetFactorDetails('16267')"></a></li>

<li><a href='javascript:GetGarageDetails(16328)'><h3>G.A.AUTOS</h3><p><strong></strong></p></a><a href="javascript:GetFactorDetails('16328')"></a></li>

<li><a href='javascript:GetGarageDetails(16262)'><h3>GARRY HENDERSON MOTOR ENGINEERS</h3><p><strong>WEST LIMTON</strong></p></a><a href="javascript:GetFactorDetails('16262')"></a></li>

<li><a href='javascript:GetGarageDetails(16264)'><h3>LEADBURN GARAGE LTD</h3><p><strong>PEELBLESHIRE</strong></p></a><a href="javascript:GetFactorDetails('16264')"></a></li>

<li><a href='javascript:GetGarageDetails(16315)'><h3>LOTHIAN MOTORS</h3><p><strong></strong></p></a><a href="javascript:GetFactorDetails('16315')"></a></li>

"

And other variations, but it still doesnt want to play (spinner goes on forever on refresh) … although its improved a little (when I take the refresh out) :

Answer 1

This has been solving all of my problems.

$('...').trigger('create');

You just have to find the right element to put in the selector.

For me, these lines did the trick:

$(document).bind('pagechange', function() {
  $('.ui-page-active .ui-listview').listview('refresh');
  $('.ui-page-active :jqmData(role=content)').trigger('create');
});