php - Unexpected HTML result using List view JQuery -
my implementation @ : http://i.cs.hku.hk/~hsbashir/project_work/listview/list_view.html
the first entry when list hardcoded. second , third ones when extracted server using xmlhttp object. unable understand why in 2nd & 3rd list formatting different.
original 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 new strategy protect flowers freezing stress </h2> <p> sample description </p> </a> </li> </ul> </div> </div> <div id="sample"></div> </body> </html>
updated 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 new strategy protect flowers 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 select database"); $query = "select * news_info"; $result = mysql_query($query) or die( "unable execute query"); while ($row = mysql_fetch_array($result)){ print "<li>"; print "<h2>".$row['title']."</h2>"; print "<p>sample description here</p>"; print "</a>"; print "</li>"; } ?>
the second , third added after widget has been initialized. therefore have re-enhance (refresh) widget each time make update it. , can using $(parent_of_new_content).listview('refresh')
. in case have call following:
$('#news_mesgs').listview( 'refresh' );
just out of curiosity, there particular reason why you're using plain vanilla js ajax call? if use jquery (recommended) function be:
lastrecord=0; function loadnews(){ $('#sample').html( 'hello' ); $.get( "querynews.php?lastrecord="+lastrecord, function( data ) { $('#news_mesgs').append( data ) .listview( 'refresh' ); } ); }
edit
please note in above code .enhancewithin()
has been replaced .listview('refresh')
Comments
Post a Comment