jQuery Mobile - création dynamique d'éléments de formulaire

Je suis en train de créer une base de données en mode hors connexion web-app ciblées sur les appareils iOS. Je suis en train d'utiliser jQuery Mobile, mais j'ai un problème dans la création de diverses formes.

La forme d'options sont prises à partir d'une requête de base de données, de sorte qu'ils sont insérés dans la page d'après, il a été chargé, de sorte que le "jQuery-Mobilification" ne se produise pas. En prenant un coup d'oeil rapide à la source, il ne semble pas du tout évident pour un appel dans ce, à ce stade, (bien sûr, c'est une version alpha, et je pense que ce serait une assez courantes, donc j'ai l'espoir qu'il viendra). Est-il une sorte de solution de contournement que je peux mettre pour le faire? Je suis particulièrement intéressé par des boutons radio, des cases à cocher et les listes de sélection.

OriginalL'auteur Jon | 2010-10-28

2

C'est déconner sans-papiers interne, mais la suivante est de travailler pour moi:
```
$("#some-div").load("/html/fragment/", 
                    function() { 
                      $(this).find("input").customTextInput();  
                    });
```
Il y a des méthodes équivalentes pour les boutons, cases à cocher, etc.

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

Mise à jour de 1.0Alpha2: Comme on peut l'attendre en jouant avec, à l'intérieur d'une bibliothèque, cela ne fonctionne plus dans la dernière version. Changer customTextInput() à textinput() il corrige un peu, mais le thème n'est pas pleinement appliqué pour une raison quelconque. Nous étions prévenus...

merci, besoin d'un peu de travail supplémentaire avec des listes de sélection, mais qui m'a mis sur la ligne 🙂
Je vais avoir un problème similaire: stackoverflow.com/questions/5249250/...

OriginalL'auteur Tom
12

Mise à JOUR

Beta2 a un create événement. Je vais mettre à jour ma faq lorsque la beta2. Voir http://jquerymobile.com/blog/2011/07/22/jquery-mobile-team-update-week-of-july-18th/

Faq mise à jour: http://jquerymobiledictionary.pl/faq.html

Comme CaffeineFueled proposé - .page() est la façon de faire de JQM de travail avec une partie de HTML

.page() peut être appelée qu'une seule fois pour un élément. Appel sur un élément d'habillage vous ajouter à la page. Il doit tout gérer.

Je vais avoir un problème similaire: stackoverflow.com/questions/5249250/...
Cela a fait le tour, merci! Les instructions sur jquerymobiledictionary.dyndns.org/faq.html sont les plus faciles à suivre.
Est-il un moyen de le faire que si j'ai une requête ajax qui est appelé plusieurs fois et les charges de différents boutons à chaque fois? .page() semble être la seule à travailler une fois.
Vous ne pouvez pas appeler .page() plus d'une fois sur un élément, de sorte que j'ai mis dans la faq - vous besoin d'envelopper un nouveau div autour de votre contenu. Mais dans beta version, il y a un enhance événement - check it out!
cette méthode ne fonctionne plus sur la dernière version de jquery mobile. ce serait bien si ils ont fourni une méthode documentée de style de contenu dynamique....

OriginalL'auteur naugtur
3

Le courant sélectionné réponse est un peu obsolète. Utiliser "actualiser", pas de "page", pour le style de contenu dynamique ajouté (listes ou des formes).

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

via le jQuery Mobile docs, 1.0.4 un

OriginalL'auteur AlexeyMK
2

Après votre appel AJAX de finitions et de vous insérer les éléments de formulaire, essayez de l'appeler:
```
$("#the-page-id").page();
```
Je crois que le jquery-mobile team va être l'ajout d'un .méthode refresh() sur les différents éléments de l'INTERFACE utilisateur pour résoudre ce problème dans l'avenir.

Je souhaite que c'était aussi simple que ça, malheureusement, ça ne nous aide pas du tout 🙁
Je vais avoir un problème similaire: stackoverflow.com/questions/5249250/...

OriginalL'auteur Josh Rickard
1

Ouais le problème est que vous l'avez décrit. La "mobilisation" est déclenché lorsque le document est prêt. Mais depuis votre mode hors connexion requêtes DB sont asynchrones, il se termine en fin de document.prêt de feu. De sorte que le DOM est mis à jour plus tard dans le processus et n'a pas les extra CSS ajouté à tous les divs et les éléments de la liste.

Je pense que vous aurez à changer la source de la téléphonie mobile js pour ne pas s'exécuter sur le document prêt, mais de l'exécuter lorsque vous dites qu'il fonctionne. Ensuite, vous devez appeler cette fonction dans votre base de données de rappel.

Dirait que c'est la seule option pour le moment.

Traditionnellement, j'ai utilisé jqtouch et maintenant sencha. Je n'ai pas beaucoup joué avec jQuery mobile.

ALTERNATIVEMENT, vous pouvez écrire votre code HTML après interrogation de sortir de la base de données avec le nécessaire de styles CSS. Si vous utilisez le plugin Firebug pour Firefox, vous pouvez voir ce que les styles ou classes se sont appliqués lors de la mobilisation des pistes. Vous pouvez simplement écrire votre code HTML à l'aide de ces conventions. Pas idéal, mais cela fonctionne.

Juste pour empêcher quelqu'un de essayez - le à l'aide des événements précoces de travailler avec DOM avant de JQM vient en est douloureux. (c'est avant l'événement ready)
Je vais avoir un problème similaire: stackoverflow.com/questions/5249250/...

OriginalL'auteur Ryan Doom
1

naugtur est droit, vous devez appeler .page() sur n'importe quel élément que vous ajoutez dans les dom, alors qu'il fonctionne parfaitement:
```
var el = $('<input type="text"/>')
el.page();
$('#something').append(el);
```
Je vais avoir un problème similaire: stackoverflow.com/questions/5249250/...

OriginalL'auteur Philip Frank

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 y a actuellement appelé plugin fonctions pour tous les types d'éléments de formulaire (par exemple, curseur, textinput etc.) pour les créer.

OriginalL'auteur CBG

0

Voici un lien vers la doc de cette fonction que Tom a parlé. Vous ne savez pas exactement quand ils ont été ajoutées, mais je sais que je l'utilise et ça marche pour moi!

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

Je vais avoir un problème similaire: stackoverflow.com/questions/5249250/...

OriginalL'auteur Spike

Vous devez vous connecter pour publier un commentaire.