Vai al contenuto
jQuery Italia
jQuery Italia

La community italiana di jQuery

  • HOME
  • IMPARA
    • Tutorials jQuery Italia
    • Tutorials dal web
    • Supporto ed Aiuto
  • CONTRIBUISCI
    • Nuovo Articolo
    • Nuovo Tutorial
  • SVILUPPA
    • Snippets
    • Tools
    • Download
    • Plugins
    • Links
  • NOTIZIE
    • jQuery
    • jQuery UI
    • Projects
  • CONTATTI
  • LOGIN
  • REGISTRATI

Ricordare tabs dopo refresh

Home › Forum › Supporto ed Aiuto › Richieste di aiuto, script e tutorial

Scrivi le tue richieste di aiuto nella sezione relativa.
Richieste di aiuto generiche o riguardanti script o tutorial creati dalla community jQuery Italia.
  • Questo topic ha 17 risposte, 3 partecipanti ed è stato aggiornato l'ultima volta 2 mesi, 4 settimane fa da zucco1411.
Stai visualizzando 10 post - dal 1 a 10 (di 18 totali)
1 2 →
  • Autore
    Post
  • 7 Novembre 2014 alle 17:55 #6467
    zucco1411
    Partecipante

    Salve, 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)

    8 Novembre 2014 alle 11:29 #6470
    jqueryitalia
    Amministratore

    Ciao 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!

    10 Novembre 2014 alle 17:01 #6472
    zucco1411
    Partecipante

    Grazie 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ù)…

    11 Novembre 2014 alle 14:50 #6475
    jqueryitalia
    Amministratore

    Allora 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!

    11 Novembre 2014 alle 15:17 #6476
    zucco1411
    Partecipante

    Grazieeeeee!!! 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?

    11 Novembre 2014 alle 17:02 #6477
    jqueryitalia
    Amministratore
    1. Assolutamente si. Se però questo è un website, ti consiglio sempre di includerli vìa CDN come nell’esempio
    2. 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?
    11 Novembre 2014 alle 17:07 #6478
    zucco1411
    Partecipante

    Allora 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

    12 Novembre 2014 alle 10:46 #6479
    jqueryitalia
    Amministratore

    Perchè dovresti usare una sessione quando puoi utilizzare direttamente i dati che ti arrivano in $_POST???? o_O

    13 Novembre 2014 alle 16:33 #6482
    zucco1411
    Partecipante

    Ok 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)…

    13 Novembre 2014 alle 16:41 #6483
    zucco1411
    Partecipante

    va 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’)”>

  • Autore
    Post
Stai visualizzando 10 post - dal 1 a 10 (di 18 totali)
1 2 →
  • Devi essere connesso per rispondere a questo topic.
Accesso
Accedi con Facebook
Accedi con Google
Accedi con Twitter

Login

Accedi con Facebook
Accedi con Google
Accedi con Twitter
  • Registrati
  • Password dimenticata?

SOSTIENI jQuery Italia

Aiuta la Community di jQuery Italia a rimanere in vita per contribuire a diffondere le conoscenze di base ed avanzate di jQuery.

Download in evidenza

  • gmap104.html (3527 download)
  • jquery-1.4.1.min.js (3110 download)
  • tinytips11.html (3087 download)
  • jqueryformwizard-201.html (3072 download)
  • jquery-ui-1.8rc1.zip (2965 download)
  • jquerytools120.html (2890 download)
  • jquery-1.4.2.min.js (2884 download)
  • calendarPicker.html (2872 download)
  • 1.0.0.zip (2867 download)
  • move-background.html (2833 download)

jQuery Links

  • jQuery Howto
  • jQuery Official Site
  • jQuery UI Official Site
  • Learning jQuery
  • Use jQuery

SITO SEGNALATO SU

Sito segnalato da Freeonline.it - La guida alle risorse gratuite Mooseek.com - Web Directory, Download Software, Giochi Online, Video Tecnologici, Siti d'Affari

TAG

aggiornamento (3) ajax (5) Android (5) animazione (49) api (10) BlackBerry (4) calendario (3) canvas (4) css3 (9) form (12) framework (41) gallery (8) google (5) grafici (2) html5 (11) immagini (38) javascript (29) jQuery (160) jQuery UI (15) Linux Day (3) maps (3) menu (6) mobile (10) news (2) open source (4) overlay (3) plugin (93) Plugins (17) presentation cycle (4) projects (11) responsive (5) slider (7) slideshow (18) Smartphones (5) Tablets (4) template (5) testo (2) tooltip (6) tutorial (12) upload (3) utility (18) VELug (3) video (3) widget (3) zoom (3)
jQuery Italia

La community italiana di jQuery

  • Facebook
  • Twitter
  • Linkedin
  • Youtube
Tutti i loghi ed i marchi contenuti e citati in questo sito sono dei rispettivi propietari.
Privacy Policy
Cookies Policy
COPYRIGHT © 2010 - 2022 jQuery Italia
Designed By ZeeTheme
Posting....