0

我有一个包含几个页面的 html 文件，当用户在特定页面上按下按钮时，我正在加载一个新的 html 文件，其中包含带有结果的页面。页面加载工作得很好，问题是我无法在新 html 中的新页面之间导航。当我在浏览器上手动加载页面时，它工作得很好。

有人知道为什么吗？我想我需要在加载完成后对页面执行一种刷新操作，但我不会这样做，因为页面从远程服务器检索数据，我不知道刷新操作是否会尝试再次从远程服务器检索数据（这将重复用户等待他得到答案的时间）。

这是我使用的代码行： $.mobile.changePage( "menu.php?q="+query, { transition: "slide"} );

谢谢

4

2 回答 2

0

... the problem is that i can't manage to navigate between the new pages in the new html.

这一行让我相信您正在尝试为远程 URL 链接返回多页模板（这意味着您按下的链接不会链接到同一文档上的伪页面，而是链接到另一个文档）。jQuery Mobile 默认情况下不允许这样做（我认为您可以找到该功能的插件）。jQuery Mobile 仅从返回的外部文档中检索第一个data-role="page或元素。data-role="dialog"

您可以使用单页模板，其中每个伪页面都包含在其自己的文档中，并且您可以通过普通 URL 链接到每个伪页面（例如“/contact-us/index.php”）

或者

您可以将所有必要的页面放在一个文档中，并使用基于散列的链接（例如“#home”）在它们之间进行链接。当您这样做时，您仍然可以从数据库中检索数据，但您必须通过 AJAX 创建代码来执行此操作（并且很可能绑定到页面事件）。

或者

也许有一个插件。如果没有，其实做起来并不难，你只需要自己抓取外部data-role="page"元素，而不是让 jQuery Mobile 来做，将它们全部添加到 DOM，然后像往常一样过渡到第一个。

更新

如果你想一次加载多个伪页面，试试这个：

//hijack link clicks on links with the `click-hijack` class
$(document).on('click', '.click-hijack', function () {

    //show loader
    $.mobile.loading('show');

    //create AJAX request for pseudo-page(s)
    $.ajax({
        url      : $(this).attr('href'),
        dataType : 'html',
        success  : function (response) {

            //hide loader
            $.mobile.loading('hide');

            //get the pseudo-page(s) from the AJAX response
            var $pages = $(response).find('[data-role="page"], [data-role="dialog"]');

            //append the pseudo-page(s) to the DOM
            //(this may need to change if you are using a framework like ASP.NET as they can add wrapper DOM elements)
            $("body").append($pages);

            //now that the pesueo-page(s) is/are in the DOM, we can transition to them normally
            $.mobile.changePage('#' + $pages.eq(0).attr('id'));
        },
        error    : function () {
            //don't forget to handle errors
        }
    });

    //stop the default behavior of the link, as well as propagation of the click event
    return false;
});

注意：此代码未经测试，请在使用代码时考虑到这一点。

于 2012-12-11T20:36:37.280 回答
0

默认情况下，在 jQuery Mobile 中，当您通过 ajax链接到外部页面时， jQuery Mobile 只会拉取第一个data-role="page"，或者如果找不到，它将获取内容并将其包装在 data-role="page" div 中。

data-ajax="false"您可以通过链接到没有 ajax 的页面（添加到您的链接）来链接到外部多页文档。

如果您想通过 ajax 一次加载多个页面，您可以使用 @Jasper 建议的方法自己手动完成，也可以使用专门为此目的制作的jQuery-Mobile-Subpage-Widget 。

于 2012-12-12T03:16:01.403 回答