[AJAX] Modifier certaines cellules d'un tableau via ajax

Version imprimable

Bonjour,
je voudrais réaliser un formulaire de bon de commande. Pour ce faire j'utilise un tableau généré via un foreach en php comme ceci:

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
 
<?php foreach($_SESSION['user']['panier'] as $id=>$photo):?>
  <tr id="<?php echo $id;?>">
    <td><img src="<?php echo DOSSIER_GALERIE;?>mini-<?php echo $id;?>.html" id="1" title="<?php echo $photo['nom'];?>" alt="<?php echo $photo['nom'];?>"/></td>
    <td>
      <label>Quantité</label><br />
      <select onchange="calculPanier()" id="quantite" name="quantite">
            <option selected="selected" value="1">1</option>
            <option value="2">2</option>
            <option value="3">3</option>
            <option value="4">4</option>
            <!-- etc.... -->
          </select>
          </td>
          <td><label>Format</label><br />
          <select onchange="calculPanier()" id="format" name="format">
            <option selected="selected" value="1">10 x 15</option>
            <option value="2">15 x 21</option>
            <option value="3">20 x 30</option>
            <option value="4">30 x 45</option>
            <option value="0">Autres</option>
          </select></td>
        <td width="120" id="prixunitaire" height="70"></td>
        <td width="120" id="prixsoustotal" height="70"></td>
      </tr>
    <?php endforeach;?>
      <tr height="50" align="right">
        <td colspan="6"><span class="commentaires">(Le montant indiqué est TTC)</span>   Total :</td>
          <td id="total"></td>
        </tr>

Je voudrais modifier les valeurs des cellules prixunitaire, prixsoustotal de chaque ligne du tableau.
Puis je voudrais également que le montant total s'incrémente ou décrémente en fonction des sous totaux.
Ceci serait effectif au chargement de la page et sur événement onChange des select.

J'ai réussi à modifier les valeurs sur une seule ligne mais je ne sais pas comment m'y prendre pour le reste
Merci d'avance pour votre réponse.

03/06/2009, 11h15
E.Bzz

Bonjour,
avant toute chose, tu ne peux pas avoir d'id fixes dans une boucle PHP, car ils ne seraient plus uniques dans la page, ce qui est obligatoire.
Ajoute leur donc un compteur : le $id serait parfaitement adapté.
Ex :

Code:

id="quantite_<?php echo $id;?>"

Ensuite seulement, tu nous montreras ton traitement Ajax ainsi que les modifs que tu souhaites lui faire ;)

A+
03/06/2009, 11h19
Bovino

Salut,

Citation:

Envoyé par Riko63

J'ai réussi à modifier les valeurs sur une seule ligne mais je ne sais pas comment m'y prendre pour le reste.

En évitant de donner le même id à toutes tes cellules par exemple et en ciblant celle sur laquelle tu veux effectuer des modifications.
03/06/2009, 11h55
Riko63

Ah vi forcément ! (quel boulet). :boulet:

Je vais modifier mais je ne suis pas sur du tout de mon ajax après.

Merci pour l'instant.
03/06/2009, 14h24
Bovino

Citation:

Envoyé par Riko63

mais je ne suis pas sur du tout de mon ajax après.

Sans voir ton code, il est difficile de te donner un avis à ce sujet :?
03/06/2009, 17h30
Riko63

Oui tout à fait mais je voulais le retravailler en fonction des remarques pertinentes que vous m'aviez fait.
Je reposterais surement pour vous présenter mon code

Me revoilà:
Cette fois les sous totaux fonctionnent bien mais j'ai deux autres soucis:
Il faudrait que je lance le calcul des totaux au premier chargement de page (en écrivant ces lignes je viens de pense qu'il faudrait peut être que j'utilise onload sur le body)
Et je n'arrive pas à incrémenter mon total général (je me doute qu'il faut lancer une boucle de toutes mes lignes d tableaux mais comment récupérer toutes les lignes coté JS).
Mes codes :
Le tableau html:

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
54
 
<table width="80%" border="0" align="center">
  <tr>
    <th scope="col">Photos</th>
    <th scope="col">Quantité</th>
    <th scope="col">Format</th>
    <th scope="col">Surface</th>
    <th scope="col">Marges</th>
    <th scope="col">Prix unitaire</th>
    <th scope="col">Sous total</th>
  </tr>
  <?php foreach($_SESSION['user']['panier'] as $id=>$photo):?>
  <tr>
    <td>
       <img src="<?php echo DOSSIER_GALERIE;?>mini-<?php echo $id;?>.html" id="1" title="<?php echo $photo['nom'];?>" alt="<?php echo $photo['nom'];?>"/>
    </td>
    <td>
      <select onchange="calculPanier(<?php echo $id;?>)" id="quantite<?php echo $id;?>" name="quantite<?php echo $id;?>">
         <option selected="selected" value="1">1</option>
         <option value="2">2</option>
         <option value="3">3</option>
         <option value="4">4</option>
       </select>
     </td>
     <td>
        <select onchange="calculPanier(<?php echo $id;?>)" id="format<?php echo $id;?>" name="format<?php echo $id;?>">
          <option selected="selected" value="1">10 x 15</option>
          <option value="2">15 x 21</option>
          <option value="3">20 x 30</option>
          <option value="4">30 x 45</option>
          <option value="0">Autres</option>
       </select>
    </td>
    <td>
       <select id="surface" name="surface">
          <option selected="selected" value="mat">Mat</option>
          <option value="brillant">Brillant</option>
      </select>
    </td>
    <td>
       <select id="marges" name="marges">
          <option selected="selected" value="sans">Sans bords</option>
          <option value="brillant">Avec bords blancs</option>
       </select>
    </td>
    <td align="center" class="bleu" id="prixunitaire<?php echo $id;?>"></td>
    <td align="center" class="orange gras" id="prixsoustotal<?php echo $id;?>"></td>
  </tr>
  <?php endforeach;?>
  <tr>
     <td colspan="6"><span class="commentaires">(Le montant indiqué est TTC)</span>   Total :</td>
     <td id="total"></td>
  </tr>
</table>

Le fichier 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
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
 
function getRequeteHttp() 
{
   //on défini la variable
   var requeteHttp;
   if (window.XMLHttpRequest)
   {	// Mozilla
      requeteHttp=new XMLHttpRequest();
      if (requeteHttp.overrideMimeType)
      { // problème firefox
         requeteHttp.overrideMimeType('text/html');
      }
    }
    else
    {
       if (window.ActiveXObject)
       {// C'est Internet explorer < IE7
          try
          {
             requeteHttp=new ActiveXObject("Msxml2.XMLHTTP");
	  }
          catch(e)
          {
	     try
	     {
	         requeteHttp=new ActiveXObject("Microsoft.XMLHTTP");
	     }
	     catch(e)
	     {
		requeteHttp=null;
	     }
	   }
        }
     }
     return requeteHttp;
}
 
 
function calculPanier(id)
{
	var requeteHttp = getRequeteHttp();
	var format = document.getElementById('format'+id).value;
	var nombre = document.getElementById('quantite'+id).value
	var total = document.getElementById('total').value
	var soustotal = document.getElementById('prixsoustotal'+id).value
 
    if( requeteHttp == null )
    {
        alert("Impossible d'utiliser Ajax sur ce navigateur");
    }
    else
    {
       var requeteHttp = getRequeteHttp()
       requeteHttp.onreadystatechange = function()
      {
	// On ne fait quelque chose que si on a tout reçu et que le serveur est ok
	if(requeteHttp.readyState == 4 && requeteHttp.status == 200)
	{
	  var reponse = requeteHttp.responseText.split('|');
	  document.getElementById('prixunitaire'+id).innerHTML = reponse[0];
	  document.getElementById('prixsoustotal'+id).innerHTML = reponse[1];
	  document.getElementById('total').innerHTML = reponse[2];
	}
      }
      requeteHttp.open('GET','calcul_commande.php5?format=' + format + '&soustotal=' + soustotal + '&nombre=' + nombre + '&total=' + total, true);
     requeteHttp.send('NULL');
   }
}

Puis le fichier 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
 
<?php
header('Content-Type: text/html; charset=ISO-8859-1');
 
$totalAncien = $_GET['total']; //memo ancien total
$prixSoustotalAncien = $_GET['soustotal'];
 
$format = intval($_GET['format']);
// prix en fonction du format
//(tarifs à voir mais variable devra être modifiable par la page d'admin) 
//Via XML peut être)
switch($format)
  {
  case 1:
    $prixunitaire = 10;
  break;
  case 2:
    $prixunitaire = 15;
  break;
  case 3:
    $prixunitaire = 20;
  break;
	case 4:
    $prixunitaire = 30;
  break;
  default:
    $prixunitaire = NULL;
  break;
}
 
if($prixunitaire != NULL)
{
  $prixsoustotal = utf8_decode($_GET['nombre'] * $prixunitaire) . '€';
  $prixunitaire .= '€';
  $ecartSousTotal = $prixsoustotal - $prixSoustotalAncien;
  $total = $totalAncien + $ecartSousTotal;
}
else
{
  $prixunitaire = 'Non communiqué';
  $prixsoustotal = '';
}
 
echo $prixunitaire . '|' . $prixsoustotal . '|' . $total;
?>

:oops: :merci: d'avance

04/06/2009, 09h29
E.Bzz

Citation:

Envoyé par Riko63

Il faudrait que je lance le calcul des totaux au premier chargement de page (en écrivant ces lignes je viens de pense qu'il faudrait peut être que j'utilise onload sur le body)

Heu non : si c'est au chargement de la page, fait ça lors de sa génération, directement sur le serveur.
Plus facile (à coder), plus efficace (en temps de réponse) et plus propre (lancer un appel Ajax sur le onload est une erreur de logique, sauf cas hyper-spécifique).

A+
05/06/2009, 00h27
Riko63

Un grand merci à tous , maintenat ça fonctionne.
J'ai fait comme E.Bzz m'a dit, j'ai renseigné mes cellules au chargement de la page via php. Puis j'utilise JS et PHP pour les modifer sur événement onChange() sur les select.
Mon total général fonctionne maintenant.
J'avais mis un .value pour récupérer le contenu de ma cellule alors que c'est .innerHTML.

J'ai une autre question (si je peux me permettre):
D'après ces modifs ma façon de faire est elle correcte ? Mes codes sont "propres" ?
05/06/2009, 09h19
E.Bzz

Citation:

Envoyé par Riko63

D'après ces modifs ma façon de faire est elle correcte ?

Sur le principe, oui.
Mais pour juger si c'est "propre", il faudrait voir ;)

A+
06/06/2009, 18h15
Riko63

3 pièce(s) jointe(s)

:D tout semble fonctionner maintenant.
Je vous joins mes trois fichiers.
Le fichier js, le fichier php calcul commande est celui qui est appelé par ajax.
le fichier commande php est la page principale.

Question bête de sécurité (pas trop en rapport avec ce forum mais comme via ajax ...):
Doit on protéger un get qui vient d'ajax ? quel sont les risques ?

Merci d'avance.
07/06/2009, 08h40
Bovino

Citation:

Envoyé par Riko63

Question bête de sécurité (pas trop en rapport avec ce forum mais comme via ajax ...):
Doit on protéger un get qui vient d'ajax ? quel sont les risques ?

Merci d'avance.

Le principe est simple : Never Trust User Input ! (Ne jamais faire confiance aux entrées utilisateur).

En ayant bien conscience que user input ne désigne pas uniquement la valeur des champs de saisie, mais TOUTES les données arrivant sur le serveur.

C'est vrai quelle que soit la méthode utilisée, donc en particulier avec Ajax.
Il faut aussi savoir que la méthode POST est considérée plus sure que GET.

Le risque est qu'un utilisateur malveillant tente de faire passer du code (ou portion de code) malveillant vers le serveur pour ensuite le faire s'exécuter chez tous les autres visiteurs par exemple.
07/06/2009, 21h19
Riko63

Merci de ta réponse, pas simple de penser à tout.
PS: j'ai forcé le type de variables qui arrive via post.
(exemple : intval($_POST['format'], floatval($_POST['total'], intval($_POST['nombre'])

Mais une question me turlupine :
Si j'ai bien compris le fonctionnement d'Ajax (comme je l'utilise):
- sur un onChange j'appelle mon fichier php,
- traitement données reçues ==> ICI protection et/ou vérif données reçues.
- affichage des données dans le fichier de départ => Faut il protéger dans le fichier de traitement (echo ......) avant affichage via Ajax,
ou avant affichage dans page de départ. Voire les deux.
J'avoue me perdre un peu.