проблема форматирования данных json jquery.append

Question

Я пытаюсь создать меню для мобильного приложения (используя jQuery Mobile). У меня есть страница .asp, которая запрашивает SQL, чтобы вытащить пункты меню (пока один, представленный ниже json[0].CompanyName). Возвращается как данные JSON. Я хочу добавить значение из SQL в <ul> с идентификатором «mylist». Это работает и добавляет текст внутри json[0].CompanyName, но не имеет форматирования жестко закодированных Item 1 и Item 2 меню. Почему форматирование из CSS работает для двух жестко закодированных пунктов меню, но не для динамического?

  <div data-role="content" data-theme="b">  
     <ul id="mylist" data-role="listview" data-inset="true" data-filter="true" >
     <li><a href="item1.html" >Hard Coded Menu Item 1</a></li>
     <li><a href="item2.html" >Hard Coded Menu Item 2</a></li>
        <script type="text/javascript">
            $(document).ready(function () {
                $.getJSON("getdata.asp", function (json) {
                    // alert(json[0].CompanyName);
                    $('#mylist').append('<li><a href="#">' + json[0].CompanyName + '</a>    </li>');
                });
            });
        </script> 
     </ul>
  </div>

Answer 1

Вам необходимо обновить listview после добавления к нему:

        $(function () {
            $.getJSON("getdata.asp", function (json) {
                $('#mylist').append('<li><a href="#">' + json[0].CompanyName + '</a>    </li>').listview('refresh');
            });
        });

Это скажет jQuery Mobile повторно инициализировать элемент listview, чтобы добавить надлежащие классы CSS в соответствующие элементы..

Документацию можно найти здесь: http://jquerymobile.com/demos/1.0/docs/lists/docs-lists.html (Внизу страницы находится раздел под названием Обновление списков )

Иногда вы сталкиваетесь сВ ситуации, когда вы не уверены, будет ли инициализирована listview, вы можете использовать эту if/then для обхода этой проблемы:

var $myList = $('#myList');
if ($myList.hasClass('ui-listview')) {
    $myList.listview('refresh');
} else {
    $myList.listview();
}