在'pageshow'上更新列表视图的内容

时间:2013-10-23 19:55:15

标签: javascript listview jquery-mobile

我正在尝试使用listview填充“pageshow”上的数据。使用Javascript和JQM 1.3.2。 我的html部分是我的页面

<div data-role="page" data-theme="b" id="listPlaces">
    <div data-role="header" data-position="fixed">
                <h4>Header</h4>
    </div>
    <div data-role="content">
  <div class="content-primary" id="content-primary"></div>
    </div>
  <div data-role="footer"><h4>Footer</h4></div>

我正在调用外部javascript:

 $(document).off("pageinit", "#listPlaces");
 $(document).on("pageinit", "#listPlaces", (function parseData(){
        var output = '', val;
        var output = '<ul data-role="listview" data-autodividers="true" id="listOfPlaces">';
        for (val in localStorage) {
            if (localStorage.hasOwnProperty(val)) {
                place = JSON.parse(localStorage[val]);
                output += '<li><div data-role="collapsible">' + '<a href="placeDetail.html?place='  + place["name"] + '">'  + place["name"] + '</a><br /><span style="font-size:10px;padding-left:20px">' + place["address"] + '</span><div></li>'
            }
        }
        output += '</ul>';
        return output;
    }));
 $(document).on("pageshow", "#listPlaces", (function() {
             alert('in pageshow');
     var div = $('#content-primary');
     div.output(parseData());
     div.find('ul').listview();
 }));

我看到'in pageshow'警告,但是没有定义parseData()。我不知道如何解决这个问题。当我将输出发送到console.log时,它看起来很好,我可以将其复制到另一个文件并正确显示。

感谢任何帮助。我是新来发布在这个网站上所以我试图遵守规则。如果我做错了,请提前道歉。我也搜索了网站,发现这个答案how to update the styles to a listview in jquery mobile?有所帮助,但我仍然坚持这个网页显示功能。 感谢

1 个答案:

答案 0 :(得分:0)

  

DIV的输出(parseData());

什么是.output()? - &GT;也许你正在寻找.html()

应该这样做:

 $(document).off("pageinit").on("pageinit", "#listPlaces", parseData);

 $(document).on("pageshow", "#listPlaces", (function() {
     alert('in pageshow');
     var div = $('#content-primary');
     div.html(parseData());
     div.find('ul').listview();
 }));

function parseData(){
    var output = '', val;
    var output = '<ul data-role="listview" data-autodividers="true" id="listOfPlaces">';
    for (val in localStorage) {
        if (localStorage.hasOwnProperty(val)) {
            place = JSON.parse(localStorage[val]);
            output += '<li><div data-role="collapsible">' + '<a href="placeDetail.html?place='  + place["name"] + '">'  + place["name"] + '</a><br /><span style="font-size:10px;padding-left:20px">' + place["address"] + '</span><div></li>'
        }
    }
    output += '</ul>';
    return output;
}