jQuery Mobile - la creación dinámica de elementos de formulario

Question

Estoy creando una base de datos web impulsada aplicación Web en línea dirigido a los dispositivos IOS. Estoy tratando de utilizar jQuery Mobile, pero tengo un problema en la creación de las diversas formas.

Las opciones del 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 el "jQuery-Mobilification" no sucede. Echando un vistazo rápido a través de la fuente, no parece haber ninguna manera obvia para poner en esta en esta etapa (por supuesto que es una versión alpha, y creo que esto sería una petición bastante común, por lo que estoy es esperanzador vendrá). ¿Hay algún tipo de solución que puedo poner para realizar esta acción? Me interesa sobre todo en los botones de radio, casillas de verificación y listas de selección.

Answer 1

Esto es andar por ahí en partes internas sin papeles, pero el siguiente es trabajo para mí:

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

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

Para consultar el método _enchanceControls [sic] en http :. //code.jquery.com/mobile/1.0a1/jquery.mobile-1.0a1.js

Actualización para 1.0Alpha2 : Como se puede esperar cuando se juega un poco con el funcionamiento interno de una biblioteca, esto ya no funciona en la versión más reciente. Cambiando customTextInput() a textinput() lo arregla un poco, pero el tema no se aplica plenamente por alguna razón. Nos avisaron ...

Answer 2

Actualizar

Beta 2 tiene un evento create. Voy a actualizar mi faq cuando la beta 2 se libera. Ver http://jquerymobile.com/blog/ 2011/07/22 / jquery-mobile-equipo-update-semana-de-julio-18a /

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. Llamarlo en un elemento de envoltura se agrega a la página. Se debe manejar todo.

Answer 3

La respuesta seleccionada actualmente está un poco fuera de fecha. Uso 'refresh', no 'página', para peinar el contenido agregado dinámicamente listas (o formas).

  

Si agrega elementos a una vista de lista, se le   tenga que llamar al método Refresh () en   para actualizar los estilos y crear cualquier   listas anidadas que se agregan. por   ejemplo, $('ul').listview('refresh');

jQuery Mobile, 1.0.4a

Answer 4

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

$("#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 5

Si el problema es como usted la describe. La 'movilización' se activa cuando el documento está listo. Pero dado que las consultas de base de datos fuera de línea son asíncronas se termina después de la document.ready se dispara. Por lo que el DOM está actualizado posteriormente en el proceso y no tiene la CSS extra añadido a todos los divs y elementos de la lista.

Creo que tendría que cambiar la fuente de los js móviles no se ejecuten en el documento listo, pero correr cuando usted le dice que se ejecute. Entonces se tendría que llamar a esa función de devolución de llamada en su base de datos.

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

Me Tradicionalmente utilizado jQTouch y ahora sencha. No he jugado mucho con jQuery móvil.

O BIEN - que podría escribir el código HTML después de la consulta fuera de la base de datos con los estilos CSS necesarias en ella. Si utiliza Firebug plugin para Firefox se puede ver qué estilos / clases están siendo aplicadas cuando se ejecuta la movilización. Se podía escribir el código HTML utilizando esos convenios. No es ideal, pero podría funcionar.

Answer 6

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

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

Answer 7

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 plugin de funciones para todo tipo de elementos de formulario (por ejemplo, control deslizante, entrada de texto, etc.) para crearlos.

Answer 8

Aquí hay un enlace a la documentación para esta función que Tom hablaba. No estoy seguro exactamente cuando se agregaron, pero lo estoy usando y funciona para mí!

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