Discussion :

[Overstone]

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 :

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
<?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 ...

[Navyel]

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

Fais le ainsi:

Code :

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

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 :

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

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 !

[Overstone]

Salut,

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

voici se que j'ai mijoté ^^

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

[mikaoul]

Salut,

Quel est le message d'erreur ?

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

Code :

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

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.

[Navyel]

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 :

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

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

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

Code :

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

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 :

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

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.

[Overstone]

Salut,

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

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

[mikaoul]

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

[Navyel]

remplace tout simplement cette ligne :

Code :

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

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

par cette ligne :

Code :

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

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

(avec un "=" )

[Overstone]

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

[mikaoul]

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

[Navyel]

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

Code :

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

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);
		}
	}

[Overstone]

J'ai réussi !! Merci de votre aide !!

Par contre 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
}

[Overstone]

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 Oui je suis compliqué !!

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

Code :

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

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 :

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

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

<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

[mikaoul]

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 :

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

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

[Overstone]

Salut

En faite ma boucle commence comme sa :

Code :

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

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

Et j'affiche chaque donnees comme sa :

Code :

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

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

[Overstone]

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 :

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

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

Mon get element ID :

Code :

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

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

Mon code JAVA :

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

[mikaoul]

et pourquoi ne pas mettre directement

document.getElementById(pseudo).className...

[Overstone]

Merci Sa marche !!!! mikaoul à trouvé c'était tout simple mais j'ai mis plus de 3h à chercher .... comme quoi