jQuery Mobile - Creación dinámica de elementos de formulario

Question

Estoy creando una aplicación web sin conexión dirigida a bases de datos web dirigida a dispositivos iOS. Intento usar jQuery Mobile, pero tengo un problema al crear las diversas formas.

Las opciones de formulario se toman de una consulta de base de datos, por lo que se insertan en la página después de que se haya cargado, por lo que la "jQuery-Mobilification" no ocurre. Echando un vistazo rápido a la fuente, no parece haber ninguna manera obvia de invocar esto en esta etapa (por supuesto, es una versión alfa, y creo que esta sería una solicitud bastante común, así que tengo la esperanza de que vendrá). ¿Hay algún tipo de solución alternativa que pueda implementar para hacer esto? Estoy particularmente interesado en botones de radio, casillas de verificación y listas de selección.

Answer 1

Esto es jugar un poco en la parte interna indocumentados, pero el siguiente es trabajo para mí:

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

Hay métodos equivalentes para los botones, casillas de verificación, etc.

Tener un vistazo a la _enchanceControls [sic] método en http://code.jquery.com/mobile/1.0a1/jquery.mobile-1.0a1.js.

Actualización para 1.0Alpha2: Como se puede esperar al jugar con las partes internas de una biblioteca, esto ya no funciona en la última versión. Cambiar customTextInput() a textinput() lo soluciona un poco, pero el tema no se aplica por completo por algún motivo. Nos advirtieron ...

Answer 2

Sí, el problema es el que describió. La 'movilización' se activa cuando el documento está listo. Pero dado que sus consultas de bases de datos fuera de línea son asincrónicas, finaliza después de que se haya disparado el documento. Por lo tanto, el DOM se actualiza más adelante en el proceso y no tiene el CSS adicional agregado a todos los divs y elementos de la lista.

Creo que tendrías que cambiar la fuente de la js móvil para que no se ejecute en el documento listo pero se ejecute cuando le digas que se ejecute. Entonces tendría que llamar a esa función en la devolución de llamada de la base de datos.

Parece que es la única opción en este momento.

Tradicionalmente utilicé jqtouch y ahora sencha. No he jugado mucho con jQuery mobile.

ALTERNATIVAMENTE - podría escribir su HTML después de consultarlo fuera de la base de datos con los estilos de CSS necesarios. Si usas el complemento Firebug para Firefox, puedes ver qué estilos/clases se aplican cuando se ejecuta la movilización. Simplemente puede escribir su HTML usando esas convenciones. No es ideal, pero funcionaría.

Answer 3

Después de sus acabados llamada AJAX e inserta los elementos del formulario intente llamar:

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

Creo que el equipo de jQuery-Mobile será la adición de un método .Refresh() en los diversos elementos de interfaz de usuario para resolver este problema en el futuro.

Answer 4

ACTUALIZACIÓN

beta 2 tiene un evento create. Actualizaré mis preguntas frecuentes cuando se publique la beta2.Ver http://jquerymobile.com/blog/2011/07/22/jquery-mobile-team-update-week-of-july-18th/

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

---

Como CaffeineFueled propuso - .page() es la manera de hacer el trabajo JQM con cualquier parte del HTML

.page() puede ser llamado una sola vez para un elemento. Llámalo en un elemento de envoltura que agregues a la página. Debería manejar todo.

Answer 5

naugtur es correcto, usted tiene que llamar .página() en cualquier elemento que se agrega a la dom, entonces se resuelve agradable:

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

Answer 6

Aquí hay un enlace a la documentación para esta función que Tom hablado de. No estoy seguro exactamente cuando fueron agregados, pero lo estoy usando y ¡me funciona!

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

Answer 7

La respuesta seleccionada actualmente está un poco fuera de fecha. Use 'actualizar', no 'página', para diseñar el contenido agregado dinámicamente (listas o formularios).

Si agrega elementos a una vista de lista, podrás necesidad de llamar al método de actualización() en para actualizar los estilos y crear ningún listas anidadas que se agregan. Para ejemplo, $('ul').listview('refresh');

a través de la jQuery Mobile docs, 1.0.4a

Answer 8

Esto funcionó para mí (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(); 

Existen los llamados actualmente funciones de plugin para todo tipo de elementos de formulario (por ejemplo, control deslizante, textinput etc.) para crearlos.