在Ajax调用中使用jquery移动样式显示动态li

时间:2012-03-23 07:31:47

标签: ajax jquery-mobile

我有左侧ul和右侧ul。当我点击左侧li在ajax调用中进行ajax调用时我在右侧ul中添加了动态li。内容即将推出但jquery移动设计缺失。我搜索了一个像添加$("#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>

在某些地方,我发现首先在div中找到ul的id并刷新列表视图

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

我试过这也不行。

在我的页面中,我有以下

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

有什么建议吗?

1 个答案:

答案 0 :(得分:0)

试试这个

$.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"); 
 });