Json 在多页模板上使用jQuery Mobile填充listview_Json_Listview_Jquery Mobile

Json 在多页模板上使用jQuery Mobile填充listview

json listview jquery-mobile

Json 在多页模板上使用jQuery Mobile填充listview,json,listview,jquery-mobile,Json,Listview,Jquery Mobile,我正在尝试使用jquery.mobile在第二个页面上呈现listview 我使用一个HTML和多个“页面” $（“#加载列表”）。单击（函数（）{ $.getJSON( "http://localhost/index.php/api/list“，{格式：“json”}，功能（数据）{ var输出=“”； $。每个（数据、函数（键、值）{ 输出+=''； }); $（'#listview'）。追加（输出）。listview（'refresh'）； }); }); 但现在的问题是，当我

我正在尝试使用jquery.mobile在第二个页面上呈现listview

我使用一个HTML和多个“页面”




$（“#加载列表”）。单击（函数（）{
$.getJSON(
"http://localhost/index.php/api/list“，{格式：“json”}，
功能（数据）{
var输出=“”；
$。每个（数据、函数（键、值）{
输出+=''；
});
$（'#listview'）。追加（输出）。listview（'refresh'）；
});
});

但现在的问题是，当我单击#loadList按钮时，它确实会将我带到#bar页面，但是，它似乎不是$（“#loadList”）。click（）会被执行，因为列表不会显示在#bar页面上。也就是说，没有任何内容附加到#listView

有什么想法吗？

您有id=“loadList”，也就是说，有一个右括号

<a href="#bar" data-role="button" data-inline="true" id="loadList)">List</a>

可能是这导致了您的问题？

首先，此代码中有一个问题，$。getJSON
加载逻辑为false。更改页面不能与$同时使用。getJSON

有两种方法可以实现这一点：

删除onclick事件并在第二页初始化期间加载数据：

$(document).on('pagebeforeshow', '#bar', function(){       
    $.getJSON(
              "http://localhost/index.php/api/list",{format: "json"},
              function(data){
                  var output = '';
                      $.each(data, function(key, val) {
                          output += '<li><a href="#">' + val +'</a></li>';
                      });
                      $('#listview').append(output).listview('refresh');
                  });
    });
});

JS:

$(document).on('pagebeforeshow', '#index', function(){     
    $('#populate-button').on('click',function(e,data){     
        $.ajax({url: "http://api.themoviedb.org/2.1/Movie.search/en/json/23afca60ebf72f8d88cdcae2c4f31866/The Goonies",
            dataType: "jsonp",
            jsonpCallback: 'successCallback',
            async: true,
            beforeSend: function() {
                $.mobile.showPageLoadingMsg(true);
            },
            complete: function() {
                $.mobile.hidePageLoadingMsg();
            },
            success: function (result) {
                ajax.jsonResult = result;
                $.mobile.changePage("#second");
            },
            error: function (request,error) {
                alert('Network error has occurred please try again!');
            }
        });
    });        
});

$(document).on('pagebeforeshow', '#second', function(){       
    ajax.parseJSONP(ajax.jsonResult);
});


var ajax = {  
    jsonResult : null,
    parseJSONP:function(result){
        $('#movie-data').empty();
        $('#movie-data').append('<li>Movie name:<span> ' + result[0].original_name+ '</span></li>');
        $('#movie-data').append('<li>Popularity:<span> ' + result[0].popularity + '</span></li>');
        $('#movie-data').append('<li>Rating:<span> ' + result[0].rating+ '</span></li>');
        $('#movie-data').append('<li>Overview:<span> ' + result[0].overview+ '</span></li>');
        $('#movie-data').append('<li>Released:<span> ' + result[0].released+ '</span></li>');  
        $('#movie-data').listview('refresh');
    }
}

$（document）.on（'pagebeforeshow'，'#index'，function（）{
$（“#填充按钮”）。在（'click'，函数（e，数据）{
$.ajax（{url:http://api.themoviedb.org/2.1/Movie.search/en/json/23afca60ebf72f8d88cdcae2c4f31866/The “傻瓜”，
数据类型：“jsonp”，
jsonpCallback:“successCallback”，
async:true，
beforeSend:function（）{
$.mobile.showPageLoadingMsg（true）；
},
完成：函数（）{
$.mobile.hidePageLoadingMsg（）；
},
成功：功能（结果）{
ajax.jsonResult=result；
$.mobile.changePage（“#秒”）；
},
错误：函数（请求、错误）{
警报（'发生网络错误，请重试！'）；
}
});
});        
});
$（document）.on（'pagebeforeshow'，'#second'，function（）{
parseJSONP（ajax.jsonResult）；
});
var ajax={
jsonResult:null，
parseJSONP:函数（结果）{
$（“#电影数据”）.empty（）；
$（“#电影数据”）。追加（“电影名称：”+结果[0]。原始电影名称+”）；
$（“#电影数据”）.append（“受欢迎程度：”+结果[0]。受欢迎程度+”）；
$（“#电影数据”）.append（“评级：”+结果[0]。评级+”）；
$（“#电影数据”）.append（“概述：”+结果[0]。概述+”）；
$（“#电影数据”）.append（“发布：”+结果[0]。发布+”）；
$（“#电影数据”）.listview（“刷新”）；
}
}

谢谢，第二种方法很有效，虽然这不是我想要的最佳解决方案，但它解决了我的问题。再次感谢。好眼睛，我在我的原始代码中拼写正确。在提交之前，我在这里编辑了代码

<!DOCTYPE html>
<html>
<head>
    <title>jQM Complex Demo</title>
    <meta name="viewport" content="width=device-width"/>
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" />
    <script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>    
</head>
<body>
    <div data-role="page" id="index">
        <div data-theme="a" data-role="header">
            <h3>
                First Page
            </h3>
        </div>        
        <div data-role="content">
            <a href="#" data-role="button" id="populate-button">Load JSON data</a>
        </div>
    </div>
    <div data-role="page" id="second">
        <div data-theme="a" data-role="header">
            <h3>
                Second Page
            </h3>
            <a href="#index" class="ui-btn-left">Back</a>
        </div>

        <div data-role="content">
            <h2>Simple list</h2>
            <ul data-role="listview" data-inset="true" id="movie-data" data-theme="a">

            </ul>
        </div>

        <div data-theme="a" data-role="footer" data-position="fixed">

        </div>
    </div>      
</body>
</html>

$(document).on('pagebeforeshow', '#index', function(){     
    $('#populate-button').on('click',function(e,data){     
        $.ajax({url: "http://api.themoviedb.org/2.1/Movie.search/en/json/23afca60ebf72f8d88cdcae2c4f31866/The Goonies",
            dataType: "jsonp",
            jsonpCallback: 'successCallback',
            async: true,
            beforeSend: function() {
                $.mobile.showPageLoadingMsg(true);
            },
            complete: function() {
                $.mobile.hidePageLoadingMsg();
            },
            success: function (result) {
                ajax.jsonResult = result;
                $.mobile.changePage("#second");
            },
            error: function (request,error) {
                alert('Network error has occurred please try again!');
            }
        });
    });        
});

$(document).on('pagebeforeshow', '#second', function(){       
    ajax.parseJSONP(ajax.jsonResult);
});


var ajax = {  
    jsonResult : null,
    parseJSONP:function(result){
        $('#movie-data').empty();
        $('#movie-data').append('<li>Movie name:<span> ' + result[0].original_name+ '</span></li>');
        $('#movie-data').append('<li>Popularity:<span> ' + result[0].popularity + '</span></li>');
        $('#movie-data').append('<li>Rating:<span> ' + result[0].rating+ '</span></li>');
        $('#movie-data').append('<li>Overview:<span> ' + result[0].overview+ '</span></li>');
        $('#movie-data').append('<li>Released:<span> ' + result[0].released+ '</span></li>');  
        $('#movie-data').listview('refresh');
    }
}