jQuery Mobile - créer dynamiquement des éléments de formulaire

Question

Je crée une application web hors ligne gérée par la base de données-web destiné aux appareils iOS. Je suis en train d'utiliser jQuery Mobile, mais j'ai un problème dans la création des diverses formes.

Les options de formulaire sont prises à partir d'une requête de base de données, de sorte qu'ils sont insérés dans la page après l'avoir chargé, de sorte que le « jQuery-Mobilification » ne se produit pas. Jeter un oeil rapide à travers la source, il ne semble pas y avoir de façon évidente à l'appel dans ce à ce stade (bien sûr, il est une version alpha, et je pense que ce serait une demande raisonnablement commune, donc je suis plein d'espoir qu'il viendra). Y at-il une sorte de solution que je peux mettre pour le faire? Je suis particulièrement intéressé par les boutons radio, cases à cocher et les listes de sélection.

Answer 1

est de déconner dans les internes sans papiers, mais ce qui suit fonctionne pour moi:

$("#some-div").load("/html/fragment/", 
                    function() { 
                      $(this).find("input").customTextInput();  
                    });

Il existe des méthodes équivalentes pour les boutons, cases à cocher, etc.

Jetez un oeil à la méthode _enchanceControls [sic] dans http :. //code.jquery.com/mobile/1.0a1/jquery.mobile-1.0a1.js

Mise à jour pour 1.0Alpha2 : Comme prévu lors de jouer avec les entrailles d'une bibliothèque, cela ne fonctionne plus dans la dernière version. Changement customTextInput() des corrections de textinput() un peu, mais le thème est pas pleinement appliqué pour une raison quelconque. Nous avons été prévenus ...

Answer 2

UPDATE

Beta2 a un événement create. Je vais mettre à jour mon faq lorsque le beta2 est libéré. Voir http://jquerymobile.com/blog/ 2011/07/22 / jquery-mobile-team-update-semaine-du-juillet-18 /

Mise à jour FAQ: http://jquerymobiledictionary.pl/faq.html

---

CaffeineFueled proposé - .page() est le moyen de faire fonctionner JQM avec une partie de HTML

.page() peut être appelée une seule fois pour un élément. Appelez sur un élément d'emballage que vous ajoutez à la page. Il doit gérer tout.

Answer 3

La réponse actuelle choisie est légèrement obsolète. Utilisez 'refresh', pas 'page', pour le style de contenu dynamique ajouté (listes ou formulaires).

  

Si vous ajoutez des éléments à un ListView, vous aurez   besoin d'appeler la méthode refresh () sur   à mettre à jour les styles et créer une   listes imbriquées qui sont ajoutés. Pour   par exemple, $('ul').listview('refresh');

via les jQuery Mobile documents, 1.0.4a

Answer 4

Après la fin de votre appel AJAX et vous insérez les éléments de formulaire essayer d'appeler:

$("#the-page-id").page();

Je crois que l'équipe jquery mobile ajoutera une méthode .Refresh () sur les différents éléments de l'interface utilisateur pour résoudre ce problème à l'avenir.

Answer 5

Oui la question est que vous avez décrit. La « mobilisation » est déclenché lorsque le document est prêt. Mais puisque vos requêtes DB hors ligne sont asynchrones, il se termine après le document.ready est tiré. Ainsi, le DOM est mis à jour plus tard dans le processus et ne pas le CSS supplémentaire ajouté à tous les divs et éléments de la liste.

Je pense que vous auriez à changer la source des js mobiles de ne pas courir sur le document prêt, mais exécuter lorsque vous dites à courir. Ensuite, vous devrez appeler cette fonction dans votre rappel de base de données.

On dirait que la seule option pour le moment.

Traditionnellement utilisé je jQTouch et maintenant sencha. Je ne l'ai pas beaucoup joué avec jQuery mobile.

ALTERNATIVE - vous pouvez écrire votre code HTML après avoir interrogé hors de la base de données avec les styles CSS nécessaires à ce sujet. Si vous utilisez le plugin Firebug pour Firefox, vous pouvez voir ce que les styles / classes s'appliqués lors de l'exécution de mobilisation. Vous pouvez tout simplement écrire votre code HTML en utilisant ces conventions. Pas idéal, mais fonctionnerait.

Answer 6

naugtur est juste, vous devez appeler .page () sur tout élément que vous ajoutez au dom, puis il fonctionne bien:

var el = $('<input type="text"/>')
el.page();
$('#something').append(el);

Answer 7

Cela a fonctionné pour moi (jquerymobile1.7.0):

$('#formular').append('<div data-role="fieldcontain" class="ui-hide-label">' +
'<label for="name" class="ui-hidden-accessible">Name:</label>' +
'<input type="text" name="name" size="25" id="name" placeholder="Name"/>' +
'</div>');  
$('#name').textinput();

Il n'y a actuellement que l'on appelle des fonctions plug-in pour tous les types d'éléments de forme (par exemple curseur, textinput etc.) pour les créer.

Answer 8

Voici un lien vers la documentation pour cette fonction que Tom a parlé. Je ne sais pas exactement quand ils ont été ajoutés, mais je l'utilise et il fonctionne pour moi!

http://jquerymobile.com/test/docs/forms/plugin- eventsmethods.html