Question

以下代码从服务器获取信息并将其显示在我的页面上。它工作正常，但只有第一次尝试。

例如，我第一次打开此页面时，

我收到了信息：

天然气法案日期：2014年5月13日交易类型：银行金额：$ 1.00

之后如果我转到另一个页面更新一些交易并返回到此页面，它将不会显示更新的信息，只显示“气体账单”＆＃39;以上信息。如果我一起关闭我的应用程序并重新启动它，则会显示更新的信息。

我可以添加到当前代码中的任何内容，以便每当我访问此事务页面时它立即显示更新的信息，而无需每次都关闭并重新启动我的应用程序吗？ TNKS。

    $(document).on("pagebeforeshow", "#transaction" ,function(){
    $.ajaxSetup({ cache: false });
    $('#transaction').find('.ui-content').empty(); 
    //Transaction
    $.getJSON(theUrl + "user/transactionlog/", function (data) {
        //Loop for each element on the data
        $.each(data, function (elem) {
            var wrap = $("<div/>").attr('data-role', 'collapsible');
            //Create the h1 and the other elements appending them to transactions List
            $("<h1/>", {
                text: data[elem].reference
            }).appendTo(wrap);

            $("<p/>", {
                text: "Date: " + data[elem].date
            }).appendTo(wrap);

            $("<p/>", {
                text: "Transaction Type: " + data[elem].account
            }).appendTo(wrap);

            $("<p/>", {
                text: "Amount: \u00A3" + data[elem].amount
            }).appendTo(wrap);
            wrap.appendTo('#transactionList');
        });//end of for loop
        $( "#transactionList" ).collapsibleset();
    });//end of transaction page update
});

HTML：

<div data-role="page" id="transaction" data-theme="e">
            <header data-role="header">
            <h1>Transaction</h1>    
        </header>
        <article data-role="content">
            <div data-role="collapsible" data-collapsed="false" id="transactionList">
                <!--wil fill up with info from database-->
            </div>
        </article>
        <footer data-role="footer" data-position="fixed">
                <h1></h1>
        </footer>
        </div>
    <!--End of transaction page-->

Answer 1

它可能被浏览器缓存了。尝试设置：

$.ajaxSetup({ cache: false });

在提出请求之前。如果您不想要此全局设置，则可以将jquery ajax与JSON数据类型一起使用。

如果它不起作用，您可能需要在url中附加一些随机字符以确保它获取新版本。 EG：url.com/file?34244ff232

Answer 2

这是因为您正在使用 pageinit 事件。它只会触发一次，基本上它是jQuery Mobile替代jQuery文档的替代品。

您需要的是每次访问页面时触发的页面事件。最好的选择是 pagebeforeshow ，甚至 pageshow ，但您可以决定哪一个最适合您。

详细了解 here 。或者，如果您想查看一些有用的示例，请查看 here 。

更新

如果您想删除旧内容，请使用以下行：

$('#pageID').find('.ui-content').empty();

或者你可以使用这个：

$.mobile.activePage.find('.ui-content').empty();

当然，如果激活页面是您要显示内容的页面，则最后一行将起作用。

在添加新内容之前。

如何使我的页面显示更新的事务

2 个答案:

更新