jQuery Mobile - Dynamisch Erstellung von Formularelementen

Question

Ich erstelle einen Web-Datenbank gestützte Offline-Web-App auf iOS-Geräten ausgerichtet. Ich versuche, jQuery Mobile zu verwenden, aber ich habe ein Problem in den verschiedenen Formen zu schaffen.

Die Formularoptionen werden aus einer Datenbankabfrage genommen, so dass sie in die Seite eingefügt werden, nachdem es geladen ist, so dass die „jQuery-Mobilification“ findet nicht statt. Einen kurzen Blick durch die Quelle, scheint es keine offensichtliche Weise in dieser natürlich (in diesem Stadium Anruf zu sein, es ist eine Alpha-Version, und ich denke, das ist ein ziemlich gemeinsamer Antrag wäre, so dass ich zuversichtlich, es bin wird kommen). Gibt es irgendeine Art von Abhilfe, die ich in setzen kann, dies zu tun? Ich interessiere mich besonders für Radiobuttons, Checkboxen und Auswahllisten.

Answer 1

Dies ist in undokumentierten Interna rumgespielt, aber die folgenden arbeitet für mich:

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

Es gibt gleichwertige Verfahren für Schaltflächen, Kontrollkästchen, etc.

Haben Sie einen Blick auf die _enchanceControls [sic] Methode in http :. //code.jquery.com/mobile/1.0a1/jquery.mobile-1.0a1.js

Update für 1.0Alpha2 : Wie erwartet werden kann, wenn sie mit dem Interna einer Bibliothek herum spielen, das funktioniert nicht mehr in der neuesten Version. Ändern customTextInput() zu textinput() Fixes es ein bisschen, aber das Thema nicht vollständig aus irgendeinem Grunde angewandt wird. Wir wurden gewarnt, ...

Answer 2

UPDATE

Beta2 hat ein create Ereignis. Ich werde meine FAQ aktualisieren, wenn die Beta-2 veröffentlicht wird. Siehe http://jquerymobile.com/blog/ 2011/07/22 / jquery-Mobile-Team-update-Woche-of-Juli-18 /

Aktualisiert FAQ: http://jquerymobiledictionary.pl/faq.html

---

Wie CaffeineFueled vorgeschlagen - .page() ist die Art und Weise JQM Arbeit mit irgendeinem Teil von HTML

zu machen

.page() kann nur einmal für ein Element bezeichnet werden. Nennen Sie es auf einem Umschlingungselement Sie auf der Seite hinzufügen. Es soll alles im Griff.

Answer 3

Die aktuelle gewählte Antwort ist etwas veraltet. Verwenden Sie 'Refresh', nicht 'Seite', für das Styling dynamisch hinzugefügt Inhalt (Listen oder Formulare).

  

Wenn Sie Elemente zu einer Listenansicht hinzufügen, werden Sie   müssen die refresh () -Methode rufen   es die Stile zu aktualisieren und erstellen Sie eine beliebige   verschachtelte Listen, die hinzugefügt werden. Zum   Beispiel $('ul').listview('refresh');

über die jQuery Mobile docs, 1.0.4a

Answer 4

Nach der AJAX-Aufruf beendet und Sie legen Sie die Formularelemente versuchen Aufruf:

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

Ich glaube, das Jquery-Mobile-Team wird eine .refresh () -Methode auf den verschiedenen UI-Elementen wird, indem dieses Problem in Zukunft zu lösen.

Answer 5

Ja das Problem ist, wie Sie beschrieben. Die ‚Mobilisierung‘ wird ausgelöst, wenn das Dokument fertig ist. Aber da Ihre Offline-DB-Abfragen asynchron sind es endet, nachdem die document.ready abgefeuert wird. So ist die DOM später im Prozess aktualisiert wird und die zusätzliche CSS zu allen divs und Liste keine Elemente hinzugefügt haben.

Ich glaube, Sie würden die Quelle der mobilen js ändern müssen, um nicht laufen auf Dokument bereit, aber ausgeführt, wenn Sie sagen, es laufen zu lassen. Dann würden Sie diese Funktion in Ihrer Datenbank Rückruf anrufen müssen.

Sieht aus wie das ist die einzige Option im Moment.

Traditionell verwendete ich jQTouch und jetzt Sencha. Ich habe nicht viel mit jQuery Mobile gespielt.

HILFS - Sie könnten Ihre HTML schreiben, nachdem sie aus der Datenbank mit den notwendigen CSS-Stile auf sie abfragt. Wenn Sie Firebug-Plugin für Firefox verwenden, können Sie sehen, welche Arten / Klassen angewandt wird, wenn die Mobilisierung läuft. Sie könnten nur Ihre HTML Verwendung dieser Konventionen schreiben. Nicht ideal, aber funktionieren würde.

Answer 6

naugtur richtig ist, Sie haben .page () aufzurufen, auf ein beliebiges Element, dass Sie die dom hinzufügen, dann klappt es schön:

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

Answer 7

Das ist für mich gearbeitet (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();

Es liegt noch so genannte Plugin-Funktionen für alle Arten von Formelementen (z Schieber, TextInput- usw.), um sie zu erstellen.

Answer 8

Hier ist ein Link auf die Dokumentation für diese Funktion, dass Tom darüber gesprochen. Nicht sicher, wann genau sie wurden hinzugefügt, aber ich verwende es und es funktioniert für mich!

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