Jquery Mobile список не имеет форматирования

Question

Я пытаюсь создать динамический список из данных, которые извлекаются из баз данных MYSQL на моей 2-й странице моего сайта, и по какой-то причине все данные, которые я генерирую и помещаю в HTML 'li', не берутна любые мобильные эффекты jquery.Я использую новую бета-версию.Спасибо за вашу помощь!

Вот мой код:

---

//move to second page from intial post
var newpage = function(){

    $.mobile.changePage('#page2');  

}


$("#page2").live("pagebeforeshow",function(){

//dynamically creating the div tag to hold all <li> elements
    $('<div id = "listHolder"></div>').appendTo("#here");

    var restaurant = JSON.parse(localStorage.getItem('restaurant'));
    var dataString2 = 'restaurant=' + restaurant;                                               

    //php call to get data from the database
    $.post("getResults.php", dataString2, callback);                                                            


});

//remove the div tag when the page disappears
$("#page2").live("pagehide", function(event, ui) {
        $("#listHolder").remove();
    });


//function to call from the php request
var callback = function(json){

    var dataList = JSON.parse(json);

    var list = "";

    //building the list
    for (x = 0; x < dataList.length; x++){
        list += "<li>" + dataList[x].PartySize + "<span class='ui-li-aside'>" + dataList[x].Quote + "</span></li>";
    }


    document.getElementById('listHolder').innerHTML = list;
    document.getElementById('restaurant').innerHTML = dataList[0].Restaurant;
}                   



<div data-role="page" data-theme="a" id="page2">

    <div data-role="header" data-theme="b">
        <center><h2><div id="restaurant"></div></h2></center>

    </div>
    <div data-role='content'>

        <ul data-role='listview' id = "here" data-inset='true' data-theme='c'><li data-role='list-divider'>Party<span class='ui-li-aside'>Mintues til Sat</span></li>


        </ul>

    </div>


</div>                                           

Answer 1

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

Answer 2

Попробуйте вызвать .listview () для элемента ul после вставки новых тегов li.

$('#here').listview(); //at the end of your append'ing

Также не могли бы вы просто .append () каждый тег li на ul вместо динамически добавлять промежуточный тег div?

Answer 3

мне кажется, что вы устанавливаете внутренний html <div> для набора <li> элементов, что может вызвать некоторые проблемы! они должны быть внутри <ul> или <ol>. Вы не должны иметь <div> внутри <ul>!

если вы хотите заменить все в li, я бы вынул

$('<div id = "listHolder"></div>').appendTo("#here");

и изменить: document.getElementById('listHolder').innerHTML = list; на document.getElementById('here').innerHtml(list);

Если вы просто хотите добавить html в list в конец списка, сделайте следующее:

`$('#here').append($(list));`  

вместо

document.getElementById('listHolder').innerHTML = list;

Answer 4

Попробуйте добавить .page()

Может быть, здесь:

document.getElementById('restaurant').innerHTML = dataList[0].Restaurant;
$("#page2").page();