Forum : Passage paramètre dans l'URL

Bonjour à tous,

J'ai plusieurs nav d'onglet sur la même page, grace à un passage des paramètres dans l'URL j'aimerais y stocké mes hrefs pour que lorsque j'envoi le link à une tiers personne elle y voit le même contenue sur moi.

Des onglets dans ce style (j'utilise bootstrap et jQuery) :

        <div class="container">
            <h2> Test système d'onglets </h2>
            </br>
              <div class="tabbable">
                <ul id="myTab" class="nav nav-tabs tabs-flat col-md-6">
                    <li class="active">
                        <a data-toggle="tab" href="#informations" aria-expanded="true"> Informations </a>
                    </li>
                    <li class="">
                        <a data-toggle="tab" href="#characteristics" aria-expanded="false"> Caractéristiques </a>
                    </li>
                    <li class="">
                        <a data-toggle="tab" href="#owner-informations" aria-expanded="false"> Mes informations </a>
                    </li>
                </ul>
              </div>

              <div class="tabbable">
                <ul id="myTab2" class="nav nav-tabs tabs-flat col-md-6">
                    <li class="active">
                        <a data-toggle="tab" href="#photos" aria-expanded="true"> Photos </a>
                    </li>
                    <li class="">
                        <a data-toggle="tab" href="#addPhotos" aria-expanded="false"> Ajouter une photo </a>
                    </li>
                </ul>
              </div>
        </div>

J'ai trouvé ceci sur le net mais je n'arrive pas à m'en servir, quelqu'un aurait un petit coup de pouce à me donner ?

function $_GET(param) {
    var vars = {};
    window.location.href.replace( location.hash, '' ).replace( 
        /[?&]+([^=&]+)=?([^&]*)?/gi, // regexp
        function( m, key, value ) { // callback
            vars[key] = value !== undefined ? value : '';
        }
    );

    if ( param ) {
        return vars[param] ? vars[param] : null;    
    }
    return vars;
}

Merci d'avance, je suis une petite novice en js ^^

betaWeb

Salut,

Normalement, lorsque tu cliques sur un lien direct, le hash se met en fin d'URL. Est-ce ce que tu veux ?
Je t'avoue ne pas avoir bien compris ton souci ?

Manou Falzone

Auteur

Je voudrais que tous les onglets actifs de la page se trouvent dans mon URL, je m'exprime assez mal ^^
Tu as compris ?

betaWeb

Ah ! Tous ?
C'est assez étonnant comme comportement, tu devrais plutôt récupérer une seule tab active ça sera plus simple.
Sinon, il te faut, à chaque fois qu'une tab est activée, récupérer son attribut href puis le rajouter à ton URL (ex. http://mon-domaine.fr?tabs=informations,characteristics). Il faut évidemment faire la procédure inverse lorsque la tab sera cachée :

function addTabToUrl (ref) {
  var location = window.location.href.split('?'),
      href = location[0],
      tabs = location[1];

  if (!tabs || !tabs.length) {
    return;
  }

  if (tabs && tabs.indexOf(ref) < 0) {
    var parts = tabs.split('=')[1].push(ref);

    window.location.href = window.location.href + '?tabs=' + parts.join(',');
  }
}

$('.myTab').tab('shown.bs.tab', function (e) {
    var ref = $(e.target).attr('href');

    if (!ref || !ref.length) {
        return;
    }

    addTabToUrl(ref);
});

Une fois le lien envoyé, lorsque l'utilisateur ira sur ta page, il faudra parser l'URL, récupérer la référence des tabs actives, puis ajouter la classe 'active' pour les afficher (via la fonction $_GET() que tu as trouvé) :

var refs = $_GET('tabs').split(',');

refs.forEach(function (ref) {
    $('[href="' + ref + '"]', '.tabbable').parent().addClass('active');
});

Ce ne sont que des exemples non testés, je te laisse peaufiner ;)

Manou Falzone

Auteur

C'est une demande particulière du chef de projet, du coup je trouve pas beaucoup de doc sur le net pour faire ça et ayant des skills assez limités, c'est pas facile pour moi.
Je vais essayer de comprendre ton code et l'appliquer.
Merci beaucoup de ta réponse

Passage paramètre dans l'URL

4 réponses