Ricordare tabs dopo refresh
- Questo topic ha 17 risposte, 3 partecipanti ed è stato aggiornato l'ultima volta 2 anni, 1 mese fa da zucco1411.
- AutorePost
- 14 Novembre 2014 alle 12:40 #6486jqueryitaliaAmministratore
Prima del return false, sfrutta il cookie creato in precedenza per riattivare al tab attiva 😉
14 Novembre 2014 alle 17:10 #6487zucco1411PartecipanteScusa ma non riesco perchè ho due eventi on click in questo modo… quello della chiamata javascript:
onclick="return controllamodulo('moduloX')"
e quella che mi hai scritto tu in precedenza:
$("#tabs a").on('click', function (e) { e.preventDefault(); jQuery(this).parent('li').addClass('active').siblings().removeClass('active'); activeTabs = $("#tabs").tabs('option', 'active'); $.cookie('activeTabs', activeTabs); });
quindi quando clicco sul link mi chiama la funzione controllamodulo( e fa quello che deve fare)…però poi non rimane sulla tab giusta perchè lachiamata jquery me la cambia…
17 Novembre 2014 alle 13:21 #6489jqueryitaliaAmministratoreNulla ti vieta di accorpare i due eventi però 😉
Dai ai tuoi form un’ id (al form uno dai id modulo1, al form due id modulo2, al form tre id modulo3) ed utilizzando l’evento jQueryUI beforeActivate puoi scrivere il segente codice:
$(function() { var myTabs = $( "#tabs" ).tabs({ beforeActivate: function ( event, ui ) { // Questo per evitare la richiesta al reload della pagina if ( event.handleObj != undefined && event.handleObj.type == 'click' ) { // Passo alla funzione l'id del modulo $response = controllaModulo( $( 'form', '#'+ ui.oldPanel.attr('id') ).attr( 'id' ) ); // A seconda della risposta setto la tab attiva if ( $response ) { $.cookie('activeTabs', ui.newPanel.index() - 1 ); } else { $.cookie('activeTabs', ui.oldPanel.index() - 1 ); } return $response; } } }); activeTabs = $.cookie('activeTabs'); if (activeTabs != undefined) { myTabs.tabs('option', 'active', activeTabs); } else { myTabs.tabs('option', 'active', 0); $.cookie('activeTabs', 0); } }); function controllaModulo( modulo ) { if ( modulo === "modulo3" ) { if ( ...controllo che non ci siano dati negli altri form... ) { var r = confirm("Cambiando parametro di ricerca i dati precedentemente inseriti verranno cancellati."); if (r === true) { $("#modulo1")[0].reset() $("#modulo2")[0].reset() return true; } } } // ...stesso controllo per le altre due tab... return false; }
ed il gioco è fatto! 😉
17 Novembre 2014 alle 16:45 #6490zucco1411PartecipanteGrazie jqueryitalia!!La funzione pero deve essere cosi altrimenti ritorna sempre false(se non entra nell’if) e non muove le tab:
function controllaModulo( modulo ) { if(modulo === "modulo1") { if( ... CONTROLLO ALTRI DUE FORM... ) { var r = confirm("Cambiando parametro di ricerca i dati precedentemente inseriti verranno cancellati."); if (r === true) { $("#modulo2")[0].reset(); $("#modulo3")[0].reset(); $('label.error').hide(); return true; } else { return false; } } return true; } ...CONTROLLI PER ALTRI DUE MODULI... return false; }
e in questo modo non mi cambia lo sfondo della tab attiva in alto ho provato a mettere un comando del genere ma non funziona:
jQuery('.tabs .tab-links a').parent('li').addClass('active').siblings().removeClass('active');
(FACCIO SCHIFO CON JQUERY)
17 Novembre 2014 alle 23:20 #6492jqueryitaliaAmministratoreA me, con il codice che ho scritto funzionava tutto in maniera corretta… o_O
Ovvio che poi la funzione di controllo la devi personalizzare a tuo piacimento 😉
2 Dicembre 2014 alle 13:32 #6512zucco1411PartecipanteCiao sono ancora io :)…è possibile fare la stessa cosa fatta sopra(tenendo i form come sono) ma al posto dei tre link in alto una tendina con option select?o devo abbandonare le tabs? grazie
4 Dicembre 2014 alle 10:38 #6516jqueryitaliaAmministratoreNon necessariamente: devi modificare il codice javascript.
16 Dicembre 2014 alle 15:09 #6544eldiablo2PartecipanteMolto utile! grazie
- AutorePost
- Devi essere connesso per rispondere a questo topic.