0

我试图有一个可以显示相同类型数据的页面（比如说水果）。然后我想在我的网站层次结构中的任何地方加载这个页面，但每次都使用不同的参数。

我的主页如下所示，有两个指向同一页面的链接show.html：

<div data-role="navbar" data-iconpos="top" data-theme="a" class="nav-ecommera">
    <ul >
      <li>
        <a href="show.html?p=apples" data-role="button">Apples</a>
      </li>
      <li>
        <a href="show.html?p=oranges" data-role="button">Oranges</a>
      </li>
    </ul>
</div>

单击这两个按钮中的每一个都会show.html在 DOM 中创建一个新的页面实例。因此，show.html 中的所有项目都将在 DOM 中具有重复的 ID。

在我的 javascript 中，我想动态填充 show.html 页面：

$('div[id="show"]').live("pagebeforeshow", function(e, data) {
     var p = getUrlParameter("p");
     show(p);
});

var show = function(p) {
    $.ajax({
        url:'http://show.com/?p='+p,
        success: function(data) {
                    // Refresh 'show' page with new data
                    // First time: It's fine.
                    // Second time: 'show' page is duplicated in the DOM so it's messy.
                 } 
    });
}

现在第一次show.html加载一切都很好。然而，第二次show.html加载两次，并且 DOM 包含许多重复的 ID。

有没有办法在加载新页面之前从 DOM 中删除第一页？

或者：

有没有更好的方法可以实现我在这里想要实现的目标？

更新：show我已经尝试在加载新页面时 删除以前的页面实例。就显示第二页而言，它起作用。但是在手动删除后，需要第二次显示第一页时会出现问题。

我认为原因是 jQuery mobile 似乎认为第一页已经加载，尽管我们手动删除了它。因此，再次访问时它不会完全重新加载第一页。我说的是这样的导航顺序：Home -> Apples -> Back to home -> Oranges -> Back to home -> Apples（这里你得到一个有缺陷的页面）。

4

2 回答 2

1

您可以通过以下选项加载show.php页面：$.mobile.changePage()reloadPage

//bind to all links that have an HREF attribute that starts with "show.html"
$('a[href^="show.html"]').bind('click', function () {

    //set a default query-string for the page-load
    var query = '';

    //if this link's HREF attribute has a query-string, use it
    if (this.href.indexOf('?') > -1) {
        query = this.href.split('?')[1];
    }

    //forward the user to the page, telling jQuery Mobile to reload the page
    //which will use the new query-string sent
    $.mobile.changePage('show.html', { reloadPage : true, data : query });

    //prevent the default behavior of the click
    return false;
});

reloadPage（布尔值，默认值：false）

强制重新加载页面，即使它已经在页面容器的 DOM 中。仅当 changePage() 的 'to' 参数是 URL 时使用。这是文档$.mobile.changePage()：

来源：http: //jquerymobile.com/demos/1.1.0/docs/api/methods.html

data-url当 jQuery Mobile 加载同一页面两次时，这是因为 HREF 属性中的 URL与伪页面元素上的属性不匹配。要调试此问题，请确保在将页面插入 DOM时检查将哪些data-url属性添加到页面。show.html如果它似乎不匹配，那么您可以data-url在元素上设置一个属性，例如：

<div data-url="/show.html" data-role="page" id="show-page">
    ...
</div>

然后，您将始终使用 URL 链接到该页面：/show.html

于 2012-04-19T18:07:37.497 回答
1

1）您可以将 ID 更改为类。

2）您可以使用包含 show.html 的包装器，当您第二次尝试加载它时，找到您之前加载的那个并删除它。

您的 show.html：

<div class='previous-load'>
  ... enclosed show.html HTML ...
</div>

JavaScript：

$('div[id="show"]').live("pagebeforeshow", function(e, data) {
     var p = getUrlParameter("p");
       show(p);
});

var show = function(p) {

    $(".previous-load").remove();

    $.ajax({
        url:'http://show.com/?p='+p,
        success: function(data) {
                    // Refresh 'show' page with new data
                    // First time: It's fine.
                    // Second time: 'show' page is duplicated in the DOM so it's messy.
                 } 
    });
}
于 2012-04-19T17:52:43.903 回答