1

这应该是一个简单的问题，但似乎发生了一些奇怪的事情。我正在使用 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 mobile状态发生了什么？

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

4

1 回答 1

1

It looks like you are using syntax for an old version of jQuery Mobile (which is why you're getting an error). If you are using jQuery Mobile later than 1.0a4.1 then you should take a look at this page: http://jquerymobile.com/demos/1.1.0/docs/api/methods.html

Using the syntax of the documentation link above, here is what your code should look like:

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

If you are using jQuery Mobile 1.0a4.1 then upgrade, it's a year old at this point and isn't particularly stable or feature rich (compared to the latest 1.1.0 build).

于 2012-04-23T18:14:13.473 回答