动态列表视图到详细信息页面(Jquery Mobile)

时间:2011-09-16 01:36:02

标签: php json listview jquery-mobile dynamic-data

我成功地从mysql数据库中列出了我的数据 在JQM。

我想将列表项链接到其详细信息。

因此,当点击列表时,会显示包含列表中数据的新页面。

我不知道该怎么做

继承人我现在所拥有的:但是我所拥有的链接不起作用,我想我错过了一些东西。

继承人js f http://jsfiddle.net/8WU39/16/

上的链接
 <script type= text/javascript>
  $('#seyzListPage').live('pageshow', function(){
        $.ajax({
         url: "data.php",
         dataType: 'json',

            success: function(json_results){
            listItems = $('#seyzList').find('ul');
            $.each(json_results.rows, function(key) {
               html = '<li <h3><a href="index1.html?id=' + [json_results.rows[key].airp_id] +'"rel="external">'+json_results.rows[key].airport_code+'</h3>';
              html += '<p><br> Aiport name: '+json_results.rows[key].airport_name+'</p></a></li>';


            listItems.append(html);
            });
            // Need to refresh list after AJAX call
              $('#seyzList ul').listview('refresh');
     $.mobile.pageLoading(true);     
        }
    });
});
  </script>

<div data-role="page" id="seyzListPage">  
    <div data-role="header" id="header">     
  <h1>Airports</h1>    
  </div>

  <div data-role="content"  id="seyzList">
<ul data-role="listview" data-inset="true" data-filter="true"></ul>


  </div>

    <div data-role="footer" data-postion="fixed">
    <h3>Footer</h3>
    </div>


    </div>

如何在其他html页面上将列表链接到其数据。

1 个答案:

答案 0 :(得分:0)

我遇到了一个非常类似的问题,并找到了一个简单的插件修复程序。它被称为jqm.page.params.js,可以找到here。实施非常简单。将插件文件添加到我的根目录,然后将其包含在index.html页面的底部。

在你的js文件中,你只想放置

 if ($.mobile.pageData && $.mobile.pageData.color){
    var color = $.mobile.pageData.color;
 }

位于 beforepageshow事件的顶部,以捕获添加到链接上的变量。将'color'替换为您要查找的变量。