changePage "salta" indietro alla vecchia pagina

Question

Ho un grosso problema con un'applicazione jQuery Mobile: Sto usando le funzioni personalizzate (sono attivate da onClick) per cambiare la pagina con currentPage.

Accade solo su dispositivi Android su siti in cui è stato modificato (a causa di richieste Ajax) con il browser integrato. iOS e Chrome funzionano bene.

Dopo aver fatto clic su un elemento, l'animazione è iniziata ma poco prima che termini, torna alla vecchia pagina. Dopo mezzo secondo, passa al nuovo.

ho fatto un film del bug qui: http://www.youtube.com/watch?v=sXxvVUxniNg

ringrazio molto

Codice (CoffeeScript):

class Guide 

    @categoriesLoaded = false 

    @loadSearch: -> 

     $.mobile.changePage $("#guide"), 
      transition: 'slide' 
      changeHash: false 

     if !@categoriesLoaded 

      @categoriesLoaded = true 

      GuideApi.getCategories (data) -> 
       output = Mustache.render $("#tmpl-guide-categories-select").html(), 
        categories: data 

       $("#guide-search-category").append output 

       $("#guide-search-category").val($("#guide-search-category option:first").val()); 

window.WgSwitchGuide = -> 
     Guide.loadSearch 

Answer 1

ho avuto lo stesso problema esatta su iOS e Android . Per me, stava accadendo per pesanti pagine, cioè pagine con elementi complessi ecc. Sembra che tu stia usando la transizione "slide", che era anche quello che stavo usando. Estrarre le transizioni di pagina (ad es. $ .mobile.changePage ("page.html", {transition: "none"})) per quelle pagine ha risolto il problema per me. Spero che questo ti aiuti.

Se si desidera mantenere la transizione, è possibile provare prima il preload della pagina quando viene visualizzata la pagina precedente, utilizzando $ .mobile.loadPage e quindi mostrare la transizione. Io stesso sto esplorando questo percorso, ma probabilmente vale la pena provarlo.

Modifica: OK - Ho esplorato l'ultimo suggerimento e questo non sembra funzionare. Rimarrà con la prima opzione.

Answer 2

Vuoi provare ad aggiungere i metodi stopPropagation e preventDefault all'evento click della prima pagina? In questo modo l'azione predefinita dell'evento click non verrà attivata. Inoltre stopPropagation impedisce all'evento di ribollire nell'albero DOM, impedendo la notifica agli eventuali gestori di genitori dell'evento.

• event.stopPropagation();
• event.preventDefault();

Esempio:

$("p").click(function(event){ 
    event.stopPropagation(); 
    event.preventDefault(); 
    // change page 
}); 

Answer 3

Qual'è il tuo jQm e la versione di Android?

Non sono sicuro se ho capito bene. Penso che lo sfarfallio della transizione provenga forse dalla seguente ipotesi.

1. Transizione DOM a pagina pesante.
2. Utilizzare "translate3d" da qualche parte nel file css.
3. Non si utilizza la funzione "Accelerazione H/W". Abilitare aggiungendo questa linea al tuo AndroidManifest .xml in <application>

android: hardwareAccelerated = "true"

Answer 4

ho avuto lo stesso problema. E ho provato tutto, alla fine ho terminato con la soluzione. Quello che ho trovato è che l'errore era principalmente all'interno del browser. Così ho impostato la configurazione di pushStateEnabled come falso. L'ho fatto facendo quanto segue, aggiungendo questo script.

<script type="text/javascript"> 
$(document).bind("mobileinit", function(){ 
$.mobile.pushStateEnabled = false; 
}); 
</script> 

Va aggiungere prima che lo script jquery-mobile è chiamata, per ulteriori informazioni si poteva vedere su JQuery description

Ed è risolto il problema non è più un salto indietro.

Answer 5

Dopo aver provato per settimane a trovare una soluzione a questo, ho finito per aggiustare la libreria JQM per disabilitare le transizioni di pagina una dopo l'altra. Non è una buona soluzione, ma è l'unica cosa che riesco a far funzionare.

Stavo recuperando le pagine sia su $ .mobile.changePage che sui link di ancoraggio. Ho usato la transizione della diapositiva, ma rimuoverla non ha risolto il problema. Anche l'impostazione pushStateEnabled su false non ha funzionato. I salti stavano accadendo su tutti i dispositivi e browser (che ho provato, comunque).

Quindi ecco cosa ho fatto alla libreria JQM (v1.3.2).

prima che la funzione $ .mobile.changePage è definito, ho aggiunto:

var justChangedPage = false; 

Poi all'interno della funzione c'è una linea che va:

if (pbcEvent.isDefaultPrevented()) { 
    return; 
} 

che ho cambiato a:

if (pbcEvent.isDefaultPrevented() || justChangedPage) { 
    return; 
} 

Quindi subito dopo questa parte della funzione $ .mobile.changePage:

if (toPage[ 0 ] === $.mobile.firstPage[ 0 ] && !settings.dataUrl) { 
    settings.dataUrl = documentUrl.hrefNoHash; 
} 

ho aggiunto:

justChangedPage = true; 
setTimeout(function() { 
    justChangedPage = false; 
}, 500); 

(Mettendo che in precedenza nella funzione non ha funzionato - tutta quella roba viene eseguito più di una volta all'interno di una singola transizione pagina. E mezzo secondo sembrava essere il timeout minima che ha impedito la pagina di salti.)

Spero che questo aiuta qualcuno, anche se si tratta di un hack ...

Answer 6

ho incontrato esattamente lo stesso comportamento e sembra che pochi le persone stanno avendo lo stesso problema. All'inizio ho pensato che fosse causato dalla libreria mobile di jQuery. Più tardi, riesco a trovare da dove viene il problema e si tratta di un bug nel mio codice. Ho fatto una demo per spiegare il problema.

http://jsfiddle.net/pengyanb/6zvpgd4p/10/

Speriamo che questo può essere suggerimento per le persone che hanno lo stesso problema.

$(document).on('pagebeforeshow', '#page2', function(){ 
 
    console.log('Page2 before show'); 
 
    var htmlGeneratedOnTheFly = '<ul data-role="listview" data-inset="true">'; 
 
    for(var i=0; i<4; i++) 
 
    { 
 
     htmlGeneratedOnTheFly += '<li><a>Random html element</a></li><li data-role="list-divider"></li>'; 
 
    } 
 
    htmlGeneratedOnTheFly += '</div>'; 
 
    $('#page2UiContent').empty(); 
 
    $('#page2UiContent').append(htmlGeneratedOnTheFly); 
 
    $('#page2UiContent').trigger('create'); 
 
    
 
    
 
    ////////////////////////////////////////////////// 
 
    //The following section is where the bug is generated. 
 
    //Each on "page2 before show event" will add a OK Button click handler. 
 
    //The handlers never get cleared. 
 
    //More and more handler is added to the Page2 OK button as pages going back and forth. 
 
    //Open the browser's console window to see multiple "Page 2 OK Button clicked!!!" lines on one button click. 
 
    //To fix the bug, move the following section out of the $(document).on('pagebeforeshow', '#page2', function(){}); 
 
    ////////////////////////////////////////////////// 
 
    $('#page2OkButton').click(function(){ 
 
     console.log("Page 2 OK Button clicked!!!"); 
 
     $.mobile.changePage('#page1', {transition:"flip"}); 
 
    }); 
 
    ////////////////////////////////////////////// 
 
    ////////////////////////////////////////////// 
 
});

<link href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.css" rel="stylesheet"/> 
 
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.js"></script> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div data-role="page" id="page1" data-theme="a"> 
 
    <div data-role="header" data-position="fixed"> 
 
     <h5>Demo Page 1</h5> 
 
    </div> 
 
    <div data-role="main" class="ui-content"> 
 
     <h2>jQuery mobile changepage jumps back to old page demo</h2> 
 
     <p>Click "Go To Page 2" button to go to page2</p> 
 
     <p>On Page2 click Ok Button to come back to page1</p> 
 
     <p>Keeping going back forth between two pages for few times.</p> 
 
     <p>Eventually, you will find that clicked on "Go To Page2" button to flip to Page2 but it soon jumps back to page1 automatically. </p> 
 
     <h2>Please read the comments in the javascript for explaination</h2> 
 
     <a href="#page2" data-transition="flip" class="ui-btn ui-icon-carat-r ui-btn-icon-right">Go To Page 2</a> 
 
    </div> 
 
</div> 
 

 
<div data-role="page" id="page2" data-theme="a"> 
 
    <div data-role="header" data-position="fixed"> 
 
     <h5>Demo Page 2</h5> 
 
    </div> 
 
    <div id="page2UiContent" data-role="main" class="ui-content"> 
 
    </div> 
 
    <div data-role="footer" data-position="fixed" style="text-align:center;"> 
 
     <div data-role="navbar"> 
 
      <ul> 
 
       <li><a id="page2OkButton" class="ui-btn ui-icon-check ui-btn-icon-left">OK</a></li> 
 
      </ul> 
 
     </div> 
 
    </div> 
 
</div>