JQuery Mobile Loses All Styles After Navigating Pages

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

The calls of jquery mobile to other pages, are with ajax and sometimes this produces a failure when loading styles and libraries.

When I use redirect an external page I use window.location.href.

A possible solution, is to correctly order the links and javascript in the header of the file, for example:

<head>
<meta charset="utf-8" />
<meta name="format-detection" content="telephone=no" />
<meta name="msapplication-tap-highlight" content="no" />
<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width" />
<link rel="stylesheet" href="jquery_mobile/jquery.mobile-1.4.5.min.css" />
<link rel="stylesheet" href="jquery_mobile/jquery.mobile.structure-1.4.5.min.css" />
<link rel="stylesheet" type="text/css" href="css/index.css" />
<script type="text/javascript" src="jquery_mobile/jquery-1.12.4.js"></script>
<script type="text/javascript" src="jquery_mobile/jquery.mobile-1.4.5.min.js"></script>
<title>my page</title></head>

Answer 2

Placing listview('refresh') after changing the page solved my problem.

$.mobile.changePage("#catalog");

$('#list_included_in_catalog_page').listview('refresh');

Answer 3

You need to refresh your list. e.g.)

$('Some DiV').listview('refresh');

Answer 4

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

Answer 5

After trying everything I settled for a less than ideal solution of using seperate .aspx pages.

But now this had the issue that I had to pass the parameters now in the URL between pages (security risk).

So instead of using :

javascript:GetGarageList("G9236")

I now use a guid instead :

http://localhost:54419/GarageList.aspx?id=319d8819-11ae-446f-b373-50d08e06159a

I generate the new page in the c# page load event :

    protected void Page_Load(object sender, EventArgs e)
    {
        Response.Write("<div data-role='page' id='garageList' data-add-back-btn='true' data-theme='a'>");
        Response.Write("<div data-role='header' data-position='fixed'>");
        Response.Write("<h1>Garages</h1>");
        Response.Write("<a href='index.html' data-icon='plus' data-iconpos='notext' class='ui-btn-right' data-theme='b'></a>");
        Response.Write("</div>");

        Response.Write("<div data-role='content'>");
        Response.Write("<ul data-role='listview' data-filter='true' data-filter-theme='a' data-filter-placeholder='search name or account no...' data-split-icon='info' data-split-theme='a'>");

        if (!string.IsNullOrEmpty(Request.QueryString["id"]))
        {
            Guid guid = Guid.Parse(Request.QueryString["id"]);
            using (DbContext db = new DbContext())
            {
                var f = db.Factors.Where(x => x.Guid == guid).SingleOrDefault();
                if (f != null)
                {
                    foreach (var g in f.Garages.OrderBy(x => x.Name))
                    {
                        Response.Write(String.Format("<li><a href='javascript:GetGarageDetails({0})'><h3>{1}</h3><p><strong>{2}</strong></p></a><a href='#' /></li>", g.Guid, g.Name, g.Town));
                    }
                }
            }
        }

        Response.Write("</ul>");
        Response.Write("</div>");
        Response.Write("</div>");
    }

This works pretty well, but I noticed some remnants of previous pages got left on the screen even after a page transition, this was solved by removing all the default html in the page and leaving only this line :

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="GarageList.aspx.cs" Inherits="CP.GarageList" %>

Now the issue I face is that the pages are super slow on my mobile device.

Answer 6

instead of

success: function (msg) {
    $("#garageList").html(msg.d);
    $.mobile.changePage("#garageList");
} 

Do

success: function (msg) {
    $("#abc").html("<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'> " + msg.d + "<ul>");
    $.mobile.changePage("#garageList");
    $("#abc").find(":jqmData(role=listview)").listview();
}