jQuery Mobile problemas de representación con el contenido que se agrega después de que se inicializa la página

Question

Estoy usando jQuery Mobile y Backbone JS para un proyecto. Funciona principalmente, utilizando el evento 'pagebeforeshow' de jQuery Mobile para activar la vista Backbone correcta. En la Vista Backbone para esa página particular de jQuery Mobile, ahí es donde está haciendo todas las cosas dinámicas necesarias. Algunas de las cosas que hacen las vistas es extraer ciertos bits utilizando el sistema de plantillas de Underscore.

Todo esto es genial hasta que estoy tirando en bits de forma utilizando el sistema de plantillas. Por ejemplo, un conjunto de botones de radio dinámicos (que se generan a partir de una Colección Backbone). Estos botones de radio los quiero estilizar usando lo que jQuery Mobile tiene para ofrecer. Por el momento, jQuery Mobile no está recibiendo estos botones de radio inyectados dinámicamente. Resolví este problema previamente cuando hacía controles deslizantes simplemente llamando al widget de jQuery Mobile "slider()" de nuevo y parecía refrescarlos ... Esto no parece ser el caso con estos botones de opción.

en la estructura principal Ver, he intentado llamar a los métodos de widgets otra vez:

$(this.el).find("input[type='radio']").checkboxradio(); 
$(this.el).find(":jqmData(role='controlgroup')").controlgroup(); 

los probé al revés también, pero parecía que necesito para hacerlo de esta manera para el estilo de agrupación para trabajar, etc. ¡Pero esto no parece correcto! ... hacer esto también causó errores cuando hice clic en los botones de radio, diciendo: "no puedo llamar a los métodos en checkboxradio antes de la inicialización, intenté llamar al método 'refresh'"?

Parece que debería haber una forma en jQuery Mobile de reiniciar la página o algo así? Noté que hay un widget de 'página' en el código fuente.

¿Cómo maneja jQuery Mobile los formularios/elementos que se inyectan en el DOM después de que se crea la página? ¿Hay una forma clara de manejar cómo se forman los formularios? Debe haber una forma clara de invocar los formularios para representar "el camino jQuery Mobile" sin que solo dependa de las etiquetas de atributos de datos en el HTML base.

Cualquier ayuda o visión sobre este problema sería muy apreciada ... Estoy en esta búsqueda de intentar que Backbone JS y jQuery Mobile funcionen bien juntos.

Muchas gracias, James

Answer 1

actualización

Desde jquery mobile beta 2 hay un evento para hacer esto. .trigger('create') en un elemento para hacer que todo lo que está dentro se pintee correctamente.

Otra cuestión que no es un duplicado, pero requiere una answet he publicado más de 10 veces :)

[vieja respuesta]

tratar .page()

Más detalles en mi faq: http://jquerymobiledictionary.pl/faq.html

Answer 2

No estoy seguro de si esto ayuda, pero al agregar elementos dinámicos estaba usando .page() en la llamada de éxito ajax (ejemplo here y here) pero descubrí que no estaba funcionando como se esperaba.He encontrado que en el Ajax llama que es mejor para refrescar el elemento (si se trata de un elemento de formulario) para utilizar these documented methods:

• Las casillas de verificación:

  $("input[type='checkbox']").attr("checked",true).checkboxradio("refresh"); 
  

• Radios:

  $("input[type='radio']").attr("checked",true).checkboxradio("refresh"); 
  

• Selecciona:

  var myselect = $("select#foo"); 
  myselect[0].selectedIndex = 3; 
  myselect.selectmenu("refresh"); 
  

• Sliders:

  $("input[type=range]").val(60).slider("refresh"); 
  

• interruptores Flip (que utilizan control deslizante):

  var myswitch = $("select#bar"); 
  myswitch[0].selectedIndex = 1; 
  myswitch .slider("refresh"); 
  

y para la adición de un no-forma uso elemento .página()

Answer 3

que necesitaba una forma de actualizar dinámicamente una página JQM después de que se haya inicializado. Descubrí que si eliminaba la "página" del atributo de datos durante el evento "pagehide", la próxima vez que se mostraba la página de JQM se volvía a inicializar.

$('#testing').live('pagehide', function (e) { 
    $.removeData(e.target, 'page'); 
}); 

Answer 4

refrescantes toda la página trabajó para mí:

$('#pageId').page('destroy').page(); 

Answer 5

jQuery Mobile ahora soporta .trigger ("crear"); que resolverá esto para usted

Answer 6

$('#pageId').page('destroy').page(); 

funciona para grupos de control completos que se generan, y mucho menos para entrada de radio niños.

-Mike

Answer 7

Para mí sólo .page() trabajado (sin el .page('destroy')).

ej .:

$('my-control-group-id').page(); 

Amnón

Answer 8

Trate de llamar .trigger ("crear") en el elemento con el nuevo contenido.

Answer 9

Un poco fuera de tema. Quería poder evitar que jqm cree el primer div de página predeterminado en init, ya que la red troncal de todos modos divide los elementos en divs. Quería insertar páginas dinámicamente en el DOM y luego llamar a jqm para crear sus clases y widgets. Finalmente lo hice así:

<head> 
<script src="jquery-1.8.3.js"></script> 
<script type='javascript'> 
$(document).on("mobileinit", function() { 
$.mobile.autoInitializePage = false;  
} 
</script> 
<script src="jquery.mobile-1.3.0-beta.1.min.js"></script> 
</head> 
<body> 
....... dynamically add your content .......... 

<script type='javascript'> 
$.mobile.initializePage() 
</script> 
</body> 

y mi agujero JQM de configuración (que se pone antes jqm.js)

$(document).on("mobileinit", function() { 
    $.mobile.ajaxEnabled = false; 
    $.mobile.hashListeningEnabled = false; 
    $.mobile.pushStateEnabled = false; 
    $.mobile.linkBindingEnabled = false; // delegating all the events to chaplin 
    $.mobile.changePage.defaults.changeHash = false; 

    $.mobile.defaultDialogTransition = "none"; 
    $.mobile.defaultPageTransition = "slidedown"; 
    $.mobile.page.prototype.options.degradeInputs.date = true; 
    $.mobile.page.prototype.options.domCache = false; 
    $.mobile.autoInitializePage = false; 

    $.mobile.ignoreContentEnabled=true; 
}); 

Backbone hasta ahora y JQM estado trabajando muy bien.

Answer 10

Me funcionó cuando llamé a .trigger ('crear') en el elemento div adjunto.Consulte el siguiente ejemplo:

En el archivo html:

<div id="status-list" data-role="fieldcontain"> 
    <fieldset data-role="controlgroup"> 
     <legend>Choose as many snacks as you'd like:</legend> 
      <input type="checkbox" name="checkbox-1a" id="checkbox-1a"/> 
      <label for="checkbox-1a">Cheetos</label> 
    </fieldset> 
</div> 

en el archivo .js:

$("#status-list").trigger('create'); 

Answer 11

uso Try enhanceWithin() método. Este debería ser el método de cualquier objeto jQuery al usar jQuery Mobile.