Question

这应该是一个简单的问题，但似乎有些奇怪的事情发生了。我正在使用Django，并希望在任何页面视图上打开包含当前消息的jQuery移动对话框。关闭对话框后，窗口应返回即将查看的页面。所以真的问题是如何在页面加载时打开一个对话框，然后显示页面。

这（它的任何多种变体）都不起作用：

{% if messages %}
<section class="dialog" id="messagesDialog" data-role="dialog" data-theme="a">
<header class="okay" data-role="header"><h1>This is a title</h1></header>
<div data-role="content">
    <ul>
        {% for message in messages %}
        <li{% if message.tags %} class="{{ message.tags }}"{% endif %}>{{ message }}</li>
        {% endfor %}
    </ul>
</div> {# content #}
</section>

<script type="text/javascript">
$(document).one('pageinit', function(event) {
    $.mobile.changePage("#messagesDialog", 'pop', true, true);
});
</script>
{% endif %}

但这样做：

{% if messages %}
<section class="dialog" id="messagesDialog" data-role="dialog" data-theme="a">
<header class="okay" data-role="header"><h1>This is a title</h1></header>
<div data-role="content">
    <ul>
        {% for message in messages %}
        <li{% if message.tags %} class="{{ message.tags }}"{% endif %}>{{ message }}</li>
        {% endfor %}
    </ul>
</div> {# content #}
</section>

<script type="text/javascript">
$(document).one('pageinit', function(event) {
    $.mobile.changePage("WhatHeck?!?!"); // This will return a 500 error from the server
    $.mobile.changePage("#messagesDialog", 'pop', true, true);
});
</script>
{% endif %}

那么，这是一个已知的问题，还是我遗漏的东西？我可以让页面弹出对话框，然后在关闭对话框后显示正确的页面的唯一方法是在更改为对话框之前调用$.mobile.changePage()导致错误。

===添加===

无错误，没有对话框，页面正确：

$("section@[data-role=page]").one('pagechange', function(event) {
    //$.mobile.changePage("WhatHeck?!?!");
    $.mobile.changePage("#messagesDialog",{
        transition : 'pop',
        reverse    : false,
        changeHash : true
    });
});

无错误，打开对话框，页面错误：

$(document).one('pagechange', function(event) {
    //$.mobile.changePage("WhatHeck?!?!");
    $.mobile.changePage("#messagesDialog",{
        transition : 'pop',
        reverse    : false,
        changeHash : true
    });
});

服务器请求/ WhatHeck

500错误？！？！（预期），打开对话框，正确页面：

$(document).one('pagechange', function(event) {
    $.mobile.changePage("WhatHeck?!?!");
    $.mobile.changePage("#messagesDialog",{
        transition : 'pop',
        reverse    : false,
        changeHash : true
    });
});

没有错误，打开对话框，页面错误：

$(document).one('pagechange', function(event) {
    $.mobile.changePage($("section@[data-role=page]"));
    $.mobile.changePage("#messagesDialog",{
        transition : 'pop',
        reverse    : false,
        changeHash : true
    });
});

错误：“未捕获的TypeError：无法调用未定义的方法'_trigger'”，没有对话框，正确页面：

$(document).one('pagechange', function(event) {
    $.mobile.changePage($("section@[data-role=page]",{
        changeHash : true
    }));

    $.mobile.changePage("#messagesDialog",{
        transition : 'pop',
        reverse    : false,
        changeHash : true
    });
});

无错误，打开对话框，页面错误：

$(document).one('pagechange', function(event) {
    $.mobile.changePage("#Home");
    $.mobile.changePage("#messagesDialog",{
        transition : 'pop',
        reverse    : false,
        changeHash : true
    });
});

实际上有效！

$(document).one('pagechange', function(event) {
    $.mobile.changePage("#Home", {
        allowSamePageTransition : true
    });

    $.mobile.changePage("#messagesDialog",{
        transition : 'pop',
        reverse    : false,
        changeHash : true
    });
});

也有效（对于任何页面）：

$(document).one('pagechange', function(event) {
    $.mobile.changePage($("section@[data-role=page]"), {
        allowSamePageTransition : true
    });

    $.mobile.changePage("#messagesDialog",{
        transition : 'pop',
        reverse    : false,
        changeHash : true
    });
});

所以问题的解决方案就是这个问题的答案：当错误页面无法加载时，jquery移动状态会发生什么？

所以看起来，当从pagechange事件处理程序中调用changePage时，历史记录尚未更新。对我来说仍然没有意义，我需要强制它重新加载当前页面，然后打开对话框。这至少是一个更好的解决方案，然后期待来自服务器的错误。

Answer 1

看起来你正在使用旧版jQuery Mobile的语法（这就是你收到错误的原因）。如果您在1.0a4.1之后使用jQuery Mobile，那么您应该查看此页面：http://jquerymobile.com/demos/1.1.0/docs/api/methods.html

使用上面文档链接的语法，这是您的代码应该是这样的：

$(document).one('pageinit', function(event) {
    $.mobile.changePage($("#messagesDialog"), {
        transition : 'pop',
        reverse    : true,
        changeHash : true
    });
});

如果您正在使用jQuery Mobile 1.0a4.1然后进行升级，那么此时已经有一年了，并且不是特别稳定或功能丰富（与最新的1.1.0版本相比）。

jQuery Mobile - 自动打开对话框

1 个答案: