Insertar elementos en el DOM en una página basada en jQuery Mobile

Estoy experimentando con una aplicación jQuery Mobile que eventualmente terminará como una aplicación no web en un dispositivo móvil, por lo que todo el contenido debe ser local. Por esa razón (creo) necesito construir la aplicación en una sola página delineada por etiquetas data-role="page"; de lo contrario, el mecanismo de carga de ajax en jQuery Mobile no parece funcionar.Insertar elementos en el DOM en una página basada en jQuery Mobile

La aplicación leerá los datos de un DB de almacenamiento local y lo mostrará en la página en una lista desordenada, diseñado con jQuery Mobile para que parezca una aplicación nativa.

En mi función $(document).ready() que ejecutar la consulta de base de datos y para cada uno de los resultados, puedo crear una etiqueta <li> alrededor de mis resultados de base de datos y luego llamar $(".list").append(li_str); donde .list es la clase de mi etiqueta <ul>.

La página se representa como si jQuery Mobile no estuviera presente: veo los datos correctos en cada <li> pero no parece correcto.

Comparando este resultado con una versión en la que codificar los <li> etiquetas en la página HTML - se ve como jQuery Mobile modifica las etiquetas e inserta un montón de nuevas clases etc.

Tal vez necesito para construir la página desde el DB más temprano en el ciclo de carga de página? ¿Alguna sugerencia?

Fuente

2011-02-10 speedwell

El problema es this issue. Por lo tanto, cambiar su código:

<!DOCTYPE html> 
<html> 
<head> 
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0a2/jquery.mobile-1.0a2.min.css" /> 
    <script src="http://code.jquery.com/jquery-1.4.4.min.js"></script> 
    <script src="http://code.jquery.com/mobile/1.0a2/jquery.mobile-1.0a2.min.js"></script> 
    <script> 
    function build_dynamic_content() 
    { 
     var num_entries = 5; 

     for (var i = 0; i < num_entries; ++i) 
     { 
      var li_str = "<li id=\"" + i + "\"><a href=\"#\">" + "Entry number " + (i + 1) + "</a>"; 
      li_str += "<img src=\"" + "icon.png" + "\" />"; 
      li_str += "</li>"; 

      $(".mainlist").append(li_str); 
     } 
    } 
    </script> 
</head> 

<body> 
    <div data-role="page" id="list" data-fullscreen="false"> 
     <div data-role="content"> 
      <ul class="mainlist" data-role="listview"> 
       <li id="0"><a href="#">Test entry</a><img src="icon.png"/></li> 
      </ul> 
     </div> 
    </div> 
<script>build_dynamic_content();</script> 
</body> 
</html>

alternativa, puede retrasar la creación de la vista de lista hasta que todos los elementos se han creado (como se describe en el hilo vinculado):

<!DOCTYPE html> 
<html> 
<head> 
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0a2/jquery.mobile-1.0a2.min.css" /> 
    <script src="http://code.jquery.com/jquery-1.4.4.min.js"></script> 
    <script src="http://code.jquery.com/mobile/1.0a2/jquery.mobile-1.0a2.min.js"></script> 
    <script> 
    function build_dynamic_content() 
    { 
     var num_entries = 5; 

     for (var i = 0; i < num_entries; ++i) 
     { 
      var li_str = "<li id=\"" + i + "\"><a href=\"#\">" + "Entry number " + (i + 1) + "</a>"; 
      li_str += "<img src=\"" + "icon.png" + "\" />"; 
      li_str += "</li>"; 

      $(".mainlist").append(li_str); 
     } 
    } 

    $(function() 
    { 
     build_dynamic_content(); 
     $('ul.mainlist').listview(); 
    }); 
    </script> 
</head> 

<body> 
    <div data-role="page" id="list" data-fullscreen="false"> 
     <div data-role="content"> 
      <ul class="mainlist"> 
       <li id="0"><a href="#">Test entry</a><img src="icon.png"/></li> 
      </ul> 
     </div> 
    </div> 
</body> 
</html>

Lo siento por los vertederos de código ; No pude hacer que esto funcione en jsfiddle.

Fuente

2011-02-10 01:18:37

que no aparecieron para hacer algo diferente Mat. Hice una pequeña aplicación de prueba sin DB que muestre el problema. La primera entrada en la lista está codificada y parece correcta. El resto se genera dinámicamente y no: http://pastebin.com/1LTDZ4nE ¿Puedes ver lo que estoy haciendo mal? – speedwell

@speedwell: ver mi edición. –

que funcionó perfectamente. Muchas gracias de hecho. – speedwell

La respuesta de Matt no es una respuesta general a la pregunta. Ya lo he cubierto muchas veces en otras preguntas.

Lo anterior funciona con una vista de lista, pero no con ningún contenido en general.

Para agregar elementos a DOM en jQuery Mobile, necesita conocer la función .page().

hice un tutorial sobre que http://jquerymobiledictionary.pl/faq.html

Fuente

2011-02-10 07:57:39 naugtur

Este sitio no es accesible, lo cual es desafortunado porque contiene la única respuesta correcta al problema del OP ... Encontrado en http://jquerymobiledictionary.pl/faq.html: => después de actualizar el DOM, llame al desencadenador ('crear') en el elemento insertado, así: $ ('# myelement'). Html ('contenido actualizado'). Trigger ('create'); – chrisv

Sí, reubiqué el sitio a un dominio y actualicé la mayoría de las publicaciones, pero hay tantas casi duplicadas que no las encontré todas. Gracias por informar – naugtur

Ni llamando $("changed-parent-element").listview() ni $("changed-parent-element").trigger("create") realmente trabajado para mí. Con el fin de cambiar el contenido de DOM varias veces y rehacer el estilo móvil jQuery que necesitaba esto:

$("changed-parent-element").listview("refresh");

Versión: jQuery Mobile 1.0 RC2

Fuente

2011-11-08 17:55:21

Insertar elementos en el DOM en una página basada en jQuery Mobile

Respuesta

Cuestiones relacionadas