Discussion :

[ccsuperstar]

Bonjour à tous,

Je dois réaliser un script pour un vote via un lien html, et je dois le faire en ajax et javascript à cause du cache sur le site.
Voici mon brief

En cliquant sur un bouton/picto de notation "utile" ou "inutile" un javascript est déclenché.

Le javascript lance une page en ajax avec en parametre url l'id de l'avis.

La page lancée par l'ajax :

- vérifie si un avis n'a pas déjà été inséré pour cette id d'avis, ce jour et avec cette adresse ip

L'ajax doit récupérer le contenu de la page qui doit retourner false si un vote a été trouvé et true dans le cas contraire.

Si un enregistrement est trouvé une alerte javascript avertit l'internaute qu'il y a déjà eu un avis déposé dans les dernières 24H.

Si ce n'est pas le cas, un enregistrement est placé dans la table `avis_note`.
Il contient l'id de l'avis, le type (produit/service), la date & heure, l'ip de l'internaute et son vote (utile/inutile)
Une alerte javascript remercie l'internaute pour son vote.

Pour le formulaire soumis par un lien html et un onclick="monform.submit();", c'est bon, mais après je bloque.

Si vous avez des idées

Merci d'avance

[DoubleU]

En fait, tu ne devrais pas utiliser de formulaire mais plutôt un onclick sur ton bouton/picto qui déclencherait une requête Ajax contenant l'avis que l'utilisateur veut tenter d'ajouter.

Coté serveur, tu récupères l'avis, fait les traitement qui vont bien et renvoie en guise de réponse true ou false selon le cas. Ensuite, quand javascript récupère la réponse à sa requête Ajax, tu affiches ton alert en conséquence.

Si tu n'as jamais fait d'Ajax, commence par lire un des tutos du site (ex celui la) et ce que tu cherches a faire va subitement devenir limpide ^^

[ccsuperstar]

Merci pour ta réponse

Effectivement ça m'ide. J'ai pris l'exemple 1 qui me parait être le plus proche de ce que je veux faire mais il y a juste une partie où je ne sais pas quoi mettre:

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
function ajax()
{
    var xhr=null;
 
    if (window.XMLHttpRequest) { 
        xhr = new XMLHttpRequest();
    }
    else if (window.ActiveXObject) 
    {
        xhr = new ActiveXObject("Microsoft.XMLHTTP");
    }
    //on appelle le fichier reponse.txt
    xhr.open("GET", "http://gael-donat.developpez.com/web/intro-ajax/reponse.txt", false);
    xhr.send(null);
 
    alert(xhr.responseText);
}

dans le xhr.open, je place mon fichier avec des variables en parametres que je passe dans la fonction

Mais pour le alert, je ne sais pas par quoi remplacer le responseText...

[funkyy]

Salut

En fait à la place de http://gael-donat.developpez.com/web/intro-ajax/reponse.txt , tu va mettre le lien vers un fichier PHP.

Dans ton fichier PHP tu fais les requêtes qui vont bien et tu place dans un echo ce que tu veux renvoyer au script. Le script traitera la valeur renvoyée par la valeur de xhr.responseText .

Le premier argument de xhr.open te dit la méthode utilisée pour appeler le fichier PHP et le troisième te dit si c'est en mode synchrone ou non.

tu vois ?

[ccsuperstar]

J'ai fait comme ca

fichier .js

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
function ajax(avis_id,note)
{
    var xhr=null;
 
    if (window.XMLHttpRequest) {
        xhr = new XMLHttpRequest();
    }
    else if (window.ActiveXObject)
    {
        xhr = new ActiveXObject("Microsoft.XMLHTTP");
    }
    //on appelle le fichier reponse.txt
    xhr.open("POST", "www4/include/modules/valid_vote.php?avis_id='avis_id'&note='note'", false);
    xhr.send(null);
 
    alert(xhr.responseText);
}

Dans mon fichier php, j'ai des echo, mais lorsque je clique sur mon lien

Code :

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

<a href="#" onclick="javascript:ajax(\''.$avis_id.'\',\'inutile\');" class="lien-bleu">Avis inutile</a>

je n'ai rien dans mon alerte, alors que j'ai fait un echo 'test' dans mon fichier php....

Ca peut être le lien de mon fichier .php qui est mauvais?

[DoubleU]

Il te manque le callback sur onreadystatechange

[ccsuperstar]

comment ca?

J'ai ca

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
function ajax(avis_id,note,type)
{
    var xhr=null;
 
    if (window.XMLHttpRequest) {
        xhr = new XMLHttpRequest();
    }
    else if (window.ActiveXObject)
    {
        xhr = new ActiveXObject("Microsoft.XMLHTTP");
    }
    //on appelle le fichier reponse.txt
    xhr.open("GET", "www4/include/modules/valid_vote.php?avis_id='avis_id'&note='note'&type='type'", true);
    xhr.send(null);
 
    alert(xhr.responseText);
}

quand je lance le fichier php directement, je récupère bien les infos que je dois avoir

Il me manque cette ligne?

Code :

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

1
2
//on définit l'appel de la fonction au retour serveur
    xhr.onreadystatechange = function() { alert_ajax(xhr); };

[DoubleU]

Oui, sauf que bizarrement dans le tuto il manque une partie de cette fonction.

onreadystatechange est appelé à chaque fois que la requete change d'état (requete créée, envoyée, traitée, etc). Le flag qui te permet de savoir dans quel état tu te trouve est readyState .

Comme en général, on veut récupérer le résultat une fois la requete traitée (et pas avant ), on fait :

Code :

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

1
2
3
4
xhr.onreadystatechange = function() { 
   if (xhr.readyState == 4)
       alert_ajax(xhr); 
};

On peut aussi restreindre le traitement suivant si la reponse est ok ou pas grace au flag status

[ccsuperstar]

merci pour toutes ces infos. J'y suis presque, mais je bloque sur un probleme de pur javascript.

Ma fonction a 3 parametres, l'avis_id, le type de vote, et le type de produit
Dasn l'url du fichier que j'appelle ,j'ai donc mis ces parametres, mais il passe le texte, pas les valeurs

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
function ajax(avis_id,note,type)
		{
		    var xhr_object=null;
 
		    if (window.XMLHttpRequest) {
		        xhr_object = new XMLHttpRequest();
		    }
		    else if (window.ActiveXObject)
		    {
		        xhr_object = new ActiveXObject("Microsoft.XMLHTTP");
		    }
			else
			{ // XMLHttpRequest non supporté par le navigateur
			   alert("Votre navigateur ne supporte pas les objets XMLHTTPRequest...");
			   return;
			}
 
		    //on appelle le fichier reponse.txt
		    xhr_object.open(\'GET\', \'../include/modules/valid_vote.php?avis_id=avis_id&note=note&type=type\', true);
 
		    xhr_object.send(null);
 
		    xhr_object.onreadystatechange = function() {
			   if(xhr_object.readyState == 4) alert(xhr_object.responseText);
			}
 
		}

mon lien

Code :

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

<a href="#" onclick="javascript:ajax2(\''.$avis_id.'\',\'inutile\',\''.$type.'\');" class="lien-bleu">Avis inutile</a>';

et dans mes requetes, je me retrouve avec SELECT... WHERE avis_id=avis_id

Qu'est ce qui n'est pas correct?

[funkyy]

/!\ jdébute aussi en ajax

xhr_object.open(\'GET\', \'../include/modules/valid_vote.php?avis_id=avis_id&note=note&type=type\', true);
==>
xhr_object.open("GET", "../include/modules/valid_vote.php?avis_id="+avis_id+"&note="+note+"&type="+type, true);


Il y aussi la manière d'appeler ta fonction dans <a href ...> mais je suis pas super callé là-dessus je préfère me taire haha

[DoubleU]

Code :

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

xhr_object.open('GET', 'valid_vote.php?avis_id=' + avis_id + '&note=' + note + '&type=type', true);

Sinon, il net met pas les parametres...

PS: j'ai enlevé les \ pour que ca soit plus clair, je sais pas si elles doivent rester ou non

[funkyy]

Non non on rajoute \ pour que l'apostrophe qui suit ne soit pas interprétée. C'est pas le cas, donc soit ' soit " seulement.

[ccsuperstar]

Merci pour vos conseils. J'ai réussi à faire ce que je voulais.
Mais j'ai une demande particulière...
A la place d'une fenêtre alerte, il faudrait que je puisse ouvrir une pop-up personnalisable niveau design (car j'ai cherché des scripts pour personnaliser une alert, j'ai trouvé mais je n'ai pas réussi à le faire marcher avec ma fonction ajax)...

Donc j'imagine qu'au lieu de mettre

Code :

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

if(xhr_object.readyState == 4) alert(xhr_object.responseText);

il faut que je change le alert par une autre fonction

Merci pour votre aide

[funkyy]

Yo!
Ba une fois que t'es bien rentré dans le if(xhr.readyState == 4){ ... } , c'est que tu ne touches plus à l'objet xhr, le serveur étant prêt...tu fais donc du pur javascript. Donc fais des tuto de JS ! (je t'aurai répondu si je savais haha).
Bon taff.