jquerymobile 和 AJAX答案

【问题标题】：jquerymobile and AJAXjquerymobile 和 AJAX
【发布时间】：2011-11-10 10:18:55
【问题描述】：

在我看来，我并没有完全理解 jquerymobile 背后的概念，因为我不知道如何解决这个问题。

我要做的是通过AJAX加载一些HTML内容，根据location.hash，放到一个新页面中，然后加载这个页面。

但如果我自己使用pagebeforechange 事件创建页面，jquerymobile 会忽略它，创建自己的 div，我的内容将不会显示。

我该怎么做？

编辑：这就是我目前的做法，但它不会工作。

$(function() {

    getPageContent(top.location.href, false);

    $(document).bind( "pagebeforechange", function( e, data ) {

            getPageContent(data.toPage, true);
    });


});



function getPageContent(pageUrl, changedPage) {

    var re = /.*\/#(.*)/;
    var result;


    result = re.exec(pageUrl);


    window.page = result[1].substr(0,3);
    window.id = result[1].substr(3);



    window.ajaxUrl = "request.php?page="+window.page+"&id="+window.id;

    $.ajax({

        url: window.ajaxUrl,

        success: function(data) {

            if(data.error) {
                alert(data.error);
            }
            else if(data.data) {
                if(changedPage) {
                    changePage(data.data));
                }
                else {
                    $('#content[role="main"]').html(atob(data.data));
                    setupPage();
                }

            }
            else {
                alert("UNKNOWN ERROR: "+data);
            }       
        }

    });

}

function changePage(html) {


    var div = "<div></div>";

    var newPage = $(div).attr("data-role", "page").attr("data-url", window.page+window.id);

    var header = $(div).attr("data-role", "header");
    var content = $(div).attr("data-role", "content");
    var footer = $(div).attr("data-role", "footer");

    $("body").append(newPage);
    newPage.append(header, content, footer);

    content.html(html);

    newPage.page();
}

【问题讨论】：

标签： jquery-mobile

【解决方案1】：

完整编辑整个答案：

首先。将您的身体 ID 设置为 id=body。然后当你想加载新页面并切换到它时，使用这样的 ajax 调用：

$.get(window.ajaxUrl, function(data){
    $('#body').append("<div id='newPage' data-role='page'></div>"); //Creates a new page.
    $('#newPage').html(data); //Loads the html content into the new page.
    $.mobile.changePage('#newPage'); //Navigates to the new page.
}

这会使用 GET 方法向您的window.ajaxUrl 中的 url 发送一个 ajax 调用。如果调用成功，它会创建一个名为“newPage”的新页面，并用从 ajax 调用接收到的数据填充它。然后重定向到新创建的页面。

这个jsFiddle 展示了它的基本工作原理。但是，它不使用任何 ajax 调用。

【讨论】：

好的，但这意味着我必须为页面上的每个按钮创建一个 onClick 函数，没有办法自动使用 jquery-mobile 的点击劫持吗？
我完全重做了答案。但是，我不明白您在上面的评论中提出的问题。如果您只想加载现有页面，请使用 $.mobile.changePage("url");
不，我希望我页面上的所有链接都具有这种行为。这就是我要找的。正如您在上面看到的，我通过捕获pagebeforechange 事件来做到这一点，但它不起作用......
您可以从每个按钮的点击中调用相同的函数，但使用不同的参数。

【解决方案2】：

你必须用 jQueryMobile 刷新页面：

 $("#your-page").trigger("create");

--编辑

<script> 
     $("#thepage").live("pageshow", function(){
        $("#thepage).trigger("create");
       });
</script>

在 'pageshow' 事件之前更改#thepage 的内容

【讨论】：

但我什么时候必须调用它？在pagebeforechange 事件中？我是否通过简单地将div-elements 添加到body 来创建页面？您能否提供更多示例代码？
你在完成加载和处理加载的html内容后调用它。
但是我应该在哪里加载 HTML 内容？
我会发布我自己的单独答案。
@Finn-LennartHeemeyer 已编辑！

【解决方案3】：

它会自动为您执行此操作 - 只需创建一个到页面的常规链接，jquery mobile 就会显示加载微调器，通过 ajax 在后台加载它，然后转换到新页面。

确保您的所有页面都使用唯一 ID 和 data-role='page'。在此处查看入门指南： http://jquerymobile.com/demos/1.1.0/docs/about/getting-started.html

【讨论】：