jQuery Mobile - 自动打开对话框

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

错误：“未捕获的类型错误：无法调用未定义的方法 '_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 mobile状态发生了什么？

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

Answer 1

看起来您正在使用旧版本的 jQuery Mobile 的语法（这就是您收到错误的原因）。如果您使用的 jQuery Mobile 晚于 1.0a4.1，那么您应该看看这个页面：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 版本相比）。