Стили ListView jQueryMobile потеряли обновление своего содержимого - PullRequest
0 голосов
/ 24 ноября 2011

Разработка для Android с использованием PhoneGap Я динамически загружаю компонент ListView с данными, хранящимися в локальной базе данных.Когда я сохраняю информацию о новых настройках и делаю вид, что получаю все сохраненные настройки, ListView отображает все правильно, но теряет стили jQueryMobile.

Это соответствующая часть моего HTML:

<div data-role="page" data-theme="b" id="pageIndex">

    <div data-role="content" id="cntMain">
        New settings attribute
        <div id="nameDiv" data-role="fieldcontain">
            <label for="name" data-inline="true">Name</label>
            <input id="name" type="text"></input>
        </div>
        <div id="valueDiv" data-role="fieldcontain">
            <label for="value" data-inline="true">Value</label>
            <input id="value" type="text" ></input>
        </div>
        <a href="#" onclick="saveNewAttribute();" data-role="button">Save</a>
    </div> <!-- cntMain -->

    <div data-role="content" id="cntShow">
        Settings stored
        <ul id="settingsList" data-role="listview" data-filter="true" data-theme="b"></ul>
    </div> <!-- cntShow -->

</div>

И вызванная функция js:

function saveNewAttribute() {
    name = $('#name').val();
    value= $('#value').val();

    try {
        ... // Validations, saving new attribute,...

        // Get settings information (executeDBQuery is just a shortcut function for performing the query)
        executeDBQuery('SELECT * FROM SETTINGS', function(tx, results) {
            var len = results.rows.length;
            console.info('readed ' + len + ' rows');
            var html = '';
            for (var i=0; i<len; i++){
                var row = results.rows.item(i);
                html += '<li data-theme="b"><a href="#" onclick="editAttribute(' + row.id + ')" data-transition="slide">' +
                        '<h3>' + row.name + '</h3>' + 
                        '<p><strong>' + row.value + '</strong></p></a></li>';
            }
            console.info('Generated html=' + html);
            $('#settingsList').html(html);
        });
    } catch (e) {
        alert('Error: ' + e.message);
    }

    $('#cntMain').hide();
    $('#cntShow').show();
}

Кто-нибудь знает, как я могу обновить эти стили jQueryMobile?Или, может быть, есть другой способ динамической загрузки ListView?

Заранее спасибо.

1 Ответ

1 голос
/ 25 ноября 2011

Я нашел решение, если кому-то интересно.Напишите $('#settingsList').html(html).listview('refresh'); вместо $('#settingsList').html(html);.

...