[AJAX] Ajax et onclick sur un href

Bonjour

Je bute sur ce problème:

j'ai une fonction ajax qui me permet d'afficher une div affichant des éléments selon les paramètres envoyés.

Jusqu'à présent ça fonctionne parfaitement avec un élt du formulaire select :

Code:

---

1 2 3

<select name="nbreRep" id="nbreRep" onchange="triRep()"> <option value="5">lien 1</><option value="10">lien 3</> </select<

---

Grace à l'évènement onchange j'appel une fonction triRep() contenu dans le code AJAX.

mon problème actuelement c'est de mettre un évènement onclick="fonction()" exemple:

Code:

---

<a href="page.php?tr=2" onclick="fonction()">lien</>

---

et les résultats dans la fonction doivent s'afficher dans une div sur la même page.

Mais quant on click au lieu d'afficher la page : page.php dans la div il ouvre pluto une autre page.

Comment écrire ce lien pour faire appel à la fonction ajax?

Merci de m'aider

Code:

---

<a href="page.php?tr=2" onclick="fonction();return false">lien</a>

---

:roll:

la page externe est toujours chargé.

Je m'explique mieux

dans la fonction AJAX la page appeler doit s'afficher dans une div avec id zone <div id="zone"></div>

dans la fonction AJAX indique la DIV :

Code:

---

document.getElementById('zone').innerHTML...

---

le lien est de la forme :

Code:

---

<a href="page.php?rp=2" onclick="fonction();return false" id="LIEN">lien</>

---

et la fonction AJAX recevant les paramètres:

Code:

---

1 2 3

var rp=encodeURIComponent(document.getElementById("LIEN").value) xhr.open("GET","page.php?rp="+rp,true); xhr.send(null);

---

au clique une page externe s'affiche au lien de s'afficher dans la div ZONE

Code:

---

var rp=encodeURIComponent(document.getElementById("LIEN").value)

---

Tu récupères le value d'une balise <a> :roll:

je doit dire que j'ai pas bien compris ta dernière reponse.

Oubien dois-je remplacer LIEN par la balise href ?? comment m'y prendre??

Code:

---

1 2 3

var rp=encodeURIComponent(document.getElementById("LIEN").value) xhr.open("GET","page.php?rp="+rp,true); xhr.send(null);

---

Une balise <a> n'a pas de value... si tu veux récupérer le href, c'est

Code:

---

var rp=encodeURIComponent(document.getElementById("LIEN").href)

---

j'ai remplacer par href et ça marche mais il récupère la totalité du lien ce qui me donne rien dans la requête

Code:

---

<a href="page.php?rp=2" onclick="fonction();return false" id="LIEN">lien</>

---

Quand je veux récuperer la valeur de rp en GET ou lien de la valeur 2 il me donne tout le lien y compris l'adresse du serveur :

Code:

---

http://localhost/home/test/page.php?rp=2

---

c'est donc un QUERY WAS EMPTY qui sort

Bonjour,

Citation:

---

Envoyé par Interface

j'ai remplacer par href et ça marche mais il récupère la totalité du lien ce qui me donne rien dans la requête

---

il suffit d'aller le chercher là où il se trouve :

Code:

---

1 2	var rp=encodeURIComponent(document.getElementById("LIEN").href); alert(rp.split("=")[1]);

---

A+

merci pour le tuyo

mais je n'arrive pas à récupérer la valeur de rp.

Code:

---

1 2 3 4

var rp=encodeURIComponent(document.getElementById("LIEN").href) var rp= (rp.split("=")[1]; xhr.open("GET","page.php?rp="+rp,true); xhr.send(null);

---

je c pas si je my prend mal.

Code:

---

1 2 3

var rp=document.getElementById("LIEN").href.split('=')[1]; xhr.open("GET","page.php?rp="+rp,true); xhr.send(null);

---

Code:

---

1 2 3

var rp=encodeURIComponent(document.getElementById("LIEN").href) xhr.open("GET","page.php?rp="+rp.split("=")[1],true); xhr.send(null);

---

A+

Citation:

---

Envoyé par E.Bzz

Code:

---

1 2 3

var rp=encodeURIComponent(document.getElementById("LIEN").href) xhr.open("GET","page.php?rp="+rp.split("=")[1],true); xhr.send(null);

---

A+

---

Ben non E.Bzz, le encodeURIComponent transforme le '=', tu peux plus faire de split dessus ;)

Arf !
Le principe y était :aie:

Je pensais pas que le "=" était impacté ....

A+

Problème

mes liens sont de la forme :

Code:

---

1 2 3

<a href="page.php?rp=2" >lien1 </> <a href="page.php?rp=3" >lien2 </> <a href="page.php?rp=4" >lien5 </>

---

avec

Code:

---

1 2 3

var rp=document.getElementById("LIEN").href.split('=')[1]; xhr.open("GET","page.php?rp="+rp,true); xhr.send(null);

---

la requête semble récupérer seulement le lien 1 dont le rp=2 selon l'exemple comme s'il ne voyait plus les autres rp quand je clique sur les autres liens. Donnant ainsi un même résultat quelque soit le lien utilisé.

et avec

Code:

---

1 2 3

var rp=encodeURIComponent(document.getElementById("LIEN").href) xhr.open("GET","page.php?rp="+rp.split("=")[1],true); xhr.send(null);

---

je n'ai aucun resultat.

Citation:

---

Envoyé par Interface

la requête semble récupérer seulement le lien 1 dont le rp=2 selon l'exemple comme s'il ne voyait plus les autres rp quand je clique sur les autres liens.

---

Ton code cible uniquement le <a> ayant comme id "LIEN".
Il ne traite donc qu'un seul lien (et toujours le même).
Dans ton exemple HTML ci-dessus, aucune balise <A> ne possède d'id ... :koi:

A+

Code:

---

<a href="page.php?rp=2" >lien1 </>

---

</a> serait mieux que </> pour fermer les balises :roll:
Ensuite, tu as combien d'éléments avec l'id "LIEN" ???

j'ai un maximum de 60 liens

Citation:

---

Envoyé par Interface

j'ai un maximum de 60 liens

---

On peut voir le véritable code HTML de ces liens ?

A+

Code:

---

1 2 3 4 5 6 7 8 9

while(requette) {?> <a href="page.php?rp=1" id="LIEN" onclick="load(); return false">lien1</a> <a href="page.php?rp=5" id="LIEN" onclick="load(); return false">lien7</a> <a href="page.php?rp=6" id="LIEN" onclick"load(); return false">lien8</a> ............. ............. ........ <?php}

---

comme vous pouvez constater que le id est toujours le même.

Citation:

---

Envoyé par Interface

comme vous pouvez constater que le id est toujours le même.

---

Un id doit être unique dans la page ;)

Utilise un compteur dans ta boucle, que tu concatènes au "LIEN" pour générer des id uniques ...
Tu pourras le passer en paramètre à ta fonction

Code:

---

onclick="load(this.id);"

---

A+

je vois ce que tu veux dire mais suis pas trop calé ajax alors un petit coup de pouce STP

Citation:

---

Envoyé par Interface

je vois ce que tu veux dire mais suis pas trop calé ajax alors un petit coup de pouce STP

---

Cette partie là ne concerne pas Ajax : il s'agit de ta boucle PHP dans laquelle tu dois générer le compteur ...
Et pour le coup, en PHP, tu es sûrement plus calé que moi ... enfin, je te le souhaites :mouarf:

A+

oui en PHP je crée des id unique par exemple LIEN1 LIEN2 LIEN3 .....

mais c'est comment récupérer chaque lien dans la la fonction load()

Code:

---

1 2 3

var qc=encodeURIComponent(document.getElementById("LIEN").href.split('=')[1]) xhr.open("GET","styles/eDETAIL.php?rp="+qc,true); xhr.send(null);

---

Citation:

---

Envoyé par Interface

mais c'est comment récupérer chaque lien dans la la fonction load()

---

Citation:

---

Envoyé par E.Bzz

Tu pourras le passer en paramètre à ta fonction

Code:

---

onclick="load(this.id);"

---

A+

---

Puis dans la fonction elle-même, tu n'as plus qu'à utiliser ce nouveau paramètre (à ajouter dans la déclaration de ta fonction, bien sûr) à la place du "LIEN" actuel :

Code:

---

1 2 3 4

function load(id_cible) { var qc=encodeURIComponent(document.getElementById(id_cible).href.split('=')[1]) ..... }

---

A+

:calim2: c'est le brouillard total

si je reste dans mon contexte:

Code:

---

1 2 3 4 5 6 7 8 9 10 11

$i=1; while(requette) {?> <a href="page.php?rp=1" id="<?php echo "LIEN$i";?>" onclick="load(this.id); ">lien1</a> <a href="page.php?rp=3" id="<?php echo "LIEN$i";?>" onclick="load(this.id); ">lien7</a> <a href="page.php?rp=4" id="<?php echo "LIEN$i";?>" onclick="load(this.id); ">lien5</a> ............. ............. ........ <?php $i++;}

---

et dans la fonction

Code:

---

1 2 3 4

function load(LIEN) { var qc=encodeURIComponent(document.getElementById(LIEN).href.split('=')[1]) ..... }

---

Excusez moi mais je me retrouve pas du tout :aie:

Il ne faut plus utiliser le encodeURIComponent() d'après ce qu'à dit Bovino ...
Et laisse le "return false;" à la fin du onclick, sinon tu cours au changement de page intempestif ;)

A+

:salut:

Code:

---

<a href="page.php?rp=1" id="<?php echo "LIEN".$i;?>" onclick="load(this.id);return false; ">lien1</a>

---

Ma requette va afficher :

Code:

---

1 2 3

<a href="page.php?rp=1" id="LIEN1" onclick="load(this.id); ">lien1</a> <a href="page.php?rp=3" id="LIEN2" onclick="load(this.id); ">lien7</a> <a href="page.php?rp=4" id="LIEN3" onclick="load(this.id); ">lien5</a>

---

Alors que dans la fonction c'est juste LIEN et nom LIEN suivi du numéro..

si seulement tu peux être plus precis

Citation:

---

Envoyé par Interface

si seulement tu peux être plus precis

---

J'ai essayé de l'être autant que possible ... mais c'est pas facile :aie:

Relis les derniers posts : il y a eu des adaptations en fonction de tes modifs ...

A+

Citation:

---

Envoyé par Interface

Ma requette va afficher :

Code:

---

1 2 3

<a href="page.php?rp=1" id="LIEN1" onclick="load(this.id); ">lien1</a> <a href="page.php?rp=3" id="LIEN2" onclick="load(this.id); ">lien7</a> <a href="page.php?rp=4" id="LIEN3" onclick="load(this.id); ">lien5</a>

---

Alors que dans la fonction c'est juste LIEN et nom LIEN suivi du numéro..

si seulement tu peux être plus precis

---

:nono:
Il ne faut pas confondre un paramètre de fonction et la valeur qu'il représente.
Le paramètre LIEN correspondant à this.id, la fonction récupèrera bien la valeur correcte ;)

Bonsoir

je vais implementer tout ça et vous tiendrai informer.

Merci pour vos contributions