Question

我的实施位于：http://i.cs.hku.hk/~hsbashir/Project_Work/Listview/list_view.html

第一个条目是列表是硬编码的。第二个和第三个是使用xmlhttp对象从服务器中提取它们的时候。我无法理解为什么在第二和第二第3个列表格式不同。

原始HTML：

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.css">
<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.js"></script>
<script>
lastRecord=0;
    function loadNews(){
            var xmlhttp;
            if (window.XMLHttpRequest) {
              xmlhttp = new XMLHttpRequest();
            } else {
              xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
            }
            var x = document.getElementById("sample");
            x.innerHTML = "hello";
            xmlhttp.onreadystatechange = function () {
              if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
                  var news = document.getElementById("news_mesgs");
                 news.innerHTML += xmlhttp.responseText;
                                 $("news_mesgs").enhanceWithin();

              }
          }

          xmlhttp.open("GET", "queryNews.php?lastRecord="+lastRecord,true);
          xmlhttp.send();
        }
</script>
</head>
<body onload="loadNews()">

<div data-role="page" id="pageone">
    <div data-role="main" class="ui-content">
    <ul data-role="listview" data-inset="true" id="news_mesgs">
        <li>
        <a href="#">
        <img src="http://i.cs.hku.hk/~hsbashir/Project_Work/Listview/suicide-panel.jpg">
        <h2> HKU identifies a new strategy to protect flowers from freezing stress </h2>
        <p> sample description </p>
        </a>
        </li>

    </ul>
    </div>
</div>



<div id="sample"></div>
</body>
</html>

更新了HTML

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.css">
<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.js"></script>
<script>
    lastRecord=0;
    function loadNews(){
        $('#sample').html( 'hello' );
        $.get( 
        "queryNews.php?lastRecord="+lastRecord,
        function( data ) {
            $('#news_mesgs').append( data )
            .enhanceWithin();
        }
    );
}
</script>
</head>
<body onload="loadNews()">

<div data-role="page" id="pageone">
    <div data-role="main" class="ui-content">
    <ul data-role="listview" data-inset="true" id="news_mesgs">
        <li>
        <a href="#">
        <img src="http://i.cs.hku.hk/~hsbashir/Project_Work/Listview/suicide-panel.jpg">
        <h2> HKU identifies a new strategy to protect flowers from freezing stress </h2>
        <p> sample description </p>
        </a>
        </li>
    </ul>
    </div>
</div>



<div id="sample"></div>
</body>
</html>

PHP

<?
...

mysql_connect($host,$username,$password);
mysql_select_db($database) or die( "Unable to select database");    


$query = "SELECT * FROM News_Info";

$result = mysql_query($query) or die( "Unable to execute query");

while ($row = mysql_fetch_array($result)){
        print "<li>";
        print "<h2>".$row['Title']."</h2>";
        print "<p>sample description is here</p>";
        print "</a>";
        print "</li>";
    }

?>

Answer 1

在窗口小部件初始化之后添加第二个和第三个。因此，每次对其进行更新时，都必须重新增强（刷新）窗口小部件。你可以使用$(parent_of_new_content).listview('refresh')来做到这一点。在您的情况下，您必须调用以下内容：

$('#news_mesgs').listview( 'refresh' );

出于好奇，有没有什么特别的原因让你使用普通的香草JS进行你的ajax通话？如果您使用jQuery（推荐），您的功能将是：

lastRecord=0;
function loadNews(){
    $('#sample').html( 'hello' );
    $.get( 
        "queryNews.php?lastRecord="+lastRecord,
        function( data ) {
            $('#news_mesgs').append( data )
            .listview( 'refresh' );
        }
    );
}

修改

请注意，在上面的代码.enhanceWithin()已替换为.listview('refresh')

JS FIDDLE DEMO

使用List视图JQuery的意外HTML结果

1 个答案: