[AJAX] Appeller une page php en Ajax pour action sur Mysql

Bonjour,

J'aimerais pouvoir g�rer mon admin en AJAX, j'ai r�ussi � cr�er l'interface en php, principalement de la gestion de base de donn�e (supprimer,d�placer ...)

mais le rechargement syst�matique de la page apr�s chaque action prend trop de temps pour ce que je veus faire.

J'aimerais donc simplement pouvoir appeller une page php en AJAX sans avoir � recharger ma page.

Voici mon code actuel :

Code:

---

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18

<?php if ($_GET['date'] != NULL) { // envoi vers demande $date = $_GET['date']; mysql_connect("localhost", "root", ""); mysql_select_db("mabase"); mysql_query("INSERT INTO corbeille SELECT * FROM demande WHERE date='$date'"); // suppresion mysql_query("DELETE FROM demande WHERE date='$date'"); mysql_close(); Header('Location: affiches.php'); } else { Header('Location: affiches.php'); } ?>

---

Pour faire l'action j'ai simplement cr�� un lien :
<a href="supprimer.php?date=<?php echo $donnees['date']; ?>" title="">Supprimer</a>

Est-il donc possible de faire la m�me chose en AJAX, j'ai beau chercher de partout, je ne trouve pas comment faire simple ... :oops:

En fait ton lien ne doit plus appeller une page php mais ta fonction ajax.

Fais le ainsi:

Code:

---

1 2	<a href="#" onclick="supprimer('<?php echo $donnees['date']; ?>')">Supprimer</a>

---

Apr�s, tu cr�er une fonction javascript supprimer() auquel tu passe la date en param�tre :

Code:

---

1 2 3 4 5

function supprimer(date) { /*ici tu créer ton objet XmlHttpRequest et tu fait appel à ta page php grâce à la méthode open (tu passe ta date en mode GET (1er paramètre), avec une url du style "supprimer.php?date="+date (2eme paramètre), en asynchrone (le 3eme paramètre à "true"), tu envoie ta requete (send) et tu traite la réponse*/ }

---

Pour la cr�ation de l'objet XmlHttpRequest et son traitement, tu applique ce que tu verras dans n'importe quel tutorial ajax. fais des essais, ca devrait marcher !

Salut,

J'ai suivi tes explications mais au lieu de faire l'action d�ris� j'ai un message d'erreur :bug:

voici se que j'ai mijot� ^^

Code:

---

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20

// Code JavaScript function supprimer() { xmlHttp = GetXmlHttpObject(); if (xmlHttp == null) { alert("Votre navigateur ne supporte pas les requêtes HTTP."); return false; } var url="supprimerajax.php"; // le script à appeller // fonction à exécuter dès réception de la réponse xmlHttp.onreadystatechange = function(){ if (xmlHttp.readyState == 4 || xmlHttp.readyState == "complete") alert(xmlHttp.responseText); //on affiche ce que le serveur renvoie } xmlHttp.open("GET", url, true);//envoi en GET asynchrone xmlHttp.send(null); return true; } </script>

---

et dans ma page effacer.php

<?php
if ($_GET['date'] != NULL)
{
// envoi vers demande
$date = $_GET['date'];
mysql_connect("localhost", "root", "");
mysql_select_db("eckopland2");
mysql_query("INSERT INTO corbeille SELECT * FROM demande WHERE date='$date'");
// suppresion
mysql_query("DELETE FROM demande WHERE date='$date'");
mysql_close();


J'ai du faire une erreur mais o� ????

ps: J'ai peu tout de m�me profiter d'ajax pour le message d'erreur lol

Salut,

Quel est le message d'erreur ?

Premi�rement, je remarque tu envoie "null" � ta page php

Code:

---

xmlHttp.send(null);

---

donc ton code ne s'ex�cutera pas.

Deuxi�ment, dans ta page php, tu ne renvoie rien.
Pour renvoyer quelque chose, il faut faire un "print ...".

Peut �tre que ton erreur vient de l� que dans lorsque tu ne renvoie rien responseText renvoie null.

Alors plusieurs remarques sur ton code :

d�j�, pourquoi tu met une url "supprimerajax.php" si ton fichier s'appelle "effacer.php"?

De plus n'oublies pas de faire passer la variable date en param�tre dans ton url : genre :

Code:

---

1 2	var url="supprimerajax.php?date"+date;

---

de m�me n'oublie pas de faire passer en date dans ta fonction supprimer() :

Code:

---

1 2	function supprimer(date)

---

ensuite dans l'ordre tu dois faire appel � xmlHttp.open (pour appeller la page php), puis � xmlHttp.onreadystatechange (la tu fais la fonction traitant la r�ponse), et enfin � xmlHttp.send(null) (laisse le null, c'est bien).

dans ta fonction correspondant � ton onreadystatechange, fais plutot ainsi :

Code:

---

1 2 3 4 5 6 7 8

if (xmlHttp.readyState == 4) { if (xmlHttp.status == 200) { alert(xmlHttp.responseText); } }

---

Cela dit, effectivement �a n'affichera rien car ton fichier php ne fait aucun affichage. Mais tes op�rations sql devraient �tre r�alis�es.

Si t'as toujours une erreur, tiens moi au courant.

Salut,

Merci de votre aide, j'ai suivi vos indications, j'ai donc cod� sa :

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 25 26 27 28 29

<script type="text/javascript"> // Code JavaScript function supprimer(date) { xmlHttp = GetXmlHttpObject(); if (xmlHttp == null) { alert("Votre navigateur ne supporte pas les requêtes HTTP."); return false; } var url="supprimer.php?date"+date; // le script à appeller // fonction à exécuter dès réception de la réponse xmlHttp.onreadystatechange = function (){ if (xmlHttp.readyState == 4) { if (xmlHttp.status == 200) { alert(xmlHttp.responseText); } } xmlHttp.open("GET", url, true);//envoi en GET asynchrone xmlHttp.send(null); return true; } } </script>   <a href="#" onclick="supprimer('<?php echo $donnees['date']; ?>')">Supprimer</a>

---

Mais mon lien ne r�pond plus :aie:
Je ne comprend vraiment pas, ma base de donn�e ne bouge pas, c'est si dur que sa !!!

Si vous avez la moindre id�e ??? :roll:

Ton lien ne r�pond pas ? Tu veux dire que tu n'a pas ton message d'alerte (responseText).

Essaie de mettre � la place de alert(xmlHttp.responseText), alert("ok");

Essaie aussi de mettre � la place <a href="#" onclick="supprimer('<?php echo $donnees['date']; ?>')">Supprimer</a>,

<a href="#" onclick="supprimer('uneDate')">Supprimer</a> o� une date est une date pr�sente dans ta base.

Cela te permettra de voir d'o� vient le probl�me.
Bon courage

remplace tout simplement cette ligne :

Code:

---

var url="supprimer.php?date"+date;

---

par cette ligne :

Code:

---

var url="supprimer.php?date="+date;

---

(avec un "=" )

Voila je viens de le faire mais sa ne marche toujours pas et j'ai aucun message d'erreur sur firefox ??? :cry:

Dans la console d'erreur non plus il n'y a rien ?

Met la m�thode open avant la m�thode onreadystatechange !

Code:

---

1 2 3 4 5 6 7 8 9 10

xmlHttp.open("GET", url, true);//envoi en GET asynchrone xmlHttp.onreadystatechange = function (){ if (xmlHttp.readyState == 4) { if (xmlHttp.status == 200) { alert(xmlHttp.responseText); } }

---

J'ai r�ussi !! :yaisse2: Merci de votre aide !!

Par contre :aie: je dois recharger ma page pour avoir mon r�sultat donc c'est bien mais l'AJAX n'a plus trop de sens :?

Comment faire pour ne pas � avoir recharger la page ???

Voila mon code QUI MARCHE :

<script type="text/javascript">
// Script pour suppresion AJAX

function GetXmlHttpObject()
{
var objXMLHttp = null;
if (window.XMLHttpRequest)
objXMLHttp=new XMLHttpRequest();
else if (window.ActiveXObject)
objXMLHttp=new ActiveXObject("Microsoft.XMLHTTP");
return objXMLHttp;
}

function supprimer(pseudo)
{
var xmlHttp = GetXmlHttpObject();
if (xmlHttp == null){
alert("Votre navigateur ne supporte pas les requ�tes HTTP.");
return false;
}
var url="include/supprimera.php?pseudo="+pseudo; // le script � appeller
xmlHttp.open("GET", url, true);//envoi en GET asynchrone
xmlHttp.send(null);
// fonction � ex�cuter d�s r�ception de la r�ponse
xmlHttp.onreadystatechange = function (){
if (xmlHttp.readyState == 4){
if (xmlHttp.status == 200){
alert("ok");
}
}
return true;
}
alert(pseudo);
}
</script>

<a href="#" onclick="supprimer('<?php echo $donnees['perso_pseudo']; ?>')">Supprimer</a>

<?php
}

Petite parenth�se :

J'ai tenter de faire un style sur mon bouton pour annoncer que l'action php appel� par javascript � bien �t� r�alis�, a fin de savoir ce qui � �t� fait dans mon admin.

seulement le style marche mais il s'applique que sur la derniere fiche de ma base de donn�e :roll: Oui je suis compliqu� !!

En clair j'ai sa � la fin de mon code javascript :

Code:

---

1 2 3 4 5 6 7 8 9 10

xmlHttp.onreadystatechange = function (){ if (xmlHttp.readyState == 4){ if (xmlHttp.status == 200){   } } return true; } document.getElementById("<?=$pseudo?>") .className="vert"; }

---

Avec en style css :

Code:

---

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17

.rouge { visibility: visible; font-size : 200%; background-color: #C61800; width: 300px; height: 40px; }   .vert { visibility: visible; font-size : 200%; background-color: #1B7302; width: 300px; height: 40px; }

---

Et enfin mon bouton (styl�)

Code:

---

<div><a href="#" id="<?php echo $pseudo ?>" class="rouge" onclick="supprimer('<?php echo $donnees['perso_pseudo']; ?>')">supprimer</a></div>

---

Quand je clique tout marche au niveau de ce que je veus faire avec PHP, mais mon style (sur le bouton) ne s'applique pas sur le bouton concern� mais sur le dernier de la liste.

Pour �tre plus clair dans mon admin j'ai la repr�sentation de ma base de donn�e avec apr�s un lien SUPPRIMER et j'aimerais que mon style ne s'applique qu'au lien concern�.

Mon probleme est vraiment pas facile � expliquer !! ?? j'espere que vous aurez compris, sinon ... et bien je re explique

Si j'ai bien compris, si ta page d'admin tu as une liste d'�l�ments et apr�s chaque �l�ment il y a un bouton supprim�.

Tes �l�ments tu les charges par une boucle en php du style

Code:

---

1 2 3

for(....) print $liste[$i]. "bouton supprimer";

---

La variable perso_pseudo � la m�me valeur que l'id ?
Si c'est le cas tu peux directement utiliser le param�tre pseudo_perso dans ta fonction supprimer et faire document.getElementById(pseudo_perso)....

Voil� je suis pas s�r t'avoir �t� bien clair :?

Salut

En faite ma boucle commence comme sa :

Code:

---

1 2	while ($donnees = mysql_fetch_array($reponse) ) {

---

Et j'affiche chaque donnees comme sa :

Code:

---

Date : <?php echo $donnees['date']; ?><br>

---

Je ne vois vraiment pas comment faire donc, il faudrait que chaq'un de mes DIV soit unique en faite, associ� a mon bouton SUPPRIMER ????

j'ai r�ussi a rendre l'id de mes div unique (reprenant le pseudo de leur fiche) mais sa ne marche toujours pas et dans ma source les div sont pourtant bien unique :(

Mes div :

Code:

---

<div class="vert" id="<?=$pseudo?>">Veuillez patienter...</div>

---

Mon get element ID :

Code:

---

document.getElementById("<?=$pseudo?>").className="rouge";

---

Mon code JAVA :

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 25 26 27 28 29 30 31 32 33 34 35 36 37

<script type="text/javascript"> // Script pour suppresion AJAX   function GetXmlHttpObject() { var objXMLHttp = null; if (window.XMLHttpRequest) objXMLHttp=new XMLHttpRequest(); else if (window.ActiveXObject) objXMLHttp=new ActiveXObject("Microsoft.XMLHTTP"); return objXMLHttp; }   function supprimer(pseudo) { var xmlHttp = GetXmlHttpObject(); if (xmlHttp == null){ alert("Votre navigateur ne supporte pas les requêtes HTTP."); return false; } var url="include/supprimera.php?pseudo="+pseudo; // le script à appeller xmlHttp.open("GET", url, true);//envoi en GET asynchrone xmlHttp.send(null); // fonction à exécuter dès réception de la réponse xmlHttp.onreadystatechange = function (){ if (xmlHttp.readyState == 4){ if (xmlHttp.status == 200){   } } return true; } document.getElementById("<?=$pseudo?>").className="rouge";   }   </script>

---

Je rappelle que l'ensemble est contenu dans une boucle while ($donnees = mysql_fetch_array($reponse) )

Maintenant quand je clique sur le bouton concern�, il affiche le style que sur la derniere fiche mais pas sur la fiche ou j'appuit ?????

:traine:

et pourquoi ne pas mettre directement

document.getElementById(pseudo).className...

Merci :yaisse2: Sa marche !!!! mikaoul � trouv� c'�tait tout simple mais j'ai mis plus de 3h � chercher .... comme quoi :king:

:resolu: