Unexpected HTML result using List view JQuery

Question

My implementation is at : http://i.cs.hku.hk/~hsbashir/Project_Work/Listview/list_view.html

The first entry is when the list is hardcoded. Second and third ones are when they are extracted from the server using xmlhttp object. I am unable to understand why in the 2nd & 3rd list the formatting is 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 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>

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 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>";
    }

?>

This is a typo right <<script>. If not, change it to <script> — Funk Forty Niner
– Funk Forty Niner, Commented Jun 9, 2014 at 17:02
if you're using jquery, then why roll your own ajax handler? That entire chunk of code could be replaced with a single jquery call. — Marc B
– Marc B, Commented Jun 9, 2014 at 17:02
@Marc B I'm not proficient in jquery. The list code is adapted — stud91
– stud91, Commented Jun 9, 2014 at 17:04

PeterKA · Accepted Answer · 2014-06-09 18:45:33Z

2

The second and third are added after the widget has been initialized. You therefore have to re-enhance (refresh) the widget each time you make an update to it. And you can do that using the $(parent_of_new_content).listview('refresh'). In your case you would have to call the following:

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

Just out of curiosity, is there any particular reason why you're using plain vanilla JS for your ajax call? If you were to use jQuery (recommended) your function would be:

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

EDIT

Please note that in the above code .enhanceWithin() has been replaced with .listview('refresh')

JS FIDDLE DEMO

edited Jun 9, 2014 at 18:45

answered Jun 9, 2014 at 17:13

PeterKA

24.7k5 gold badges28 silver badges52 bronze badges

Sign up to request clarification or add additional context in comments.

9 Comments

stud91 Over a year ago

Thanks! but in my format where do i put this method call? [Just a beginner who's tweaking around. No other reason for using this code]

PeterKA Over a year ago

See the edited version of your function. I have already added the enhanceWithin() function.

PeterKA Over a year ago

'Not working'? Are you getting an error? Can you provide your updated code? I have updated my code above; please update too and be sure there're no typos.

stud91 Over a year ago

you can see my link at the top of the page: i.cs.hku.hk/~hsbashir/Project_Work/Listview/list_view.html. It looks the same

PeterKA Over a year ago

Here's a similar post but for an earlier version of jQM. Please read up on refresh and enhanceWithin() so you understand how this works: stackoverflow.com/questions/17699232

|

Collectives™ on Stack Overflow

Unexpected HTML result using List view JQuery

1 Answer 1

9 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

9 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related