jQuery Mobile - dinamicamente la creazione di elementi del modulo

Question

Sto creando una fitta linea web-app web-base di dati destinati a dispositivi iOS. Sto cercando di utilizzare jQuery Mobile, ma ho un problema nella creazione di varie forme.

Le opzioni di forma sono prese da una query di database, in modo che siano inseriti nella pagina dopo che ha caricato, in modo che il "jQuery-Mobilification" non accade. Facendo una rapida occhiata attraverso la fonte, non sembra essere un modo ovvio per rimettere in questa in questa fase (ovviamente si tratta di una versione alpha, e penso che questo sarebbe una richiesta abbastanza comune, quindi sono fiducioso che verrà). C'è una sorta di soluzione posso mettere per effettuare questa operazione? Sono particolarmente interessato a pulsanti di opzione, caselle di controllo e selezionare elenchi.

Answer 1

Questa è nei guai in interni senza documenti, ma il seguente sta lavorando per me:

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

Ci sono metodi equivalenti per i pulsanti, caselle di controllo, ecc.

Date un'occhiata al metodo _enchanceControls [sic] in http :. //code.jquery.com/mobile/1.0a1/jquery.mobile-1.0a1.js

Aggiornamento per 1.0Alpha2 : Come ci si può aspettare quando si gioca in giro con la struttura interna di una biblioteca, questo non funziona più nella sua ultima versione. Cambiare customTextInput() alle correzioni textinput() un po ', ma il tema non è completamente applicato per qualche motivo. Siamo stati avvertiti ...

Answer 2

Aggiorna

Beta2 ha un evento create. Voglio aggiornare il mio faq quando la beta2 viene rilasciato. Vedere http://jquerymobile.com/blog/ 2011/07/22 / jquery-mobile-team-update-settimana-di-luglio-18 /

faq Aggiornato: http://jquerymobiledictionary.pl/faq.html

---

Come CaffeineFueled proposto - .page() è il modo per rendere il lavoro jQm con qualsiasi parte di HTML

.page() può essere chiamato solo una volta per un elemento. Chiamatela su un elemento di avvolgimento si aggiunge alla pagina. Dovrebbe gestire tutto.

Answer 3

L'attuale risposta selezionata è leggermente fuori moda. Usa 'Aggiorna', non e 'pagina', per lo styling contenuti aggiunti dinamicamente (liste o le forme).

  

Se si aggiungono elementi a un controllo ListView, ti   bisogno di chiamare il metodo di aggiornamento () su   per aggiornare gli stili e crea alcun   liste nidificate che vengono aggiunti. Per   esempio, $('ul').listview('refresh');

jQuery Mobile, 1.0.4a

Answer 4

Dopo le vostre finiture delle chiamate AJAX e si inserisce l'elementi del modulo provare a chiamare:

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

Credo che la squadra jquery-mobile sarà l'aggiunta di un metodo refresh () sui vari elementi dell'interfaccia utente per risolvere questo problema in futuro.

Answer 5

Sì il problema è come hai descritto. Il 'mobilitazione' viene attivato quando il documento è pronto. Ma dal momento che le query DB offline sono asincrone si conclude dopo il document.ready è sparato. Così il DOM è aggiornato in seguito nel processo e non ha l'extra CSS aggiunto a tutti gli elementi div e della lista.

Penso che si dovrebbe cambiare la fonte dei js di telefonia mobile per non correre il documento pronto, ma eseguito quando gli si dice di correre. Poi si sarebbe dovuto chiamare quella funzione di callback nel vostro database.

appare come che è l'unica opzione al momento.

Tradizionalmente ho usato jQTouch e ora Sencha. Non ho giocato molto con jQuery Mobile.

IN ALTERNATIVA - si potrebbe scrivere il codice HTML dopo l'interrogazione di fuori della base di dati con gli stili CSS necessarie esso. Se si utilizza Firebug plug-in per Firefox è possibile vedere ciò che gli stili / classi sono sempre applicate quando le piste di mobilitazione. Si può solo scrivere il codice HTML utilizzando queste convenzioni. Non è l'ideale, ma potrebbe funzionare.

Answer 6

naugtur è giusto, si deve chiamare .pagina () su ogni elemento che si aggiunge al DOM, poi va a finire bene:

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

Answer 7

Questo ha funzionato per me (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();

Ci sono attualmente i cosiddetti plug funzioni per tutti i tipi di elementi di forma (ad es cursore, textinput ecc) per creare loro.

Answer 8

Ecco un link per la documentazione per questa funzione che Tom ha parlato. Non so esattamente quando sono stati aggiunti, ma lo sto usando e funziona per me!

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