[AJAX] Supprimer la ligne en entier

Version imprimable

Bonjour a tous !

Voila je vous est déja embeter parce que je voulais supprimer un produit selon son id ( probleme resolu ;) ) et lorsque qu'on clique sur la croix ( celle qui supprime le produit ) et ben y'a juste la croix qui disparait et non la ligne entiere !

Comment es ce que je peux faire ?
Voila un exemple de ligne que je voudrais supprimer :

http://img176.imageshack.us/img176/4096/ligneph1.jpg

Voici mon code JS :

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
var xhr_object = null;
var xhr_url = 'http://www.only-dev.info/site/formulaire-ajout-produit/suppr.php';
 
function SendGetRequest(supprimer_produit) {
        if ( window.XMLHttpRequest )
        {
   xhr_object = new XMLHttpRequest();   
        } else if ( window.ActiveXObject )
        {
                xhr_object = new ActiveXObject( 'Microsoft.XMLHTTP' );   
        } else
        {
                alert( 'Votre navigateur ne supporte pas les objets XMLHTTPRequest...' );   
                return;
        }
        var suppr = 'supprimer_produit='+escape(supprimer_produit);
 
        xhr_object.onreadystatechange = supprimer;
 
        xhr_object.open('POST', xhr_url, false);
 
        xhr_object.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
 
        xhr_object.send(suppr);
}
 
function supprimer() {
        // Sur le retour de la requete, on teste son état
        if ( xhr_object.readyState == 4 && xhr_object.status == 200) {
 
                // On injecte notre retour dans la DIV prevue a cet effet
                document.getElementById('produit').innerHTML = xhr_object.responseText;
        }
}

merciiiiiii

05/05/2007, 13h11
biker63

Personne?
05/05/2007, 14h19
gerald2545

il faudrait le code de http://www.only-dev.info/site/formul...duit/suppr.php
A+

D'accord :)

Le voila :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<?php
 
require("identifiants.php");
 
$erreur = "Un problème générale est survenu merci de recommancer l'opération";
 
mysql_connect($dbhost,$dbuser,$dbpass)or die("Erreur 1");
mysql_select_db($db)or die("Erreur 2");
 
if(isset($_REQUEST['supprimer_produit']))
{
     $supprimerProduit = htmlentities($_REQUEST['supprimer_produit'], ENT_QUOTES); 
         $requete1 = mysql_query(" DELETE FROM ajout_produit WHERE id='".$supprimerProduit."'");
         sleep(5);
         
}
  else { 
  
  echo " Erreur ! " ;
       }
         
         ?>

05/05/2007, 22h40
biker63

humm ?
05/05/2007, 23h20
gerald2545

ton script php supprime peut-être ton produit de la base de données mais ne renvoie aucune info au script ajax...donc xhr_object.responseText ne contient rien....
peut-être que j'ai zappé une étape dans ton système?

1 : As-tu vérifié dans ta base de données que ton produit est bien supprimé après l'appel ajax?
2 : fais renvoyer quelquechose à ton script php http://www.only-dev.info/site/formul...duit/suppr.php (par exemple la liste des produits qu'il te reste en base de données....je crois que c'est ton objectif...non?)
3 : pourquoi mets-tu un sleep après ta requête de suppression?
4 : quel élément html désigne l'id "produit" utilisé dans

Code:

document.getElementById('produit').innerHTML = xhr_object.responseText;

? Donne un bout de code html STP qui correspond
06/05/2007, 20h02
biker63
Salut :)

Merci déja d'avoir repondu

Alors je reponds a tes questions :

1) Le produit est belle est bien supprimé dans ma base de donnée

2)Ce que je dois renvoyer ? J'ai pas compris la lol désolé :?

3) J'avais mis un sleep pour dire a mysql de faire une pause , histoire d'afficher un message de loading ( que je n'ai pas mis d'ailleur :) )

4)

Code:

document.getElementById('produit').innerHTML = xhr_object.responseText;

correspond a :
Code:

1 2 <td><div id="produit" align="center"> <? echo '<a href="#" onClick="SendGetRequest('.$produit['id'].');return true;">'; ?><img src="aff_cross.gif" alt="" border="0"/></a></div></td>
Encore merci a toi :D
06/05/2007, 21h05
gerald2545

Re,
ton element HTML "produit" ne contient que l'image (pas du tout la ligne qui correspond à ton produit), c'est donc normal que ta croix disparaisse et pas le reste de la ligne.

Ceci dit, comment fais-tu pour afficher la liste de tes produits qui restent en base de données?
07/05/2007, 12h23
biker63

Je fais une requete php qui liste tout les produits enregistrer dans la BDD , et je lai affiche dans un tableau pour les voirs :)

Tu veux la requete ?
07/05/2007, 13h00
gerald2545

le problème c'est qu'avec ajax, tu ne refais pas ta requete qui t'affiche tes produits. Donc la liste sur ta page html n'est pas réactualisée.....c'est tout.
Moi, ce que je ferai :
- appel ajax quand clic sur croix_rouge
- requete ajax supprime l'entrée et recupère la nouvelle liste de produits
- ajax renvoie la liste de tes produits mise en forme dans la balise html "produit"
07/05/2007, 13h43
biker63

C'est une tres bonne methode :)

Escuse moi mais je suis debutant dans ce domaine , tu peux m'indiquer la marche a suivre ?

Merci encore :D

modifie le code php appelé par la méthode ajax SendGetRequest (à toi de traduire en php mon pseudocode) :

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
<?php
 
require("identifiants.php");
 
$erreur = "Un problème générale est survenu merci de recommancer l'opération";
 
mysql_connect($dbhost,$dbuser,$dbpass)or die("Erreur 1");
mysql_select_db($db)or die("Erreur 2");
 
if(isset($_REQUEST['supprimer_produit']))
{
     $supprimerProduit = htmlentities($_REQUEST['supprimer_produit'], ENT_QUOTES); 
         $requete1 = mysql_query(" DELETE FROM ajout_produit WHERE id='".$supprimerProduit."'");
         sélectionne les produits
         mets dans une variable $tableauProduits la balise d'ouverture de tableau html
         pour chaque produit issu de la requête
                 mets dans $tableauProduits une ligne de tableau avec autant de colonnes que d'infos que tu veux afficher
         mets dans $tableauProduits la balise de fermeture de ton tableau
         renvoie ta variable $tableauProduits
         
}
  else { 
  
  echo " Erreur ! " ;
       }
         
         ?>

dans ton script html où tu as la liste des produits, ton div ayant l'id "produit" doit entourer ton tableau de produits

Code:

1
2
3
4
5
6
7
<div id="produit">
<table>
<tr><td></td>......</td></tr>
...
<tr><td></td>......</td></tr>
</table>
</div>

ainsi quand la requete ajax met à jour le contenu de ton div avec la table que tu viens de créer...

PS : il faut gérer le cas où il n'y a plus de produits dans ta table et renvoer un message que sera afficher dans ton div...
rePS : ajax n'est pas d'un extrême utilité ici, autant appeler directement ton script php qui supprimera ton produit et affichera ta nouvelle liste de produits....

D'accord ;)

J'ai tout compris a part l'étape de la

Citation:

variable $tableauProduits

La balise d'ouverture d'un tableau html , Tu parle de <table> ? en faite tu veux que j'affiche mon tableau en php ?

Comme ceci si j'ai bien compris :
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 if(isset($_REQUEST['supprimer_produit'])) { $supprimerProduit = htmlentities($_REQUEST['supprimer_produit'], ENT_QUOTES); $requete1 = mysql_query(" DELETE FROM ajout_produit WHERE id='".$supprimerProduit."'"); echo " Produit supprimé ! "; $requete2 = mysql_query("SELECT * FROM ajout_produit ORDER BY id "); while($produit = mysql_fetch_array($requete2) ) { $date = date('d/m/Y à H\hi', $produit['timestamp']); $tableauProduits = " <table><tr> <td><div align=\"center\"> // on affiche le produit? </div></td> <td><div align=\"center\"> //nouveau produit ? </div></td> //Balise de fermeture </tr></table> "; return $tableauProduits; }
Escuse moi si j'ai mal interpreter , désolé je suis un noob .. :?

PS : Il n'y a pas beaucoup d'utilité ici , mais j'aimerais savoir utiliser la technologie ajax , donc j'ai voulu faire un script :)

07/05/2007, 14h27
gerald2545

c'est exactement ça ... sauf que ta ligne

Code:

echo " Produit supprimé ! ";

devient

Code:

$tableauProduits = 'Produit supprimé !<br />';

dans le reste de ton code au lieu d'utiliser

Code:

$tableauProduits =

utilise

Code:

$tableauProduits .=

sinon tu écrases ta variable à chaque itération de ta boucle.
Tu dois aussi sortir tes balises <table> et </table> de ta boucle while sinon tu vas créer autant de table que de produits, ce que tu ne désires pas.
plutôt que d'utiliser <div align="center"> dans tes cellules, mets align="center" dans ta balise <td>, et mieux, utilise du CSS.
voilou...

hey !! voila je te montre les codes

Code de admin_boutique :

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
38
39
40
41
<div id="produit">
<table width="574">
             <tr>
                 <th width="86">ID</th>
                 <th width="167">Produit </th>
                 <th width="46">Prix</th>
	             <th width="255">Date et heure</th>
				 <th width="46">Supprimer</th>
             </tr> 
                 <?
	                $requete1 = mysql_query("SELECT * FROM ajout_produit ORDER BY id DESC LIMIT 0, 5")or die(mysql_error());
 
                    while($produit = mysql_fetch_array($requete1) )
                    {
	                $date = date('d/m/Y à H\hi', $produit['timestamp']);
                 ?>
 
               <tr align="center">
               <td>
	           <? echo '<a href="http://www.only-dev.info/site/formulaire-ajout-produit/modifier_produit.php?modifier_produit=' .               $produit['id'] . '">'; ?>
			   <? echo	$produit['id']; ?>
			   </a>
			   </td>
               <td>
			   <? echo	$produit['produit']; ?>
			   </td>
               <td><? echo	$produit['prix']; ?></td>
	           <td><? echo	$date; ?></td>
	           <td><div id="produit">
	           <? echo ' <a href="#" onClick="SendGetRequest('.$produit['id'].');return true;">'; ?>
			    <img src="aff_cross.gif" alt="" border="0"/>
			   <? echo " </a> "; ?>
			   </div>
			   </td>
  </tr>
 
		<? 
		}
		?>
</table> 
 </div>

Code de suppr.php :

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
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
<?php
require("identifiants.php");
 
$erreur = "Un problème générale est survenu merci de recommancer l'opération";
 
mysql_connect($dbhost,$dbuser,$dbpass)or die("Erreur 1");
mysql_select_db($db)or die("Erreur 2");
 
if(isset($_REQUEST['supprimer_produit']))
{
     $supprimerProduit = htmlentities($_REQUEST['supprimer_produit'], ENT_QUOTES); 
         $requete1 = mysql_query(" DELETE FROM ajout_produit WHERE id='".$supprimerProduit."'");
         
         $tableauProduits = " Produit supprimé ! </br> ";
         
         $requete2 = mysql_query("SELECT * FROM ajout_produit ORDER BY id ");
         
         echo " <table width=\"574\">
             <tr>
                 <th width=\"86\">ID</th>
                 <th width=\"167\">Produit </th>
                 <th width=\"46\">Prix</th>
                     <th width=\"255\">Date et heure</th>
                                 <th width=\"46\">Supprimer</th>
             </tr>
                         <tr align= \"center\"> ";
                         
         
          while($produit = mysql_fetch_array($requete2) )
      {
          $date = date('d/m/Y à H\hi', $produit['timestamp']);
          
$tableauProduits .= "<td><a href=\"http://www.only-dev.info/site/formulaire-ajout-produit/modifier_produit.php?modifier_produit=" .                      $produit['id'] . "\">".$produit['id']; "</a></td> ";
 
$tableauProduits .= " <td> ".$produit['produit']." </td> ";
$tableauProduits .= " <td> ".$produit['prix']." </td> ";
$tableauProduits .= " <td> ".$date." </td> ";
$tableauProduits .= ' <td><a href="#" onClick="SendGetRequest('.$produit['id'].');return true;"><img src="aff_cross.gif" alt="" border="0"/></a></td> '; 
 
      }
          
$tableauProduits .= " </tr></table>";
 
                                                 
    return $tableauProduits;
           
}
  else { 
  
  echo " Erreur ! " ;
       }
         
         ?>

Voila est ce que tout est bon ? Merciii

07/05/2007, 17h41
gerald2545

dans l'ensemble oui mais tu as 2 <div id="produit"> qui trainent dans ton script
en cas d'erreur dans suppr.php, au lieu de faire un echo "Erreur", fais un return "Erreur"
07/05/2007, 19h07
biker63

Donc tout est regler , j'ai carrement changer de methode :)

Merci a vous :D

Bye bye et encore merci