Jquery Mobile et la fonction .load

Question

J'essaie de transférer mon site web dans jquery mobile et je rencontre une erreur lors de l'utilisation :

$('#information').load('getRegister.php'  , function() {
                    $('#preloader').hide(); 
                });

Cette fonction est appelée pour charger le code html dynamiquement dans la page sans rafraîchissement, mais le code qui apparaît ne correspond pas au css du code déjà présent sur le site. Vous pouvez voir cela dans la capture d'écran ci-dessous :

Je suis assez perplexe quant à la raison pour laquelle les boutons et les champs de texte ne prennent pas le style du formulaire déjà chargé dans la page. Le code que le .load appelle est ce fichier php :

<?php
  require ('myConnectDB.inc.php');     

// echo registration form

echo "

<p class=\"center\"> &nbsp;</p>

<form name=\"input2\" action=\"\" onsubmit =  \" return register()\" method=\"post\"  data-ajax=\"false\">
                    <p class=\"center\"> User Name: 
                    <input type=\"text\" name=\"user\"  id=\"userRegister\" /></p>
                    <p class=\"center\"> &nbsp;</p>
                    <p class=\"center\"> Email: 
                    <input type=\"text\" name=\"user\"  id=\"emailRegister\" /></p>
                    <p class=\"center\"> &nbsp;</p>
                    <p class=\"center\"> Password: <input type=\"password\" name=\"password\" id=\"passwordRegister1\" /></p> 
                    <p class=\"center\"> &nbsp;</p>
                    <p class=\"center\"> Re-Type Password: <input type=\"password\" name=\"password\" id=\"passwordRegister2\" /></p> 
                    <p class=\"center\"> &nbsp;</p>
                    <p class=\"center\"> 
                    <input type=\"submit\"  class=\"  button blue\" name = \"login\" value=\"Register\" />
                    </p>
            </form>";   
?>

Answer 1

Vous devez déclencher le create sur le contenu nouvellement ajouté.

De la Docs

Si vous devez générer un nouveau balisage côté client ou charger du contenu par l'intermédiaire de l'application AJAX et l'injecter dans une page, vous pouvez déclencher l'événement create pour gérer l'auto-initialisation de tous les plugins contenus dans le nouveau le nouveau balisage. Cet événement peut être déclenché sur n'importe quel élément (même la page div elle-même), ce qui vous évite d'avoir à initialiser manuellement chaque plugin (voir ci-dessous).

Par exemple, si un bloc de balises HTML (disons un formulaire de connexion) a été chargé chargé par Ajax, déclenchez l'événement create pour transformer automatiquement tous les widgets qu'il contient (entrées

et les boutons dans ce cas) dans les versions améliorées. Le code pour ce scénario serait le suivant :

$( ...new markup that contains widgets... ).appendTo( ".ui-page" ).trigger( "create" );

Dans votre cas, vous voudrez probablement faire quelque chose comme ce qui suit

$('#information').load('getRegister.php'  , function() {
        $('#preloader').hide(); 
        $('#information').trigger("create");
 });

Answer 2

C'est probablement parce que votre nouveau html ne fournit pas les mêmes attributs de classe que le formulaire original ou que la structure div imbriquée utilisée par la feuille de style originale.

Regardez l'attribut class des champs de texte originaux et faites-les correspondre. ou regardez la feuille de style pour voir comment mettre en page votre html.