Configuración del texto del campo de entrada de Jquery Mobile

Question

Tengo problemas para configurar el texto de la pantalla de una entrada de texto de jQuery Mobile. Lo que sigue es mi código

$('#editPartyName').textinput(); 
$('#editPartyName').val(party.name); 

El comportamiento es muy raro, la primera vez que las pantallas modales, el cuadro de entrada de texto está en un referente (jQuery Mobile plugin de diálogo sencillo), el texto está en el campo de entrada en el modal bien. Sin embargo, la segunda vez que se muestre el modal, el texto visual en la entrada desaparecerá. Sin embargo, cuando compruebo el valor del elemento, alerta ($ ('# editPartyName) .val()); El valor está ahí y es correcto. El texto simplemente no se mostrará en el elemento. Estoy usando JQM Beta 1. También he intentado pegar $ ('# editPartyName'). Textinput() después de la declaración val().

¿Alguien tiene alguna sugerencia? ¡Gracias!

Answer 1

Para crear el estilo de entrada de texto de jQuery Mobile, utilice .textinput() y para actualizar la vista de una entrada de texto de jQuery Mobile existente, utilice .textinput("refresh"). Por lo tanto, en las siguientes llamadas debe usar el método .textinput("refresh") y en una entrada de texto no inicializada debe usar .textinput().

Algo así como:

$('#editPartyName').val(party.name).textinput('refresh'); 

Mi experiencia es con las entradas de selección, pero yo creo que es la misma para las entradas de texto, esto es lo que hago para selecciona para actualizar la vista:

$("select#foo").selectmenu("refresh"); 

Este ejemplo es de los documentos: http://jquerymobile.com/demos/1.0b1/docs/forms/forms-selects.html (parte inferior de la página)

Actualización

No debería ser necesario hacer otra cosa que no sea cambiar el valor del elemento de entrada:

$('#editPartyName').val(party.name) 

Aquí es una demo usando jQuery Mobile 1.1.0: http://jsfiddle.net/VbAKL/

Y aquí es una demostración usando jQuery Mobile 1.0B1: http://jsfiddle.net/VbAKL/1/

Es muy probable que se cree este problema porque está seleccionando por ID y puede haber varias instancias de una ID en el DOM a la vez. Los sitios de jQuery Mobile pueden tener varias "pseudo-páginas" en el DOM a la vez, y si tiene un elemento en cada página con el ID de #header, cuando intente ejecutar una selección para #header, solo se devolverá la primera instancia. Por lo tanto, su llamada a la función $('...').val(...) puede estar funcionando, pero no en el elemento correcto.

Respuesta corta: asegúrese de que sus identificaciones sean únicas en todas las páginas de su sitio cuando utiliza jQuery Mobile.

Answer 2

Me encontré con esto también. Pude establecer el valor de una entrada de texto con $('#some_id').val('foobar'), y luego imprimir el valor en la consola con console.info($('#some_id').val());, pero en el navegador, la entrada de texto estaba vacía.

Después de hurgar en ello un momento, me di cuenta de que $('input[id=some_id]').val('foobar') funcionó como se esperaba. Entonces, aparentemente, hay algún tipo de error raro con jQuery haciendo referencia a un elemento por ID.