Jquery manutention mobile demande ajax

Je travaille actuellement avec le mobile Jquery et rencontré le problème suivant:Jquery manutention mobile demande ajax

Je suis en train de charger une liste par ajax dans une div mais quand je charge une liste formatée mobile jquery par ajax sa non étant modelé par jquery mobile (les classes ne sont pas appliquées) comment puis-je résoudre ce problème?

page Liste (exclus du etc en-tête pour le garder court)

<?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 Ajax voir la page

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

    </li> 

    <?php endforeach;?> 
</ul>

Source

2011-11-15 user1035654

vous devez détruire et recréer la page. Voir this lien

au lieu de:

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

vous devez faire:

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

Source

2011-11-15 15:16:41

Merci cela semble fonctionner tout simplement parfait, mais il me laisse avec un problème. Le div où je charge le contenu dans ("#workOrderList") obtient deux classes ui-page ui-body-c Je ne veux pas que cela se produise car il cache le contenu. Comment puis-je empêcher cela? – user1035654

Comme solution rapide je supprime actuellement ces classes de la div après l'injection de la div. ' fonction loadAjax (id, url) { .get $ (URL, la fonction (données) { $ (id) .html (données) .page(); $ (id) .removeClass ('UI- page ui-body-c '); $ (".ui-page-active") .page ("détruire") .page(); }); } ' – user1035654

Vous devez actualiser la liste. jQuery Mobile fournit des méthodes pour actualiser la mise en forme de la liste avec la liste ('refresh'); commander.

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

Source

2011-11-15 15:18:50 uadrive

Vous devez actualiser les données:

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

Source

2011-11-15 15:21:08 SERPRO

Jquery manutention mobile demande ajax

Répondre

Questions connexes