How to update listview in jQuery Mobile?

E

Egor Tolstoy2012-07-10 23:12:12

JavaScript

Egor Tolstoy, 2012-07-10 23:12:12

I know the logical answer is to use .listview('refresh'). In my case, it absolutely does not work in any of its variations. I use it when developing an application using Phonegap for Android. jqm version is 1.0a1. Sources:

$("#nextDay").click(function(){ <br>
$("#SheduleList").append('<li><a href="#"><h3 class="ui-li-heading">ololo1</h3></a></li>');<br>
$('#SheduleList').listview('refresh');  <br>
});<br>
<br>
$("#prevDay").click(function(){<br>
$("#SheduleList").append('<li><a href="#"><h3 class="ui-li-heading">ololo</h3></a></li>');<br>
$("#SheduleList").listview();   <br>
});<br>

<body onload="init();"><br>
<div data-role="page"><br>
<div data-role="header" data-theme="b"><br>
<h1>Расписание группы 04-322</h1><br>
<h1 id=hday>День недели</h1><br>
</div><br>
<div data-role="content" data-theme="b"><br>
<ul id="SheduleList"> <br>
</ul><br>
<button id="nextDay">Следующий день</button><br>
<button id="prevDay">Предыдущий день</button><br>
</div><br>
</div><br>
</body><br>

I would be glad for any help, I have been suffering for the second day in a row.

Reply

Answer the question

In order to leave comments, you need to log in

2 answer(s)

E

Egor Tolstoy, 2012-07-11
@YourDestiny

I suddenly discovered that it was really the version of JQuery, refresh support was implemented only in version 1.0a2. Now everything is displayed perfectly, but the buttons have stopped working - but that's another story. Thanks for the help!

L

larikov, 2012-07-11
@larikov

This is the option that works for me. True jqm version is 1.0.1, and the attribute is set for the listdata-role="listview"

<!doctype html>
<html>
    <head>
        <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.css" />
        <script src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
        <script src="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.js"></script>
        <script type="text/javascript">
            $(function(){
                $("#nextDay").click(function(){ 
                    $("#SheduleList").append('<li><a href="#"><h3 class="ui-li-heading">ololo1</h3></a></li>');
                    $('#SheduleList').listview('refresh');  
                });

                $("#prevDay").click(function(){
                    $("#SheduleList").append('<li><a href="#"><h3 class="ui-li-heading">ololo</h3></a></li>');
                    $("#SheduleList").listview();   
                });
            });
        </script>
    </head>
    <body>
        <div data-role="page">
            <div data-role="header" data-theme="b">
                <h1>Расписание группы 04-322</h1>
                <h1 id="hday">День недели</h1>
            </div>
            <div data-role="content" data-theme="b">
                <ul id="SheduleList" data-role="listview"> 
                </ul>
                <button id="nextDay">Следующий день</button>
                <button id="prevDay">Предыдущий день</button>
            </div>
        </div>
    </body>
</html>