jQuery Mobile的處理Ajax請求

目前我與jQuery Mobile的工作，遇到以下問題：jQuery Mobile的處理Ajax請求

我試圖在一個div雖然當我加載通過Ajax一個jQuery Mobile的格式化列表它不是通過Ajax來加載列表由jquery移動模板（類沒有被應用）我怎麼能解決這個問題？

列表頁面（不包括標題等，以保持短）

<?php 
    $technicalListUrl = Helper::url("/technical_work_orders/overview/"); 
    $visualListUrl = Helper::url("/visual_work_orders/overview/"); 

?> 

<script type="text/javascript"> 

$(document).ready(function() {    
    $("#visualIcon").click(function() { 
     //load visual work orders 
     $('#workOrderList').load('<?php echo $visualListUrl?>'); 
    }); 

    $("#technicalIcon").click(function() { 
     //load technical work orders 
     $('#workOrderList').load('<?php echo $technicalListUrl ?>'); 

    }); 
}); 

</script> 




<div data-role="navbar" class="glyphish" data-iconpos="top" > 
<ul> 
     <li ><a href="#" id="visualIcon" data-icon="custom">Optisch</a></li> 
     <li><a href="#" id="technicalIcon" data-icon="custom">Technisch</a></li> 
</ul> 
</div> 

<div id="workOrderList" class="workOrders"> 

</div>

阿賈克斯REQ查看頁

<ul data-role="listview"> 
    <?php foreach($workOrders as $workOrder):?> 
    <li> 
     <h3><?php echo $workOrder['VisualWorkOrder']['title']?></h3> 

    </li> 

    <?php endforeach;?> 
</ul>

來源

2011-11-15 user1035654

你必須摧毀並重新創建頁面。見this鏈接

代替：

$('.linkDiv').click(function(event) {   
    $('#contentDiv').load($(this).attr('href')); 
    return false; 
});

你應該做的：

$('.linkDiv').click(function(event) { 
    $.get($(this).attr('href'), function(data) { 
     $('#contentDiv').html(data).page(); 
     $("div[data-role=page]").page("destroy").page(); 
    }); 
    return false; 
});

來源

2011-11-15 15:16:41

由於這看似恰到好處，雖然它給我留下了一個問題。我將內容加載到（「#workOrderList」）中的div得到兩個類ui-page ui-body-c我不希望這發生，因爲它隱藏了內容。我怎樣才能防止這種情況發生？ – user1035654

作爲快速修復，我現在只需在注入div後從div中刪除這些類。 ' 功能loadAjax（ID，URL） { $獲得（URL，功能（數據）{$ （ID）。html的（數據）。第（）; $（ID）.removeClass（'UI-頁面ui-body-c'）; $（「.ui-page-active」）.page（「destroy」）.page（）; }）; }' – user1035654

您需要刷新列表。 jQuery Mobile提供了一種使用listview（'refresh'）刷新列表格式的方法;命令。

var list= $(".ul-list"); 

$(data.workorders).each(function (index) { 
    var url = '/something/' + this.ID; 
    var line = '<li><a href="' + url + '">' + this.Name + '</a></li>'; 
    list.append(line); 
    $.mobile.loadPage(url, { showLoadMsg: false }); 
}); 

// update the jquery view 
list.listview('refresh');

來源

2011-11-15 15:18:50 uadrive

你需要刷新數據：

$('#workOrderList ul').listview('refresh'); 
    $('.ui-page-active').page("destroy").page();

來源

2011-11-15 15:21:08 SERPRO

jQuery Mobile的處理Ajax請求

回答

相關問題