Ajax et url uniques avec Hash

**sebnutt** · 21/03/2012, 14h19

Bonjour,

J'ai un div dans ma page, appelé par un évenement click sur un lien.

Code :

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

1
2
3
<div id="mydiv" style="position:absolute; display:none">
	<p>text du div</p>
</div>

le lien

Code :

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

<a href="javascript:;" onclick="$('#mydiv').show().load('script.php')">lien</a>

(sous Jquery)

J'aimerais savoir s'il est possible d'avoir un lien du genre

Code :

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

<a href="script.php" rel="XXXX">lien</a>

pour utliser une hash #index de sorte que l'URL unique du genre http://www.monsite.com/#index permette d'accéder à la page avec le div déjà ouvert et le script.php chargé à l'intérieur.

Je sais pas si c'est très clair

**NoSmoking** · 21/03/2012, 18h51

Bonjour,
j'ai au moins une réponse à ta dernière question

Envoyé par sebnutt

Je sais pas si c'est très clair

c'est Non !

**Bovino** · 21/03/2012, 21h24

Peut-être un début de réponse : Ajax et le référencement.

**sebnutt** · 22/03/2012, 11h32

Envoyé par NoSmoking

Bonjour,
j'ai au moins une réponse à ta dernière questionc'est Non !

pour clarifier, comment obtenir une URL avec une ancre qui me permette, lorsque je charge la page dans mon navigateur, de faire apparaitre mon div ?

par défaut, si je clique sur le lien, l'URL dans la barre d'adresses ne changera pas (à cause du href="javascript:;"). Comment faire pour obtenir une URL différente sachant que je ne peux rien mettre dans le href=""

**Loceka** · 22/03/2012, 11h58

Ben au lieu de passer par une fonction "onclick", tu mets, dans le href, un lien contenant ancre qui aura un sens pour ton script et tu fais le traitement javascript lors du onload.

**sebnutt** · 22/03/2012, 14h27

Envoyé par Loceka

Ben au lieu de passer par une fonction "onclick", tu mets, dans le href, un lien contenant ancre qui aura un sens pour ton script et tu fais le traitement javascript lors du onload.

comment dans ce cas, dois-je rédiger mon href ?

Code :

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

<a href="javascript: $('#mydiv').show().load('script.php')">

?

où je mets mon hash # dans ce cas ?

**Loceka** · 22/03/2012, 15h01

Côté HTML :

Code html :

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

1
2
3
4
5
<body onload="listenHash();">
  <!-- ... -->
  <a href="#mydiv">...</a>
  <!-- ... -->
</body>

Côté Javascript :

Code :

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

1
2
3
4
5
6
function listenHash() {
  var divSelectionne = window.location.hash;
  if (divSelectionne && divSelectionne.length > 0) {
    // ton traitement.
  }
}

**sebnutt** · 22/03/2012, 15h29

Nickel, ça marche.
Avec un bémol : quand je tape

Code :

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

http://www.monsite.com/#Nom_hash

dans la barre d'URL je me retrouve bien avec mon traitement effectué sur ma page.

par contre quand je clique sur le lien

Code :

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

<a href="#Nom_hash">lien</a>

il ne se passe rien.

**Loceka** · 22/03/2012, 15h47

Effectivement, j'avais pas pensé au fait qu'avec le "hash" il ne recharge pas la page, c'est le navigateur qui fait le traitement.

Au lieu d'utiliser un '#', je te conseille d'utiliser un argument standard ('?display=#mydiv' par exemple).
Du coup c'est window.location.search qu'il faut utiliser.

**sebnutt** · 22/03/2012, 15h55

Adapté à ton code précédent ça donnerait quoi ?
Parce que je viens de tester, sans succès, j'ai du louper un truc.

EDIT : Ca marche si on met :

Code :

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

<body onhashchange="listenHash()">

**sebnutt** · 26/03/2012, 11h43

En résumé, pour ceux qui comme moi ont eu du mal à comprendre le fonctionnement :

- on vérifie la présence d'une ancre dans l'URL
- s'il y a une ancre, en fonction de la valeur de celle-ci, on éxécute un code JS qui permet d'afficher le DIV voulu et / ou son contenu, etc...

Une fois qu'on a compris le principe, c'est bien plus simple.
Merci à toi !!

**Matthieu2000** · 27/03/2012, 15h51

un début :

Code :

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

1
2
if(window.location.href.indexOf("#")>0){
...

je te conseille de mettre des paramètres dans la fonction, c'est plus sur comme fonctionnement

Ajax et url uniques avec Hash

JavaScript

Discussions similaires

Partager

Partager