Inserimento di elementi nel DOM in una pagina basata su jQuery Mobile

Sto sperimentando un'applicazione jQuery Mobile che alla fine diventerà un'app non Web su un dispositivo mobile e quindi tutto il contenuto deve essere locale. Per questo motivo (credo) ho bisogno di costruire l'app in una singola pagina delineata dai tag data-role="page" altrimenti il meccanismo di caricamento ajax in jQuery Mobile non sembra funzionare.Inserimento di elementi nel DOM in una pagina basata su jQuery Mobile

L'app legge i dati da un DB di archiviazione locale e li visualizza sulla pagina in un elenco non ordinato, in stile utilizzando jQuery Mobile per sembrare un'app nativa.

Nella mia funzione $(document).ready() eseguo la ricerca DB e per ogni risultato, creo un tag <li> intorno i miei risultati DB e quindi chiamare $(".list").append(li_str); dove .list è la classe del mio tag <ul>.

La pagina esegue il rendering come se jQuery Mobile non fosse presente - Vedo i dati corretti in ogni <li> ma non sembra corretto.

Confrontando questo risultato con una versione in cui ho codificare le <li> tag nella pagina HTML - sembra jQuery Mobile modifica i tag e inserisce un sacco di nuove classi, ecc

Forse ho bisogno di costruire la pagina dal DB in precedenza nel ciclo di caricamento della pagina? Eventuali suggerimenti?

fonte

2011-02-10 speedwell

Il problema è this issue. Quindi, modificare il codice:

<!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>

In alternativa, è possibile ritardare la creazione della visualizzazione elenco fino a quando tutti gli elementi sono stati creati (come descritto nel thread linkato):

<!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>

Ci scusiamo per discariche di codice ; Non riuscivo a farlo funzionare in jsfiddle.

fonte

2011-02-10 01:18:37

che non sembravano affatto diversa Matt. Ho creato una piccola app di test senza DB che mostra il problema. La prima voce nell'elenco è codificata e sembra corretta. Il resto è generato dinamicamente e non: http://pastebin.com/1LTDZ4nE Riesci a vedere cosa sto facendo male? – speedwell

@speedwell: vedere la mia modifica. –

che ha funzionato perfettamente. Molte grazie davvero. – speedwell

La risposta di Matt non è una risposta generale alla domanda. Ho già parlato un sacco di volte in altre domande.

Quanto sopra funziona con un listview, ma non con qualsiasi contenuto in generale.

Per aggiungere elementi a DOM in jQuery Mobile è necessario conoscere la funzione .page().

ho fatto un tutorial su che http://jquerymobiledictionary.pl/faq.html

fonte

2011-02-10 07:57:39 naugtur

Questo sito non è raggiungibile, il che è sfortunato perché contiene l'unica risposta corretta al problema dell'OP ... Trovato su http://jquerymobiledictionary.pl/faq.html: => dopo aver aggiornato il DOM, chiama trigger ('create') sull'elemento inserito, in questo modo: $ ('# myelement'). Html ('contenuto aggiornato'). Trigger ('create'); – chrisv

Sì, ho spostato il sito in un dominio e ho aggiornato la maggior parte dei post, ma ci sono così tanti quasi-duplicati, non li ho trovati tutti. Grazie per la segnalazione. – naugtur

Né chiamando $("changed-parent-element").listview() né $("changed-parent-element").trigger("create") davvero lavorato per me. Al fine di modificare il contenuto DOM più volte e rifare lo stile cellulare jQuery ho bisogno di questo:

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

Versione: jQuery Mobile 1.0 RC2

fonte

2011-11-08 17:55:21

Inserimento di elementi nel DOM in una pagina basata su jQuery Mobile

risposta

Problemi correlati