Pulsante jQuery mobile rimanendo premuto

Question

Ho un pulsante mobile jQuery collegato a un POST ajax. Se il POST non riesce, il pulsante cellulare jQuery rimane premuto invece di `` popping up". Tutte le idee?

Answer 1

Può essere fatto facilmente

Ecco un esempio jsFiddle fatta per una delle mie risposte precedenti:. http://jsfiddle.net/3PhKZ/7/

Se si dà un'occhiata c'è questa riga di codice:

$.mobile.activePage.find('.ui-btn-active').removeClass('ui-btn-active ui-focus'); 

Cercherà di trovare il pulsante premuto su una pagina attiva corrente, se riesce rimuoverà 2 classi responsabili di uno stato premuto pulsante. Sfortunatamente la soluzione CSS pura è impossibile qui. Puoi testare questo esempio, basta commentare la riga superiore e vedere cosa accadrà.

Un'ultima opzione di selezione $ .mobile.activePage può essere utilizzata solo durante gli eventi pagebeforeshow, pageshow, pagebeforechange, pagechange, pagebeforehide e pagehide page, quindi è necessario tenerne conto.

Nel caso in cui non puoi usare questo selettore basta sostituirlo con una pagina id, in questo modo:

$('#pageID').find('.ui-btn-active').removeClass('ui-btn-active ui-focus'); 

Così il vostro codice finale sarà simile a questa:

$.ajax("example.php") 
.success(function() { doStuff(); }) 
.error(function() { 
    $('#pageID').find('.ui-btn-active').removeClass('ui-btn-active ui-focus'); 
}) 

Answer 2

Aggiungi una clausola di errore al trattamento AJAX che si apre il pulsante indietro.

$.ajax("example.php") 
.success(function() { doStuff(); }) 
.error(function() { /*code to unpress button here*/ }) 

Answer 3

per quelle persone là fuori usando "input" e non "ancore" come pulsanti. Quando si utilizzano ad esempio i pulsanti "invia" e "ripristina" e premendoli rimangono attivi, il che a volte è indesiderato a seconda delle azioni eseguite quando si fa clic sui pulsanti.

non sono sicuro se si tratta il comportamento previsto, ho letto che è un bug cellulare jQuery, ma il comportamento è ancora presente almeno in jQm 1.3.2

Un sì ​​al trucco è di rimuovere la classe attiva come detto però quelli ottenere difficile perché la classe non viene aggiunto il tag input, i * t viene aggiunto a un DIV genitore * che è stato creato da tutte le cose brutte in tutto il "input" per stile il pulsante, ecco perché rimuovere la classe attiva quando si seleziona l'input non funziona.

Analizzando l'HTML prodotto da jquery cellulare Una soluzione è:

rimuovere la classe attiva sul genitore ingresso invece dell'elemento di ingresso effettivo.

$ ('. Mybutton_class_or_ID'). Parent(). RemoveClass ('ui-btn-active');

Preferisco questo approccio invece di cancellare tutte le classi attive su tutta la pagina nel caso in cui si desideri essere più selettivi con la rimozione della classe.