Ricordare tabs dopo refresh
- Questo topic ha 17 risposte, 3 partecipanti ed è stato aggiornato l'ultima volta 2 mesi, 4 settimane fa da
zucco1411.
- Post
zucco1411Salve, io ho un elenco di tabs molto semplice…il codice jquery che le fa aprire e chiudere è il seguente:
jQuery(document).ready(function() { jQuery('.tabs .tab-links a').on('click', function(e) { var currentAttrValue = jQuery(this).attr('href'); // Show/Hide Tabs jQuery('.tabs ' + currentAttrValue).show().siblings().hide(); // Change/remove current tab to active jQuery(this).parent('li').addClass('active').siblings().removeClass('active'); e.preventDefault(); }); });ora il problema mio è che dentro alle tab ci sono dei form e quando invio i dati(cioè aggiorno la pagina) mi apre la prima tab….io vorrei che dopo il refresh mi riaprisse l’ultima tab aperta(in caso il form sia sbagliato)…
il plugin cookie si può utilizzare?(non riesco a capirlo)
jqueryitaliaCiao zucco1411 e benvenuto!
Per prima cosa, per le prossime volte, ti chiedo di seguire le istruzioni per inserire codice all’interno dei post.
Per quanto riguarda la tua richiesta, invece, ti consiglio di settare il preventDefault come prima istruzione e non come ultima.
Per il problema del refresh invece hai due possibili soluzioni:- utilizzare una chimata ajax al submit del form, in modo da non dover ricaricare la pagina
- creare un cookie dove andrai a salvare il valore del tab attivo che andrai a recuperare dopo il submit per mostrare il tab
Buon lavoro!
zucco1411Grazie della risposta sto provando con i cookie ma non riescoa a farli funzionare.
Innanzitutto includo lil plugin:
<script src="../js/jquery-cookie-master/src/jquery.cookie.js"></script>
poi nella mia funzione setto il cookie:
jQuery(document).ready(function() { jQuery('.tabs .tab-links a').on('click', function(e) { e.preventDefault(); var currentAttrValue = jQuery(this).attr('href'); $.cookie('tab',currentAttrValue; // Show/Hide Tabs jQuery('.tabs ' + currentAttrValue).show().siblings().hide(); // Change/remove current tab to active jQuery(this).parent('li').addClass('active').siblings().removeClass('active'); }); });comunque sia nel browser non vedo il cookie settato e inoltre non mi funzionano piu le tab(cioè non si aprono più)…
jqueryitaliaAllora se usi le tabs di jQuery UI la maggior parte del codice che hai scritto non serve in quanto lo show/hide delle tab viene gestito autonomamente.
Ti ho comunque creato un’esempio perfettamente funzionante di integrazione tabs e cookies:<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>jQuery UI Tabs - Default functionality</title> <link rel="stylesheet" href="//code.jquery.com/ui/1.11.2/themes/smoothness/jquery-ui.css"> <script src="//code.jquery.com/jquery-1.10.2.js"></script> <script src="//code.jquery.com/ui/1.11.2/jquery-ui.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery-cookie/1.4.1/jquery.cookie.min.js"></script> <script> $(function() { $( "#tabs" ).tabs(); var activeTabs = $.cookie('activeTabs'); if (activeTabs != undefined) { $("#tabs").tabs('option', 'active', activeTabs); } else { $("#tabs").tabs('option', 'active', 0); } $("#tabs a").on('click', function (e) { e.preventDefault(); activeTabs = $("#tabs").tabs('option', 'active'); $.cookie('activeTabs', activeTabs); }); }); </script> </head> <body> <div id="tabs"> <ul> <li><a href="#tabs-1">Nunc tincidunt</a></li> <li><a href="#tabs-2">Proin dolor</a></li> <li><a href="#tabs-3">Aenean lacinia</a></li> </ul> <div id="tabs-1"> <p>Proin elit arcu, rutrum commodo, vehicula tempus, commodo a, risus. Curabitur nec arcu. Donec sollicitudin mi sit amet mauris. Nam elementum quam ullamcorper ante. Etiam aliquet massa et lorem. Mauris dapibus lacus auctor risus. Aenean tempor ullamcorper leo. Vivamus sed magna quis ligula eleifend adipiscing. Duis orci. Aliquam sodales tortor vitae ipsum. Aliquam nulla. Duis aliquam molestie erat. Ut et mauris vel pede varius sollicitudin. Sed ut dolor nec orci tincidunt interdum. Phasellus ipsum. Nunc tristique tempus lectus.</p> <form action="" method="post"> <input type="submit" value="salva" > </form> </div> <div id="tabs-2"> <p>Morbi tincidunt, dui sit amet facilisis feugiat, odio metus gravida ante, ut pharetra massa metus id nunc. Duis scelerisque molestie turpis. Sed fringilla, massa eget luctus malesuada, metus eros molestie lectus, ut tempus eros massa ut dolor. Aenean aliquet fringilla sem. Suspendisse sed ligula in ligula suscipit aliquam. Praesent in eros vestibulum mi adipiscing adipiscing. Morbi facilisis. Curabitur ornare consequat nunc. Aenean vel metus. Ut posuere viverra nulla. Aliquam erat volutpat. Pellentesque convallis. Maecenas feugiat, tellus pellentesque pretium posuere, felis lorem euismod felis, eu ornare leo nisi vel felis. Mauris consectetur tortor et purus.</p> <form action="" method="post"> <input type="submit" value="salva" > </form> </div> <div id="tabs-3"> <p>Mauris eleifend est et turpis. Duis id erat. Suspendisse potenti. Aliquam vulputate, pede vel vehicula accumsan, mi neque rutrum erat, eu congue orci lorem eget lorem. Vestibulum non ante. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Fusce sodales. Quisque eu urna vel enim commodo pellentesque. Praesent eu risus hendrerit ligula tempus pretium. Curabitur lorem enim, pretium nec, feugiat nec, luctus a, lacus.</p> <p>Duis cursus. Maecenas ligula eros, blandit nec, pharetra at, semper at, magna. Nullam ac lacus. Nulla facilisi. Praesent viverra justo vitae neque. Praesent blandit adipiscing velit. Suspendisse potenti. Donec mattis, pede vel pharetra blandit, magna ligula faucibus eros, id euismod lacus dolor eget odio. Nam scelerisque. Donec non libero sed nulla mattis commodo. Ut sagittis. Donec nisi lectus, feugiat porttitor, tempor ac, tempor vitae, pede. Aenean vehicula velit eu tellus interdum rutrum. Maecenas commodo. Pellentesque nec elit. Fusce in lacus. Vivamus a libero vitae lectus hendrerit hendrerit.</p> <form action="" method="post"> <input type="submit" value="salva" > </form> </div> </div> </body> </html>Come potrai vedere utilizzandolo, al submit dei vari form si ritorna sempre all’ultimo tab selezionato.
Buon lavoro!
zucco1411Grazieeeeee!!! mi hai salvato….ultimo dubbio: è la stessa cosa se scarico i file di jquery e li includo dal mio server o è sicuro uguale?….
inoltre se posso (anche se non è la sessione giusta) chiederti se raccogliere dati dal form con le variabili di sessione php è sicuro oppure no?
jqueryitalia- Assolutamente si. Se però questo è un website, ti consiglio sempre di includerli vìa CDN come nell’esempio
- Non riesco a capire la domanda: i dati del form li devi salvare da qualche parte (es. un database)? Oppure stai utilizzando le tabs per creare un form multistep?
zucco1411Allora io devo farmi inviare i dati del form per email: quindi mi salvo i dati del form in variabili di sessione php, poi creo una mail con tutte queste variabili e la invio alla mia casella di posta…..quindi volevo sapere se come sicurezza è un procedimento valido?oppure devo salvare i dati in un altro modo? grazie
jqueryitaliaPerchè dovresti usare una sessione quando puoi utilizzare direttamente i dati che ti arrivano in $_POST???? o_O
zucco1411Ok grazie, mi si è presentato un altro problema:
allora volevo mettere una funzione che quando cambio tabs e ho dei dati inseriti in un form mi chieda se voglio continuare o no…nel caso in cui continuo cancella i dati nel form e cambio tab, invece nel caso in cui annullo non succeda niente e rimango sulla tab con i miei dati nel form…
io l’ho messa giù cosi in javascript:
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) { document.forms["form1"].reset(); document.forms["form2"].reset(); return true; } } } ...stesso controllo per le altre due tab... return false; }<ul> <li><a href="#tab1">Sei una persona fisica?</a></li> <li><a href="#tab2">Sei una ditta individuale?</a></li> <li><a href="#tab3">Sei una società?</a></li> </ul>ok fa tutto giusto tranne per il fatto che se annullo l’operazione(quando me lo chiede la confirm) mi cambia tab e non mi rimane sulla tab aperta…
inoltre non so se ho fatto bene a scriverlo in javascript invece che in jquery(mi sembrava abbastanza semplice con javascript)…
zucco1411va be in fondo volevo metterti il codice di dove chiamo la funzione ma non sono capace di postarlo scusa 🙂 sono tre link cosi:
onclick=”return controllamodulo(‘modulo1’)”>
- Devi essere connesso per rispondere a questo topic.
