[AJAX] Pourquoi ma page se réactualise ?

Version imprimable

12/08/2011, 17h50
Pierrick81

[AJAX] Pourquoi ma page se réactualise ?

Bonjour à tous,

J'ai récupéré ce script pour installer la possibilité de voter sur mon site.
J'ai créé une page de test et tout fonctionne très bien, le vote est pris en compte sans aucune réactualisation de la page.
J'ai même afficher time(), pour voir si ça se réactualisait et ce n'est pas le cas.
Voilà la page de test : Page de test

Par contre lorsque j'insère le script dans le cadre de mon site, lorsque je clique sur une étoile pour voter la page se réactualise !

Voilà un exemple : Exemple

A quoi cela est-il du ?

Merci de votre aide.
12/08/2011, 18h21
Invité

Bonjour,
Vérifie l'ordre d'appel de tes fichiers .js
Certains doivent être appelés avant les autres.

En espérant qu'ils n'entrent pas en conflit les uns avec les autres....
12/08/2011, 18h32
Pierrick81

Merci.

Peux-tu m'en dire un peu plus à ce sujet ?

Sur quoi joue l'ordre d'ouverture des fichiers JS ?

Comment savoir dans quel ordre les inclure ?

Merci d'avance.
12/08/2011, 18h44
Invité

Je ne peux pas tester ta page à ta place ...
12/08/2011, 18h54
Pierrick81

Non ça j'imagine bien :), mais je cherche à comprendre pourquoi tel script devrait être avant tel autre script.

J'ai essayé de déplacer mes 2 scripts JS utilisés dans ce code. Une fois en les mettant en premier, et une autre fois en les mettant en dernier dans le code, et le problème de réactualisation reste le même.

Donc si je comprenais, peut-être que j'arriverai à chercher au bon endroit.

Merci
12/08/2011, 18h59
Bovino

Classiquement, un script défini des fonctions et des appels de fonctions. Tu peux donc avoir la définition d'une fonction dans un script et son appel dans un autre. Du coup, si tu modifies l'ordre et que l'appel d'une fonction se fait avant qu'elle ne soit définie, ben ça marche moins bien :aie:

Ceci dit, dans ton cas, ça ressemble plus à des liens <a> dont l'action par défaut n'a pas été inhibée, par exemple avec un return false dans le code JavaScript appelé lors du clic.
12/08/2011, 19h21
Pierrick81

Merci Bovino. On est peut-être pas loin.
Mais alors ce return false, il faut que je le mette au niveau du lien <a> lorsque je clique sur l'étoile pour voter ?

Par exemple mon lien est comme ça :

Code:

<a href="db.php?j=1&q=652&t=82.237.9.156&c=5" title="1 sur 5" class="r1-unit rater" rel="nofollow">1</a>

Il faut que je rajoute return false ?
Ce qui ferait :

Code:

<a href="db.php?j=1&q=652&t=82.237.9.156&c=5" title="1 sur 5" class="r1-unit rater" rel="nofollow" return false>1</a>

J'ai essayé et ça ne change rien. :cry:

Ce qui est étonnant c'est qu'en fait lorsque je veux insérer un vote, je n'ai juste qu'à rajouter :

Code:

<?php echo rating_bar($valeur['id'],''); ?>

et en fait j'utilise cette même méthode dans mon fichier test et dans mon fichier exemple.
Je dirai plus qu'il y a un conflit mais je ne sais pas trop où !
Merci de votre aide.

Bonjour,

Je ne suis pas allé voir ton site (en fait tu dois nous poster ton code), mais tu devrais faire quelque chose comme ça:

Code:

<a href="db.php?j=1&q=652&t=82.237.9.156&c=5" title="1 sur 5" class="r1-unit rater" rel="nofollow" onclick="fonctionAjax(this.href); return false;">1</a>
Code:

1 2 3 4 5 6 7 8 9 10 function fonctionAjax(url){ var xhr = getXhr() xhr.onreadystatechange = function(){ if(xhr.readyState == 4 && xhr.status == 200){ alert(xhr.responseText); } } xhr.open("GET",url,true); xhr.send(null); }
A+.

Merci andry.aime.
J'ai essayé ta technique mais ça ne fonctionne pas.
J'ai mis la fonction fonctionAjax, dans un des fichiers JS que j'utilise pour cette fonction. C'était bien là qu'il fallait le mettre ?

Vu que tu me demandes le code, le voilà :
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 <?php require('_drawrating.php'); ?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html lang="en" xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8"> <title>Multiple Ajax Star Rating Bars</title> <script type="text/javascript" language="javascript" src="../js/behavior.js"></script> <script type="text/javascript" language="javascript" src="../js/rating.js"></script> <link rel="stylesheet" type="text/css" href="../style/rating.css" /> </head> <body> <?php echo rating_bar('id21',''); echo time(); ?> </body> </html>
Ce code est celui de ma page de test.
Je fais un echo time(); pour être sûr que la page ne se réactualise pas, et effectivement elle ne se réactualise pas. Par contre le vote est bien pris en compte et le résultat du vote s'affiche.

Dans mon site, j'ai remis le require tout en haut du code, puis l'inclusion des scripts et de la page de style, puis j'ai inséré
Code:

1 2 3 <?php echo rating_bar('id21',''); echo time(); ?>
Cela affiche bien le système de vote, mais lorsque je clique dessus la page se recharge en entier.

Si vous avez besoin d'autres parties de mon code, demandez moi, mais mon site commence à être un peu compliqué avec beaucoup d'include et de fonction PHP ainsi que du JS pour la gestion de l'API GoogleMapsV3.

Merci de votre aide.

23/08/2011, 11h21
Pierrick81

Bonjour,

Je reviens vers vous, car j'ai avancé ce matin, pour identifier exactement la ligne qui entrait en conflit et qui fait que la page se réactualise en entier !

Voilà la coupable :

Code:

<BODY onload='showVille(1,"<?php echo $ville;?>")' >

En fait si je retire le onload il n'y a plus de problème.

Mais le hic, c'est que j'ai absolument besoin d'executer cette fonction JS au moment du chargement de la page.
Y a t-il une autre solution ? Le mettre dans une balise SCRIPT ?

Merci de votre aide.
23/08/2011, 11h52
Pierrick81
En fait le problème est résolu tout simplement en ajoutant ces lignes là à la fin de mon fichier avant la balise </BODY>
Code:

1 2 3 <SCRIPT type="text/javascript"> showVille(1,"<?php echo $ville;?>") </SCRIPT>
Tout roule !