需要在jquery mobile中刷新页面答案

【问题标题】：need to refresh page in jquery mobile需要在jquery mobile中刷新页面
【发布时间】：2012-02-02 02:28:18
【问题描述】：

我在使用 jquery mobile 时遇到了一些问题。当我从第一页移动到第二页时，它不会显示第二页，因为它应该是我每次都需要刷新我的页面。它最初似乎缺少一些 CSS 类。我不明白为什么会这样。

我使用 http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.css 作为 CSS

http://code.jquery.com/jquery-1.6.4.min.js

http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.js 作为 JS。

在同一页面上我有这个锚标记

<a href="" onClick="showText()">showText</a>

showText() 方法第一次没有调用并显示 javascript 错误 showText not defined 但是当我刷新页面时它工作正常。

【问题讨论】：

您需要添加更多信息：这两个单独的 .html 文件是多页文件，还是您所说的动态生成的页面？你怎么称呼第二页？您是否以编程方式调用 changePage，您是否单击了链接？也许添加更多代码。

标签： jquery

【解决方案1】：

关于showText()：

您必须了解 JQM 是如何工作的。为了启用转换等，JQM 将页面拉入并将页面放入 DOM。您从您的第一页（类似于您的 BasePage）开始，该页面已完全加载所有 .js/.css 文件并进行了增强。

当您加载第二个页面时，JQM 只抓取 data-role="page" id="your-2nd-page" 中的内容并将其添加到您的第一个页面之后的 DOM 中！此 div 标记之外的所有脚本以及第二页标题中的所有 .css 和 .js 文件都将不被 JQM 抓取。

因此，如果您的 showtext() 函数位于页面 div 之外的第 2 页或仅在第 2 页中使用的 .js 文件中，它将不会被抓取并注入 DOM，因此您的函数不会工作。

当您刷新第二页时，第二页将成为您完全增强的 BasePage，因此第二页上的所有脚本都将被加载，但是现在第一页上的所有脚本都将不起作用，如果您加载第一页。

解决方案：我将所有 css/脚本放在所有页面中。这样，无论用户从哪里开始，所需的一切都会被加载。

【讨论】：

经常感谢，它解决了我一半的问题。我正在使用 header.jsp 文件，我所有的 css 和 js 文件都在其中。我做了什么我将我的 javascript 代码移动到我的 header.jsp 文件中，并将所有 css 和 js 文件移动到所有单独的页面中。现在我的 javascript 工作正常，但它仍然无法正确加载第二页。我对所有页面只使用一个 css 文件。那是问题吗？从您之前的问题来看，这是两个不同的 html 页面
一个css文件没问题。加载不正确是什么意思？它在 DOM 中吗？它有一类 .ui-page-active 吗？到底是什么不正常？
我的 .css 文件里面没有 .ui-page-active 类。在第二页上有一个 div 标签，它具有 data-role="content" 和 id="cContainer" 并且它还自动向这个 div 标签添加了另外两个属性，即 class="ui-content" 和 role="main" 和还在我的 div 标签内添加两个带有一些 css 类的 div 标签。所以，当我刷新页面时，它会显示我想要的灰色背景颜色。当我第一次加载页面时，它最初并没有显示背景颜色。
嗯。我只能猜测 - 要么尝试将 data-theme="c" 添加到您的内容 div，以明确告诉 JQM 您想要灰色背景。您还可以检查 Firebug 以查看“错误”页面，哪个 CSS 设置了错误的背景。也许你在你的 CSS 中的某个地方覆盖了它。希望有帮助

【解决方案2】：

这不是一个解决方案，但它可以解决我的问题。

通过使用表单帖子而不是锚链接，我设法阻止了缓存页面的加载。

<!-- <a href="index.php?p=6_2"  data-role="none"><img src="images/large_red_arrow.png" /></a> -->
<form action="index.php?p=6_2" method="post" data-ajax="false">
    <input data-role="none" id="view-button" value="view" name="view" type="image" src="images/large_red_arrow.png" alt="View"/>
</form>

【讨论】：