ajax - jQuery Mobile no aplica estilos después de agregar contenido dinámicamente

jquery-mobile

Question

Sé que estas preguntas aparecen en varios lugares ( obligando a jQuery Mobile a reevaluar estilos / tema en contenido insertado dinámicamente ) pero no con una respuesta que me funcione.

Estoy cargando algo de contenido usando ajax, e insertándolo en un div como este:

       $.ajax({
            url: "../Services/CalendarService.cshtml?service=true",
            cache: false,
            success: function (data) {

                data = $.parseJSON(data);
                var s = $("#user_tmpl").html();
                var s1 = tmpl(s, data);

                $("#target").html(s1);
                $("#targetRefresh").page();
            }
        });

Intenté configurar el targetRefresh en el objetivo al que estoy agregando el html y en la página, pero sin suerte. El contenido se inserta, pero los estilos no se aplican.

También intenté

.trigger("enhance")

¿Alguna idea de qué hacer?

Los html que insertó son un montón de estos:

<div data-theme="e" data-collapsed="true" data-role="collapsible">         <h3>MyOwner2AA</h3>         <p>MyDescription</p>         <p>/Date(1320339836735)/</p>         <p>MyOwner</p>         <i></i>     </div>

Gracias por cualquier ayuda

Larsi

Answer 1

Cuando probé las soluciones anteriores recibí un mensaje de error en Firebug

excepción no detectada: no se pueden invocar métodos en la vista de lista antes de la inicialización; intentó llamar al método ''actualizar''

Sin embargo, encontré una solución para esto, en lugar de llamar a .trigger("create") después de agregar los nuevos elementos que llamé

$("ul").listview();

al final de la función de devolución de llamada ajax.

Esto hizo que todo funcionara bien para mí. Espero eso ayude.

Answer 2

Esto funcionó para mí para la vista de lista

$(''ul'').listview(''refresh'');

También puedes actualizar el colapsable

$(''#element'').collapsibleset(''refresh'')

Answer 3

Intenta llamar a .trigger("create") en el elemento con el nuevo contenido.

Según los documentos jQuery Mobile , "El evento create es adecuado para mejorar el marcado sin formato que contiene uno o más widgets".

EDITAR : a partir de jQuery Mobile 1.4, .trigger(''create'') está en desuso , y debe usar .enhanceWithin() lugar. (Gracias a John Mc por el aviso).

Answer 4

Para aquellos que se lo perdieron anteriormente, para volver a aplicar estilos JQM después de agregar contenido dinámicamente, haga esto:

$(''.myelement'').html( myHtmlStr ).enhanceWithin();