Ajax et url uniques avec Hash

Version imprimable

21/03/2012, 14h19
sebnutt

Ajax et url uniques avec Hash
Bonjour,

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

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

Code:

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

<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 :)
21/03/2012, 18h51
NoSmoking

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

Citation:

Envoyé par sebnutt

Je sais pas si c'est très clair :)

c'est Non !
21/03/2012, 21h24
Bovino

Peut-être un début de réponse : Ajax et le référencement.
22/03/2012, 11h32
sebnutt

Citation:

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=""
22/03/2012, 11h58
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.
22/03/2012, 14h27
sebnutt

Citation:

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:

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

?

où je mets mon hash # dans ce cas ?

Côté HTML :

Code:

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

Côté Javascript :

Code:

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

22/03/2012, 15h29
sebnutt

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

Code:

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:

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

il ne se passe rien.
22/03/2012, 15h47
Loceka

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.
22/03/2012, 15h55
sebnutt

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:

<body onhashchange="listenHash()">
26/03/2012, 11h43
sebnutt

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 !!
27/03/2012, 15h51
Matthieu2000
un début :
Code:

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