jQuery Mobile-自动打开对话框 [英] jQuery Mobile - Auto open dialog
问题描述
这应该是一个简单的问题，但是似乎发生了一些奇怪的事情.我正在使用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时，历史记录尚未更新.对于我来说仍然没有意义，我需要强制其重新加载当前页面，然后打开对话框.至少比预期服务器出错会是更好的解决方案.
您似乎在对旧版本的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版本相比).
This should be an easy question, but there seems to be something strange going on. I'm using Django, and want to have a jQuery mobile dialog open with the current messages on any page view. After closing the dialog, the window should return the the page that was about to be viewed. So really the issue is how to open a dialog on page load, and then show the page.
This (any many variations on it) does not work:
{% 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 %}
But this does:
{% 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 %}
So, is this a known issue, or something I'm missing? The only way I can get the page to pop the dialog and then show the correct page after closing it, is by calling $.mobile.changePage() to cause an error before changing to the dialog.
===Added===
No Error, no dialog, correct page:
$("section@[data-role=page]").one('pagechange', function(event) {
//$.mobile.changePage("WhatHeck?!?!");
$.mobile.changePage("#messagesDialog",{
transition : 'pop',
reverse : false,
changeHash : true
});
});
No Error, opens dialog, wrong page:
$(document).one('pagechange', function(event) {
//$.mobile.changePage("WhatHeck?!?!");
$.mobile.changePage("#messagesDialog",{
transition : 'pop',
reverse : false,
changeHash : true
});
});
500 error from server requesting /WhatHeck?!?! (expected), opens dialog, correct page:
$(document).one('pagechange', function(event) {
$.mobile.changePage("WhatHeck?!?!");
$.mobile.changePage("#messagesDialog",{
transition : 'pop',
reverse : false,
changeHash : true
});
});
No error, opens dialog, wrong page:
$(document).one('pagechange', function(event) {
$.mobile.changePage($("section@[data-role=page]"));
$.mobile.changePage("#messagesDialog",{
transition : 'pop',
reverse : false,
changeHash : true
});
});
Error: "Uncaught TypeError: Cannot call method '_trigger' of undefined", No dialog, correct page:
$(document).one('pagechange', function(event) {
$.mobile.changePage($("section@[data-role=page]",{
changeHash : true
}));
$.mobile.changePage("#messagesDialog",{
transition : 'pop',
reverse : false,
changeHash : true
});
});
No Error, opens dialog, wrong page:
$(document).one('pagechange', function(event) {
$.mobile.changePage("#Home");
$.mobile.changePage("#messagesDialog",{
transition : 'pop',
reverse : false,
changeHash : true
});
});
Actually works!
$(document).one('pagechange', function(event) {
$.mobile.changePage("#Home", {
allowSamePageTransition : true
});
$.mobile.changePage("#messagesDialog",{
transition : 'pop',
reverse : false,
changeHash : true
});
});
Also works (For any page):
$(document).one('pagechange', function(event) {
$.mobile.changePage($("section@[data-role=page]"), {
allowSamePageTransition : true
});
$.mobile.changePage("#messagesDialog",{
transition : 'pop',
reverse : false,
changeHash : true
});
});
So the solution to my problem, is the answer to this question: What is happening in the jquery mobile state when the error page fails to load?
So it seems like, when calling changePage from inside the pagechange event handler, the history had not yet been updated. Still doesn't make sense to me that I need to force it to reload the current page, then open the dialog. That's at least a better solution then expecting an error from the sever.
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).
这篇关于jQuery Mobile-自动打开对话框的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
