Jquery Mobile处理ajax请求

Question

Currently I am working with Jquery mobile and encountered the following problem:

I am trying to load an list through ajax in a div though when I load a jquery mobile formatted list through ajax its not being templated by jquery mobile(the classes are not being applied) how can i fix this ?

List page ( excluded the header etc to keep it short)

<?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>

Ajax req view page

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

    </li>

    <?php endforeach;?>
</ul>

Answer 1

you have to destroy and recreate the page. See this link

instead of:

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

you should do:

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

Answer 2

You need to refresh the list. jQuery Mobile provides a methods to refresh the formatting on the list with the listview('refresh'); command.

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');

Answer 3

You need to refresh the data:

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