Question

我已根据数据库创建动态列表视图但问题是加载列表视图我必须再次刷新页面。

例如，

Page A.html有一个按钮，Page B.html有一个listview

当我点击页面A.html页面内的按钮B.html加载但列表视图不可见，当我再次刷新B.html时，列表视图加载。

单击代码页B加载

时的页面代码A即index.html

<div data-role="content">   
        <p>
               <a href="findme.html" id="findMeBtn" data-role="button" data-icon="delete">Find Me</a>
               <a href="index.html" data-role="button" data-icon="delete">Fingle Hunts Basic</a>
               <a href="index.html" data-role="button" data-icon="delete">Communicator</a>  

        </p>


        <p>
         <div id="action">
              <div id="loading-icon"></div>
              <div id="msg"></div>
         </div>
        </p>
</div><!-- /content -->

Page B的代码iefindme.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Find Me</title>
<link rel="stylesheet" type="text/css" href="style/jquery.mobile.css"/>
<link rel="stylesheet" type="text/css" href="style/main.css"/>

</head>

<body>
    <div data-role="page"  id="findme">
    <div data-role="header"  data-theme="b">
        <a href="index.html" data-icon="back">Back</a>
        <h1>VisitFingal</h1>

    </div><!-- /header -->
    <div data-role="content" >  
    <center>
    <div class="vf-nav-view vf-button-panel" >
        <div data-role="controlgroup" data-type="horizontal" data-fullscreen="true" >
            <a href="index.html" data-role="button" style="width:30%;" data-theme="b">List</a>
            <a href="index.html" data-role="button" style="width:30%;" data-theme="b">Map</a>
        </div>
    </div>
    </center>

    <div id="findMeListView">

    </div>


    </div><!-- End of FindMe Page -->
    <div data-role="page"  id="details">
         <div data-role="header"><h1>Details</h1></div>
        <div data-role="content"></div>
    </div>
    <div data-role="footer"  data-theme="b"  data-id="mainfoot" data-position="fixed">
    <div data-role="navbar">
        <ul>
            <li><a href="index.html" >Home</a></li>
            <li><a href="findme.html"  class="ui-btn-active ui-state-persist">Find Me</a></li>
            <li><a href="#">Communicatior</a></li>
            <li><a href="#">Like</a></li>
            <li><a href="#">Favourates</a></li>
        </ul>
    </div>

    </div><!-- /footer -->

    </div>
</body>
<script src="js/jquery-1.6.3.min.js" type="application/javascript"></script>
<script src="js/jquery.mobile.js"  type="application/javascript"></script>
<script type="application/javascript">

        $(document).bind( "pagebeforechange", function( e, data ) {



          $.getJSON('getData.php', function(data) {
                  var items = [];
                $page  = $("#findme");
                $content = $page.find("#findMeListView" );
                var listViewData='<ul data-role="listview" data-filter="true" data-inset="true" data-theme="c" >';
                for (var i=0; i <data.length;i++)                   
                {
                    listViewData += '<li><a href="details.html?id='+data[i].id+'"><img height="95" width="95" src="'+data[i].url+'" /><h3>'+data[i].name+'</h3></li>';

                }
                     listViewData+='</ul>';

                    $content.html(listViewData);
                    $content.find( ":jqmData(role=listview)" ).listview();



          });


        });

</script>
</html>

Answer 1

当您使用这样的多页面模板时，当您从第A页到第B页单击时，JS将被忽略。这是因为jQuery Mobile AJAX链接仅从新页面中提取第一个data-role="page元素，将它附加到当前DOM，您可以想象这会忽略data-role="page元素之外的任何代码。

两个修正：

将page B的JavaScript代码直接放在data-role="page元素中，以便在jQuery Mobile对页面进行AJAX加载时对其进行解析。
将您网站的所有代码放入一个JS包含文件中，并将其包含在每个页面的<head>中;这样，无论用户是刷新还是深入链接到网站以及他们使用jQuery Mobile的AJAX链接进行导航，您网站的所有代码都将可用。 这是我首选的方法。

Answer 2

在加载新页面和内容未正确触发之前，我遇到过jQuery Mobile的问题。主要是表单提交和数据库调用。我通过在加载页面的链接上放置属性data-ajax =“false”来使用廉价修复。这样它就可以完成HTTP REQUEST，而不仅仅是ajax调用，并加载DOM和所有内容。

这是一个例子..

<a href="findme.html" id="findMeBtn" data-role="button" data-icon="delete" data-ajax="false">Find Me</a>

Answer 3

对于那些希望在您的应用程序中使用直接源代码的人，我在Github上创建了一个免费的开源存储库。

请注意，它目前正在使用JQM 1.1.0 随意下载，分叉，使用，复制代码。

https://github.com/jaydeepw/jquerymobile-dynamic-listview

干杯！

无法在jquery mobile中加载动态列表视图

3 个答案: