JQuery Mobile Loses All Styles After Navigating Pages

ajax, css, javascript, jquery-mobile

Solution

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');
});

Problem

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>  </div>  ``` 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) :

Original source