Jquery Mobile обрабатывает ajax-запросы

Question

В настоящее время я работаю с Jquery mobile и столкнулся со следующей проблемой:

Я пытаюсь загрузить список через ajax в div, хотя, когда я загружаю список в формате jquery mobile через ajax, он не шаблонируетсяjquery mobile (классы не применяются), как я могу это исправить?

Страница списка (исключая заголовок и т. д., чтобы он был коротким)

<?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 Просмотр страницы

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

    </li>

    <?php endforeach;?>
</ul>

Answer 1

Вам необходимо обновить список. jQuery Mobile предоставляет методы для обновления форматирования в списке с помощью списка («обновить»); команда.

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 2

Вам необходимо обновить данные:

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

Answer 3

вы должны уничтожить и воссоздать страницу. Смотрите эту ссылку

вместо:

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