jQuery Mobile - 不改变哈希的对话框 [英] jQuery Mobile - Dialogs without changing hash

问题描述

我有一个搜索对话框，我弹出并填充jquery模板。在他们进行选择之后，我在当前页面上设置一个值。因此，我不需要hashTag或任何类似的东西，我只需要一个弹出对话框，我可以打开和关闭程序。我目前正在打开对话框

  $。mobile.changePage（dialog，{transition：slide，changeHash：false} ）; 
  

并用

  dialog.dialog（ '关闭'）; 
  

然而，在某些情况下（当页面导航到）时，关闭对话框将刷新当前页面

有更好的方式与此进行交互吗？

更新：

我想我知道发生了什么。因此，由于某些原因，jquery mobile通常会在DOM上保存2个页面，其中一个不可见，您可以通过在控制台中运行$（'[data-role = page]'）来验证这一点。一页是您所在的页面，另一页是您最初浏览的页面。不太确定为什么他们选择这样做，但你有它。

所以他们将对话框视为具有不同转换的页面导航，即使对话框已经在DOM中。因此，如果直接转到页面然后触发对话框，则修改当前页面并关闭它可以正常工作 - 因为原始页面始终加载到DOM中。但是，如果您转到另一页面，而不是导航到触发对话框的页面，然后触发该对话框将破坏当前页面，以使DOM中的页面成为初始页面和对话框。在这种情况下，它会完全重新加载该对话框启动页面，您永远无法进行任何修改。

Jeez。如何直接与jqm对话窗口进行交互？

解决方案

我想我有类似的问题。我想做的是基于某些参数，在加载时弹出一个对话窗口（在同一页面上显示该内容），他们可以关闭并查看加载的页面。

我可以使用加载或页面显示事件来启动加载，但是当我点击关闭将您发送回历史上一页时，而不是仅关闭对话框。

  //定位您的第一页内容，这里其id = success 
 //模态内容在页面id = dialog和data-role = 
 
 $（'＃success'）。live（'pageshow'，function（）{
 window.setTimeout（function（）{
 $ .mobile.changePage （'#dialog'，'pop'，false，false）; 
}，1）; 
} 
  

它是一个黑客，只是允许页面加载打败对话框，所以它被卡在历史中，然后对话框的默认对话框关闭行为按预期方式工作，谈论一个PITA，如果他们对于它将会做的JQuery UI对话框一点点东西比较容易。

I have a search dialog that I am popping up and filling with jquery templates. After they make a selection I set a value on the current page. As such I don't need hashTags or anything like that, I just need a pop-up dialog that I can open and close programatically. I am currently opening the dialog with

$.mobile.changePage(dialog, { transition: "slide", changeHash: false });

and closing it with

dialog.dialog('close');

However, in certain cases (when the page is navigated to), closing the dialog refreshes the current page.

Is there a better way to interact with this?

Update:

I think I figured out what is going on. So for some reason, jquery mobile usually keeps 2 pages loaded on the DOM - one of which is invisible, you can verify this by running $('[data-role=page]') in the console. One page is the page you're on, the other is the page that you initially navigated to. Not quite sure why they choose to do that, but there you have it.

So they treat dialogs as a page navigation with a different transition even if the dialog is already in the DOM. Therefore, if you go directly to the page and then trigger a dialog, modifying the current page and closing it works fine - because the original page is always loaded in the DOM. However if you go to another page, than navigate to the page that triggers the dialog, and THEN trigger the dialog it destroys the current page so that the pages in the DOM are the initial one and the dialog. In that case it reloads that dialog-launching page entirely and you never get a chance to make any modifications.

Jeez. How do I interact with the jqm dialog widget directly?

解决方案

I think I was having a similar problem. What I wanted to do was based on certain parameters, pop a dialog window on load (with that content on the same page), which they can close and view the page that loaded.

I could get it to pop on load using load, or the pageshow events, but when I clicked close that sent you back to the previous page in history, instead of just closing the dialog.

//target your 1st page content, here its id=success
//the modal content is in a page id=dialog and data-role="dialog"

$('#success').live('pageshow',function(){
    window.setTimeout(function(){
        $.mobile.changePage('#dialog','pop',false,false);
    },1);
}

Its a hack, and just allows the page load to beat the dialog so it gets stuck in history. Then the default dialog close behavior for the dialog works as expected. Talk about a PITA, if they took a little more for the JQuery UI dialog it would have made things a ton easier.

这篇关于jQuery Mobile - 不改变哈希的对话框的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！