[résolu] Réécriture d'URL : souci de script jQuery

Tomek · août 2013

Bonjour,

J'ai mis en place un script jQuery très simple pour afficher différents blocs en cliquant sur des liens (non sans avoir au préalable mis en place la lib. jQuery). Voici le script en question :

[== Indéfini ==]
$(document).ready(function(){

    $(".tabContent").each(function(i){
        this.id = "#" + this.id;
    });

    $(".tabContent").not(":first").hide();

    $("#tabmenu a").click(function() {
        var idTab = $(this).attr("href");
        $(".tabContent").hide();
        $("div[id='" + idTab + "']").fadeIn();
        return false;
    });    

});

Sans activer la réécriture d'URL, ce script fonctionne sans souci. Dès que j'active et recharge la page avec la bonne URL, le 1er bloc par défaut s'affiche, si je clique pour visualiser les autres blocs, ils ne s'affichent pas. De quoi cela peut-il provenir ? Merci !

Frédéric · août 2013

Bonjour Tomek,
Faut modifier ton appel d'encre avec la fonction de réécriture, a savoir:

[== JavaScript ==]
$(document).ready(function(){

    $(".tabContent").each(function(i){
        this.id = "#" + this.id;
    });

    $(".tabContent").not(":first").hide();

    $("<?php $plxShow->urlRewrite('#tabmenu a') ?>" />").click(function() {
        var idTab = $(this).attr("href");
        $(".tabContent").hide();
        $("div[id='" + idTab + "']").fadeIn();
        return false;
    });    

});

Il faut que ce script soit entre les balises <script> dans ton template.

Tomek · août 2013

Merci Frédéric, j'ai testé, mais du coup le script ne fonctionne plus, le contenu des différents blocs est visible tout le temps. Doit y avoir un souci quelque part (oui, je cherche aussi

).

Jerry Wham · août 2013

Je pense que tu fais erreur Frédéric. Le script ne cible pas une ancre mais un id.
Vérifie l'adresse de jquery dans ton code. Le site est-il en ligne (ou une démo) pour qu'on puisse plus facilement t'aider ? Que dit la console javascript ?

Frédéric · août 2013

Exacte Jerry Wham,

Pour le coup je lui est proposé une solution en css pour afficher/cacher un div, a voir s'il l'a fait.
J'avais le même problème que lui donc le code doit avoir une coquille quelque part mais je vois pas ou

Tomek · août 2013

Hello Jerry,

L'appel à jQuery est ok, pas de souci là-dessus.
La console ne dit hélas rien.

Je t'envoie le lien par email (site non ouvert encore)

Jerry Wham · août 2013

Il y a une erreur dans les balises fermantes </figcation> au lieu de </figcaption>. Peut-être que ça vient de là (le DOM est très sévère parfois...).

Jerry Wham · août 2013

PS: nickel ton site au passage. Chapo...
Essaie de mettre ça :

$(".tabContent").children().not(":first").click(function() {...

Tomek · août 2013

Jerry Wham a écrit:

Il y a une erreur dans les balises fermantes </figcation> au lieu de </figcaption>. Peut-être que ça vient de là (le DOM est très sévère parfois...).

Oh b***** ! Le con je fais. En plus j'avais vu l'alerte dans le code source...

Bon sinon j'ai testé le code que tu as fourni, ça ne fonctionne pas plus, hélas. Merci pour le coup de main !

Tomek · août 2013

C'est un truc que je trouve étrange tout de même : ce script fonctionne nickel sur les autres CMS que j'utilise (et ce même en Rewrite URL)... c'est donc dû à PluXml, non ?

Stéphane · août 2013

Bonjour Tomek
Peux-tu stp m'envoyer un lien pour que je puisse regarder ?

Tomek · août 2013

Grâce à Stéphane que je remercie beaucoup d'avoir pris le temps de regarder et de trouver la solution, voici donc le script qui fonctionne :

[== JavaScript ==]
<script type="text/javascript">$(document).ready(function(){

    $(".tabContent").each(function(i){
        this.id = "#" + this.id;
    });

    $(".tabContent").not(":first").hide();

    $("#tabmenu a").click(function() {
        var idTab = $(this).attr("href");
var n=idTab.indexOf("#");
var m=idTab.substring(n);
        $(".tabContent").hide();
        $("div[id='" + m + "']").fadeIn();
        return false;
    });    

});</script>

Jerry Wham · août 2013

Bien vu l'aveugle. Il fallait enlever le # dans l'appel de l'attribut id de la div, c'est bien ça ?

Stéphane · août 2013

le contenu des id des menus est de la forme id="#val1"
la réécriture d'url vient modifier les id à cause du # pour donner: id="http://monsite.com/page.php#val1";
pour que le jquery fonctionne il faut nettoyer le contenu de l'id pour retrouver: #val1
c'est un effet de bord du fonctionnement de la réécriture d'url de PluXml

Frédéric · août 2013

Rhaaa je me disais bien 'Tien encore un cas pour le rewrite de pluxml' !!!
M'enfin pour ce genre de chose ca ce fait aisément en css

cfdev · mars 2015

Salut,
je me suis bien servi de ce post pour résoudre le soucis de Jquery avec la réécriture d'url seulement comme je suis débutant dans la matière, j'ai un soucis:
voici mon code

[== JavaScript ==]
	// Event sur click d'un lien de la section footer
	$("footer a").click(function(e) {
		e.preventDefault();
		
		// Isole l'ancre id
		var idTab = $(this).attr("href");
		var n=idTab.indexOf("#");
		var m=idTab.substring(n);
		
		//Tests du lien
		//pour agir sur le scrolling		
		if(m === "#top"){
			var target = this.hash,
			$target = $(target);

			$('html, body').stop().animate({
				'scrollTop': $target.offset().top
			}, 900, 'swing', function () {
				window.location.hash = target;
			});
		}
    });

ça fonctionne super mais du coup tout les liens de la section footer ne fonctionne plus... surement un soucis d’événement ?
un petit coup de main ?

Stéphane · mars 2015

@cfdev: tu cherches à faire quoi avec ton code ?

cfdev · mars 2015

Je cherche à faire bouger l’ascenseur pour faire un défilement

Jerry Wham · mars 2015

C'est normal que ça ne fonctionne pas car tu fais un prevent default sur tous les liens du footer en faisant ça (ce qui annule la fonction par défaut du lien) :

$("footer a").click(function(e) {
		e.preventDefault();

Donc après ton

if(m === "#top"){...}

il faut que tu ajoutes un else qui rétablit les liens non concernés par cette condition :

else {
var target = this.hash,
window.location.hash = target;

}

Je n'ai pas testé mais ça devrait fonctionner...

[résolu] Réécriture d'URL : souci de script jQuery

Réponses