9

我正在经历一个严重的头痛,在过去的几个小时里,我无法弄清楚为什么当我在页面之间轻弹(由 ajax 动态加载)时,样式都会消失。

我已经在网上阅读了数十篇关于此的帖子,并尝试了 .page() trigger("Refresh") trigger create 等等。

第 1 页有一个列表,单击该项目时,它会获取另一个列表的完整内容并将它们放入 DOM。

JQuery 版本(移动版 1.1rc2 - 但与 1.0.1 稳定版相同的问题):

<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">

在初始列表上单击此链接:

javascript:GetGarageList("G9236")

触发:

// 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();
        }
    });
};

第一次加载时,第二页看起来很完美:

在此处输入图像描述

但是当我按下返回按钮时。然后点击另一个链接:

javascript:GetGarageList("G9336")

我搞砸了视图:

在此处输入图像描述

请帮忙!

编辑 :

其他人使用过 .trigger("create"); 并说他们解决了这个问题......但每次我将它添加到我的代码中时:

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

或者

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

它只是给了我一个永远的加载微调器。

编辑2:

根据下面的 Barnes 建议,我已将 html 更改为:

    <%--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 -->

然后我尝试了(在ajax成功中):

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

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

这是 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>

"

和其他变体,但它仍然不想玩(微调器在刷新时永远持续)......虽然它改进了一点(当我拿出刷新时):

在此处输入图像描述

4

6 回答 6

15

这一直在解决我所有的问题。

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

你只需要找到合适的元素放入选择器。

对我来说,这些行起到了作用:

$(document).bind('pagechange', function() {
  $('.ui-page-active .ui-listview').listview('refresh');
  $('.ui-page-active :jqmData(role=content)').trigger('create');
});
于 2012-04-14T19:57:09.207 回答
4

更改页面后放置listview('refresh')解决了我的问题。

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

$('#list_included_in_catalog_page').listview('refresh');
于 2012-05-21T15:28:18.357 回答
0

代替

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

success: function (msg) {
    $("#abc").html("&lt;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'&gt; " + msg.d + "&lt;ul&gt;");
    $.mobile.changePage("#garageList");
    $("#abc").find(":jqmData(role=listview)").listview();
}
于 2012-04-11T10:15:21.787 回答
0

在尝试了一切之后,我选择了一个不太理想的使用单独的 .aspx 页面的解决方案。

但是现在这有一个问题,我现在必须在页面之间的 URL 中传递参数(安全风险)。

所以不要使用:

javascript:GetGarageList("G9236")

我现在使用 guid 代替:

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

我在 c# 页面加载事件中生成新页面:

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

这工作得很好,但我注意到即使在页面转换之后,屏幕上也会留下一些以前页面的残余,这是通过删除页面中的所有默认 html 并只留下这一行来解决的:

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

现在我面临的问题是我的移动设备上的页面超级慢。

于 2012-04-12T09:28:00.023 回答
0

您需要刷新您的列表。例如)

$('Some DiV').listview('refresh');
于 2012-04-26T14:49:53.353 回答
0

jquery mobile 对其他页面的调用是使用ajax 的,有时在加载样式和库时会导致失败。

当我使用重定向外部页面时,我使用window.location.href.

一种可能的解决方案是在文件头中正确排序链接和 javascript,例如:

<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>
于 2016-12-22T21:57:00.990 回答