Показать динамический li с мобильным стилем jquery в Ajax Call

Question

У меня есть левая сторона ul и правая сторона ul.Когда я нажимаю левую сторону li, делая ajax-вызов в этом ajax-вызове, я добавляю динамический li в правую сторону ul.Контент шел, но дизайн мобильного jquery отсутствовал.Я искал решение, такое как add $("#ul_id").listview('refresh'), но оно не работает для меня.

$.post('/app/Unit/unit_detail', {item_id : task_id},
  function(data){
    $('#right_ul').html(data);
    $("#right_ul").listview('refresh');
});

В моем unit_detail.erb у меня есть следующий код

<li class="showDetails" style="list-style:none;" data-theme="b">
  <a href="#">
    <div class="ui-grid-b">
      <div class="ui-block-a"><div><%= unit_detail.name %></div></div>
      <div class="ui-block-b"><div><%= unit_detail.description %> </div></div>
      <div class="ui-block-c"><div><%= unit_detail.accessories %> </div></div>
    </div> 
  </a>
</li>

В каком-то местесначала я нашел идентификатор ul в div и обновил представление списка

$("#rigth_pane_content_footer").find("#right_ul").listview('refresh');

Я пробовал, что тоже не работает.

На моей странице у меня есть следующее

<div id="rigth_pane_content_footer">
  <ul data-role="listview" id="right_ul">     
  </ul>
</div>

Есть предложения?

Answer 1

попробуйте

$.post('/app/Unit/unit_detail', {item_id : task_id},
 function(data){
   var container = document.getElementById('right_ul');
   var new_element = document.createElement('li');
   new_element.innerHTML =data;
   container.appendChild(new_element);
   $(container).listview("refresh"); 
 });