Search jQuery

jQuery Forum

Listview refreshing issue

in jQuery Mobile • 5 months ago

I'm trying to update my listview by JS, but it seems not all the elements rendered properly. Pls check the picture below, the second row is added by JS.

And the souce code:

<!DOCTYPE html>
<html>
    <head>
<title>Schedules</title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" />
        <script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
        <script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>
        <script language="javascript">
            $(document).ready(function() {
                show_schedules();
            });
            function show_schedules()
            {
                var oList = $('#schedule_listview');
                var user = 'Username 2 (new added)';
                var session_name = 'session name 2 (new added)';
                var time = '2:30PM';
                var html = oList.html();
                html += '<li>'
                    + '<h3>' + session_name + '</h3>'
                    + '<p>' + user + '</p>'
                    + '<div style="text-align: right;">'
                    + '<a href="#" data-role="button" data-mini="true" data-inline="true" data-icon="delete" data-theme="c" data-iconpos="left">Cancel</a>'
                    + '<a href="#" data-role="button" data-mini="true" data-inline="true" data-icon="gear" data-theme="c" data-iconpos="left">Edit</a>'
                    + '</div>'
                    + '<div class="ui-li-aside">'
                    + '<p><strong>'
                    + time
                    + '</strong></p>'
                    + '</div>'
                    + '</li>';
                    oList.html( html );
                    oList.listview("refresh");
                }
        </script>
    </head>
    <body>
<div data-role="page">
    <div data-role="header" data-position="fixed">
        <a href="#" title="Home" data-theme="b" data-role="button" data-icon="home" data-iconpos="notext">Calendar</a>
        <h1>Schedules</h1>
        <a href="#" title="Log Out" data-theme="b" data-role="button" data-icon="delete" data-iconpos="notext">Logout</a>
    </div>
<div data-role="content">
        <ul id="schedule_listview" data-role="listview" data-inset="true" data-split-theme="b">
            <li>
                <h3>Username</h3>
                <p>Session name</p>
                <div style="text-align: right;">
                    <a href="#" data-role="button" data-mini="true" data-inline="true" data-icon="delete" data-theme="c" data-iconpos="left">Cancel</a>
                    <a href="#" data-role="button" data-mini="true" data-inline="true" data-icon="gear" data-theme="c" data-iconpos="left">Edit</a>
                </div>
                <div class="ui-li-aside">
                    <p><strong>10:00AM</strong></p>
                </div>
            </li>
        </ul>
    </div>
<div data-role="footer" data-position="fixed">
        <div class="ui-grid-b">
            <div class="ui-block-a">
                <a href="#" data-role="button" data-mini="true" data-inline="true" data-icon="star" data-theme="b" data-iconpos="left">Today</a>
            </div>
            <div class="ui-block-b" style="text-align: center;">
                <a href="#" data-role="button" data-mini="true" data-inline="true" data-icon="grid" data-theme="b" data-iconpos="left">Dec 10, 2012</a>
            </div>
            <div class="ui-block-c" style="text-align: right;">
                <a href="#" data-role="button" data-mini="true" data-inline="true" data-icon="gear" data-theme="b" data-iconpos="right">Settings</a>
            </div>
        </div>
    </div>
</div>
</body>
</html>