javascript - demos - jquery mobile examples

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

Question

Estoy creando una aplicación web fuera de línea basada en una base de datos web dirigida a dispositivos iOS. Estoy tratando de usar jQuery Mobile, pero tengo un problema al crear varias 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 no se produce la "Movilización de jQuery". Mirando a través de la fuente, no parece haber ninguna forma obvia de llamar a esto en esta etapa (por supuesto, es una versión alfa, y creo que esta sería una solicitud bastante común, así que espero que sea así) vendrá). ¿Hay algún tipo de solución que pueda poner para hacer esto? Me interesan especialmente los botones de opción, las casillas de verificación y las listas de selección.

Answer 1

Aquí hay un enlace a los documentos para esta característica de la que Tom habló. No estoy seguro de cuándo se agregaron, ¡pero lo estoy usando y funciona para mí!

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

Answer 2

Después de que finalice su llamada AJAX e inserte los elementos del formulario, intente llamar:

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

Creo que el equipo jquery-mobile agregará un método .refresh () en los diversos elementos de la interfaz de usuario para resolver este problema en el futuro.

Answer 3

Esto está perdiendo el tiempo en las partes internas indocumentadas, pero lo siguiente está funcionando para mí:

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

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

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

Actualización para 1.0Alpha2 : Como puede esperarse al jugar con las partes internas de una biblioteca, esto ya no funciona en la última versión. Cambiar customTextInput() a textinput() corrige un poco, pero el tema no se aplica completamente por alguna razón. Fuimos advertidos ...

Answer 4

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();

Actualmente existen las llamadas funciones de complemento para todo tipo de elementos de formulario (por ejemplo, control deslizante, entrada de texto, etc.) para crearlos.

Answer 5

La respuesta actual seleccionada está un poco desactualizada. Utilice ''actualizar'', no ''página'', para aplicar estilo al contenido agregado dinámicamente (listas o formularios).

Si agrega elementos a una vista de lista, deberá llamar al método refresh () para actualizar los estilos y crear las listas anidadas que se agreguen. Por ejemplo, $(''ul'').listview(''refresh'');

a través de los documentos de jQuery Mobile, 1.0.4a

Answer 6

Sí, el problema es como lo describiste. La ''movilización'' se dispara cuando el documento está listo. Pero como las consultas de la base de datos sin conexión son asíncronas, finaliza después de que se haya activado 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 del js móvil para que no se ejecute en el documento listo, pero ejecutarlo cuando le digas que se ejecute. Entonces tendrías que llamar a esa función en la devolución de llamada de tu base de datos.

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

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

ALTERNATIVAMENTE, usted podría escribir su HTML después de consultarlo en la base de datos con los estilos CSS necesarios. Si usa el complemento Firebug para Firefox, puede ver qué estilos / clases se aplican cuando se ejecuta la movilización. Usted podría simplemente escribir su HTML utilizando esas convenciones. No ideal, pero funcionaría.

Answer 7

naugtur tiene razón, tienes que llamar a .page () en cualquier elemento que agregues al dom, entonces funciona bien:

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

Answer 8

ACTUALIZAR

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

Preguntas frecuentes actualizadas: http://jquerymobiledictionary.pl/faq.html

Como CaffeineFueled propuso - .page() es la manera de hacer que JQM funcione con cualquier parte de HTML

.page() se puede llamar una vez para un elemento. Llámelo en un elemento de envoltura que agregue a la página. Debería manejar todo.