为什么jQueryMobile重新加载对话框上的页面?

时间:2012-02-20 16:16:27

标签: jquery-mobile

我使用以下代码加载jQueryMobile对话框:

<a data-rel="dialog" href="/path/to/dialog?arg1=val1" data-theme="b" id="deleteButton" class="ui-btn-right home" data-direction="reverse" data-transition="slidedown">Delete</a>

我的对话框有两个按钮:

<a data-role="button" href="/path/to/page/that/showed/dialog" id="deleteAddressButton" data-rel="back">Delete</a>
<a data-role="button" data-theme="a" href="/path/to/page/that/showed/dialog" data-rel="back">Cancel</a>

当我单击按钮时,对话框关闭并返回打开对话框的页面。但是,打开对话框的页面正在通过ajax重新加载,这似乎是不必要的并且正在破坏事物。有谁知道为什么会这样?如果不重新加载调用页面,对话框是否应该能够关闭?

注意:如果我最初转到其他页面,则仅重新加载调用页面,例如:

首页 - &gt;调用对话框的页面 - &gt;对话框

当我首先进入主页,然后是调用对话框的页面时,会出现问题。如果我在调用对话框的页面上执行完整页面重新加载,然后打开并关闭对话框,则不会通过ajax重新加载调用对话框的页面。

编辑:这也发生在jQuery Mobile的文档站点上。要看到这个:

  1. 转到http://jquerymobile.com/demos/1.0.1/
  2. 导航至“页面和对话框”
  3. 导航至“对话框”
  4. 点击第一个“打开对话框”按钮。
  5. 使用Firebug或类似的东西来观看Ajax调用。
  6. 使用任一按钮关闭对话框。
  7. 请注意,会激活Ajax调用以重新加载调用页面。

5 个答案:

答案 0 :(得分:3)

这似乎是一个错误,我打开了一个issue for jquery-mobile at github和一个补丁。

答案 1 :(得分:2)

修改

一个简单的解决方案是对调用对话框的页面使用非ajax链接

<a href="url/to/page-that-calls-dialog" data-ajax="false">...</a>

这会以丢失DOM缓存并重新加载整个页面为代价。

看起来我们必须等到jQuery为对话框小部件提供正确的行为。

原因

这是因为jQuery mobile在DOM中只保留了三​​个页面:

  1. 第一次加载的页面(在您的案例中为主页)。
  2. 过渡页面(带有'加载'动画的页面)。
  3. 您要导航到的页面(本例中为对话框页面)。
  4. 第一个存在直到您执行非ajax导航(例如刷新浏览器或键入URL然后按Enter键),如果是,则新的导航成为第一页。

    第二个只在你换到另一个页面时出现,并且与第一个页面的生存时间相同。

    第三个始终保存您要导航到的新页面,并且(这里是'troll-magic')每次使用ajax 导航时都会替换它。

    按照这个想法的顺序:

    • 当您进入“主页”时,第一页将设置为“主页”。

    • 当您转到“调用对话框的页面”时,会创建第二页,第三页设置为“调用对话框的页面”。

    • 当您调用对话框时,这将取代之前的第三页,因此您的“调用对话框的页面”将从DOM中删除。

答案 2 :(得分:1)

你在“pageShow”回调中做了什么吗?因为那可能是造成这种情况的原因。隐藏对话框后,“pageShow”事件将再次被触发。

如果您不希望它显示,您将需要重新构建代码以相应地处理此问题,或使用“pageLoad”而不是页面显示。以下是描述此行为的JQM文档的链接:http://jquerymobile.com/test/docs/api/events.html

答案 3 :(得分:1)

修改

这样做,并确保你使用$('#yourDialog')。dialog('close') $.mobile.page.prototype.options.domCache = true;

我可以确认即使在按预期关闭对话框时只触发了pageshow,jQM仍会对页面执行AJAX请求。如果这不是唯一的方法,那就好了,但到目前为止看起来好像就是这样。

答案 4 :(得分:0)

jQuery Mobile的网站做同样的事情,因此它必须是默认行为。