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