Récupérer un href sans attr dans le a

Version imprimable

Bonjour à tous,

Je suis un peu une merde en JS, et on m'a demander de récupérer les href des onglets actifs quelque soit la page de l'application. Pour que je puisse envoyer le link à quelqu'un et qu'il tombe sur le même contenu que moi et qu'au refresh aussi le contenu reste tel quel.

J'ai commencer à faire une page de test avant de commencer dans l'application, et je bloque pour récuper les href, quelqu'un saurait m'éclairer ? Je paye ma bière si tu m'aide ^^

Alors voici mon html (il y a bootstrap et jQuery dans le head normalement) :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
<body>
        <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>
    </body>

Et voici le code js qu'on m'a dit d'utiliser :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
function _GET(param) {
		var vars = {};
		var url = window.location.href;
		var splits = url.split('#');
 
		if(splits.length <= 1)
			return null;
 
		url = splits[1];
		url.replace( location.hash, '' ).replace( 
			/[?&]+([^=&]+)=?([^&]*)?/gi,
			function( m, key, value ) {
				vars[key] = value !== undefined ? value : '';
			}
		);
 
		if (param)
			return vars[param] ? vars[param] : null;	
		return vars;
	}

Mais ensuite ? comment dire qu'il faut que tous les onglets actifs seront stocké dans un tableau et renvoyer dans l'URL ?

(Désolée pour la lisibilité du code, c'est quoi l'icone pour en insérer ? ^^c'est mon premier post)

19/09/2016, 11h33
danielhagnoul

Citation:

(Désolée pour la lisibilité du code, c'est quoi l'icone pour en insérer ? ^^c'est mon premier post)

#
19/09/2016, 16h07
ManouWD

Merci, tu peux m'aider pour le reste ou pas ahah

Récupérer le contenu des attributs href n'est pas un problème, mais je ne comprends pas la question et le lien avec cette fonction bizarre.

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
let tab = [];
 
// enlever .replace( /\#/, "" ) si on veut conserver les #
$( "[href]" ).each( function( i, item ){
	tab.push( item.getAttribute( "href" ).replace( /\#/, "" ) );
});
 
// debug, console, touche F12
console.log( tab );
 
// ["https://code.jquery.com/qunit/qunit-2.0.1.css",
// "http://code.jquery.com/ui/1.11.4/themes/le-frog/jquery-ui.min.css",
// "informations", "characteristics", "owner-informations",
// "photos", "addPhotos"]

On peut ensuite envoyer le contenu de l'array tab par une transaction AJAX :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
// envoi au serveur par une transaction AJAX
let jqXHR = $.get( "monFichier.php", { "data" : tab } );
 
setTimeout( function(){
		// Si l'objet différé existe dans l'état "attendre", 
		// alors exécute la méthode fail()
 
		if ( jqXHR && jqXHR.state() === "pending" ){
			jqXHR.abort();
		}
}, 3000 ); // 3s
 
jqXHR.done( function( data, textStatus, jqXHR ){
		// succès de la transaction, on doit traiter le contenu de data
		console.log( data, textStatus, jqXHR );
 
});
 
jqXHR.fail( function( jqXHR, textStatus, errorThrown ){
		// échec de la transaction, gérer la catastrophe
		console.log( jqXHR, textStatus, errorThrown );
 
});
 
jqXHR.always( function( jqXHR, textStatus ){
		// la transaction est terminée
		// nettoyage
		// exécution d'un code dépendant
		console.log( jqXHR, textStatus );
 
});