Ajouter du contenu récupéré dynamiquement à un MVC PHP jQuery Mobile à l'objet jQuery

Question

J'ai une application web MVC qui vérifie le contenu de la chaîne de requête à l'aide de PHP et charge la page appropriée en affichant l'en-tête, le contenu et le pied de page (par exemple, ?category=1 charge un CategoryController qui affiche une vue de la catégorie).

J'ai également un fichier custom.js qui ajoute la fonctionnalité jQuery aux éléments du DOM. Comme le contenu dynamique est contrôlé par PHP, la fonctionnalité jQuery ne fonctionne que lorsque la page est chargée en premier. Le fait de parcourir l'application n'actualise pas la page et les éléments nouvellement inclus ne sont donc pas ajoutés à l'objet jQuery.

Des idées sur la manière de contourner ce problème ?

Answer 1

Tout d'abord, ne pas utiliser $(function() o $(document).ready() avec jQuery Mobile, tout simplement parce que jQM n'est pas conçu pour fonctionner de la sorte. Vous devez plutôt utiliser les événements de page mentionnés ici : https://stackoverflow.com/a/14010308/1848600 ou l'événement mobileinit comme ceci :

$(document).on("pageinit", function () {

});

ou mobileinit si vous souhaitez qu'il ne soit exécuté qu'une seule fois lors de l'exécution de l'application :

$(document).on("mobileinit", function () {

});

La raison est décrite dans le lien ci-dessus. Vous pouvez également trouver plus d'informations à ce sujet dans la documentation officielle de jQM : http://jquerymobile.com/test/docs/api/events.html

Maintenant, si vous voulez que jQM restyle votre page, vous devez utiliser .trigger('pagecreate') fonction.

Supposons, par exemple, que vous ayez une page jQM avec l'identifiant index et voici la mise en page générée.

<div data-role="page" id="index">
    <div data-theme="a" data-role="header">
        <h3>
            First Page
        </h3>
        <a href="#second" class="ui-btn-right">Next</a>
    </div>

    <div data-role="content">
        <a href="#" data-role="button" id="test-button">Test button</a>
    </div>

    <div data-theme="a" data-role="footer" data-position="fixed">

    </div>
</div>  

Pour forcer jQM à le styliser, vous devez utiliser quelque chose comme ceci :

$('#index').live('pagebeforeshow',function(e,data){    
    $('#index').trigger('pagecreate');
});

ou si vous voulez l'appliquer à toutes les pages de jQM, utilisez-le comme suit :

$('[data-role="page"]').live('pagebeforeshow',function(e,data){    
    $(this).trigger('pagecreate');
});