意想不到的HTML结果使用列表视图JQuery

我的实现是:http://i.cs.hku.hk/~hsbashir/Project_Work/Listview/list_view.html

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

原始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>";
    }
?>

在小部件初始化之后添加第二个和第三个。因此，每次对小部件进行更新时都必须重新增强(刷新)它。你可以用$(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

相关内容

最新更新

热门标签：