jQuery Mobile Page meccanismo di aggiornamento

Question

Attualmente sto avendo un sacco di problemi a capire come JQuery Mobile gestisce le pagine di aggiornamento dopo un aggiornamento Ajax.

Ho due pagine: un sito di file univoco: un motore di ricerca.

La prima pagina è un campo di ricerca. Invia attiva una chiamata JSON e un parser che aggiorna la seconda pagina: risultati.

per ora sto usando: $.mobile.changePage($('#result')); che fa grande il lavoro dal campo di ricerca alla pagina dei risultati. Tuttavia: Se lo riutilizza dalla pagina dei risultati per le pagine next/prev (nuova chiamata json, nuova analisi, nuovi nodi aggiunti nel DOM); Jquery Mobile semplicemente non "dipinge" i nodi appena aggiunti.

qualcuno può spiegare, per favore l'uso e la distinzione di 1- $.mobile.page() 2- $.mobile.changePage() 3- $.mobile.refresh()

o darmi un suggerimento su come devo gestire le modifiche della pagina. grazie!

Answer 1

Si prega di dare una buona occhiata qui: http://jquerymobile.com/test/docs/api/methods.html

$.mobile.changePage() è quello di passare da una pagina all'altra, e il parametro può essere un URL o un oggetto pagina. (Solo #result sarà anche lavorare)

$.mobile.page() non è raccomandato più, si prega di utilizzare .trigger("create"), vedi anche: JQuery Mobile .page() function causes infinite loop?

Importante: Creare vs aggiornamento: Una distinzione importante

Nota che non c'è una differenza importante tra l'evento di creazione e il metodo di aggiornamento di alcuni widget. L'evento create è adatto per migliorare il markup raw che contiene uno o più widget. Il metodo di aggiornamento che alcuni widget devono utilizzare su widget esistenti (già potenziati) che sono stati manipolati a livello di codice e che richiedono l'aggiornamento dell'interfaccia utente per corrispondere.

Ad esempio, se si dispone di una pagina in cui è stato aggiunto in modo dinamico un nuovo elenco non ordinato con attributo data-ruolo = listview dopo la creazione della pagina, l'attivazione di creazione su un elemento padre di tale elenco lo trasformerebbe in un widget in stile listview. Se venissero aggiunti più elementi di elenco, a livello di codice, chiamando il metodo di aggiornamento listview si aggiornerebbero solo quelli nuovi elementi di elenco allo stato avanzato e non si manterrebbero gli elementi di elenco esistenti.

$.mobile.refresh() non esiste credo

Allora, cosa stai usando per i risultati? Una lista? Quindi è possibile aggiornarlo facendo:

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

Esempio: http://operationmobile.com/dont-forget-to-call-refresh-when-adding-items-to-your-jquery-mobile-list/

Altrimenti si può fare:

$('#result').live("pageinit", function(){ // or pageshow 
    // your dom manipulations here 
}); 

Answer 2

ho postato che nei forum jQuery (spero che possa aiutare):

Immergersi nel codice jQM ho trovato questa soluzione.Spero che possa aiutare altre persone:

Per aggiornare una pagina modificata in modo dinamico:

function refreshPage(page){ 
    // Page refresh 
    page.trigger('pagecreate'); 
    page.listview('refresh'); 
} 

Funziona anche se si creano nuove intestazioni, piè di pagina o navbars. L'ho provato con jQM 1.0.1.

Answer 3

function refreshPage() 
{ 
    jQuery.mobile.changePage(window.location.href, { 
     allowSamePageTransition: true, 
     transition: 'none', 
     reloadPage: true 
    }); 
} 

Tratto da qui http://scottwb.com/blog/2012/06/29/reload-the-same-page-without-blinking-on-jquery-mobile/ testati anche su jQuery Mobile 1.2.0

Answer 4

Questa risposta ha fatto il trucco per me http://view.jquerymobile.com/master/demos/faq/injected-content-is-not-enhanced.php.

Nel contesto di un modello multi-pagine, ho modificare il contenuto di un <div id="foo">...</div> in un Javascript 'pagebeforeshow' handler e attivare un aggiornamento alla fine dello script:

$(document).bind("pagebeforeshow", function(event,pdata) { 
    var parsedUrl = $.mobile.path.parseUrl(location.href); 
    switch (parsedUrl.hash) { 
    case "#p_02": 
     ... some modifications of the content of the <div> here ... 
     $("#foo").trigger("create"); 
    break; 
    } 
}); 

Answer 5

ho risolto questo problema utilizzando l'attributo data-cache = "false" nel div di pagina sulle pagine che volevo aggiornare.

<div data-role="page" data-cache="false"> 
/*content goes here*/ 

</div> 

Nel mio caso era il mio carrello. Se un cliente ha aggiunto un articolo al carrello e poi ha continuato a fare acquisti e poi ha aggiunto un altro articolo al carrello, la pagina del carrello non mostrava il nuovo articolo. A meno che non abbiano aggiornato la pagina. L'impostazione data-cache su false indica a JQM di non memorizzare nella cache quella pagina per quanto ho capito.

Spero che questo aiuti gli altri in futuro.

Answer 6

Ho trovato questo thread cercando di creare un pulsante di aggiornamento della pagina Ajax con jQuery Mobile.

@sgissinger aveva la risposta più vicina a quello che stavo cercando, ma era obsoleto.

ho aggiornato per jQuery Mobile 1,4

function refreshPage() { 
    jQuery.mobile.pageContainer.pagecontainer('change', window.location.href, { 
    allowSamePageTransition: true, 
    transition: 'none', 
    reloadPage: true 
    // 'reload' parameter not working yet: //github.com/jquery/jquery-mobile/issues/7406 
    }); 
} 

// Run it with .on 
$(document).on("click", '#refresh', function() { 
    refreshPage(); 
});