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

**ManouWD** · 19/09/2016, 10h59

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 html :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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)

**danielhagnoul** · 19/09/2016, 11h33

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

#

**ManouWD** · 19/09/2016, 16h07

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

**danielhagnoul** · 19/09/2016, 21h55

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 JavaScript :

Sélectionner tout - Visualiser dans une fenêtre à part

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 JavaScript :

Sélectionner tout - Visualiser dans une fenêtre à part

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 );
 
});

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

JavaScript

Discussions similaires

Partager

Partager