如何让我的页面显示更新的交易

Question

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

比如我第一次打开这个页面，

我得到了信息：

煤气费 日期：13/05/14 交易类型：银行 金额：1.00 美元

之后如果我去另一个页面更新一些交易并回到这个页面，它不会显示更新的信息，只显示上面的'Gas Bill'信息。如果我一起关闭我的应用程序，然后重新启动它，就会出现更新的信息。

我可以在当前代码中添加什么内容，以便在我每次访问此交易页面时立即显示更新的信息，而无需每次都关闭并重新启动我的应用程序？ 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

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

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

了解更多信息here。或者，如果您想查看一些工作示例，请查看 here。

更新：

如果您想删除旧内容，只需使用此行：

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

或者你可以使用这个：

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

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

在添加新内容之前。

Answer 2

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

$.ajaxSetup({ cache: false });

在提出请求之前。如果你不想要这个全局设置，你可以使用带有 JSON 数据类型的 jquery ajax。

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