[AJAX] actualiser un tableau sans recharger la page

Version imprimable

Voir 40 message(s) de cette discussion en une page

21/04/2009, 13h59
lamiae2

vraiment merci infinimenr pour vos réponses!

oui j'ai essayé !!!ca marche tjrs pas????la page s'actualise???????????je suis bloquée:cry::cry::cry::cry::cry:
21/04/2009, 14h07
emmanuel.remy
Code:

<table width="100%" border="2" bordercolor="#0000FF" class="Style1" id="liste">

liste est une table et dans ton code tu fais:
Code:

1 2 3 4 5 6 <input name="utiliser" ... value=" Utiliser " onclick="affiche('liste');"/> ... function affiche(id){ var strHtml = document.getElementById(id).value; ...
en passant 'liste' comme paramètre id. Cela ne peut pas fonctionner, iln'existe pas de proriété value sur une table

ERE
21/04/2009, 14h18
lamiae2

:aie: vous avez raison j'ai fais ceci:

Code:

var strHtml = document.getElementById(id).innerHTML;

!!!!!!
mais tjrs meme prob????la page s'actualise!!!
21/04/2009, 14h31
andry.aime

On peut voir le code html généré ?

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 
 
  if( isset($_POST['utiliser']))
{
     mysql_connect("localhost", "root", "");
        mysql_select_db("article");
		$mgere=$_POST['us'];
 
		mysql_query("UPDATE articlee SET livr='OUI' where idg='".$mgere."'");
		}
		?>
  <input name="recherche" type="submit" class="Style1" id="recherche" value="Rechercher" align="right" onclick="pop()" on />
 
<form id="form2m" name="form2m"  method="post" action="" onsubmit="return validerMonFormulaire();">
  <input name="us" type="hidden" id="us" />
  <table width="100%" border="2" bordercolor="#0000FF" class="Style1" id="liste">
    <tr>
      <th width="2%" scope="col"><div align="center"><span class="Style3"></span></div></th>
      <th width="4%" scope="col"><div align="center" class="Style1"><span class="Style10">N°r&eacute;f.</span></div></th>
      <th width="5%" scope="col"><div align="center" class="Style1"><span class="Style10">Nature</span></div></th>
      <th width="4%" scope="col"><div align="center" class="Style1"><span class="Style10">Taille</span></div></th>
      <th width="5%" scope="col"><div align="center" class="Style1"><span class="Style10">Forme</span></div></th>
      <th width="5%" scope="col"><div align="center" class="Style1"><span class="Style10">Poids</span></div></th>
 
      <th width="6%" scope="col"><div align="center" class="Style1"><span class="Style10">Livr&eacute;</span></div></th>
    </tr>
</form>

Code:

1 2 3 4 5 6 7 8 function affiche(){ elt3=document.getElementById("us"); elt4=document.getElementById("utiliser"); var data=''; data+='utiliser'+elt3.value; data+='&us'+elt4.value; sendRequest('Moneygems.php',data); }
Ton PHP devrait générer les lignes et Colonnes à afficher dans la table.
Fermes la balise table avant la fermeture de celui de form.

ca marche pas!!!!!!!!!!!!!!!!:cry::cry::cry:toujours la page s'actualise!!!!!!

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
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
 
 
 
<?php 
 
  if( isset($_POST['utiliser']))
{
     mysql_connect("localhost", "root", "");
        mysql_select_db("article");
		$mgere=$_POST['us'];
 
		mysql_query("UPDATE articlee SET livr='OUI' where idg='".$mgere."'");
		}
		?>
 
<table width="100%" border="2" bordercolor="#0000FF" class="Style1" id="liste">
    <tr>
      <th width="2%" scope="col"><div align="center"><span class="Style3"></span></div></th>
      <th width="4%" scope="col"><div align="center" class="Style1"><span class="Style10">N°r&eacute;f.</span></div></th>
      <th width="5%" scope="col"><div align="center" class="Style1"><span class="Style10">Nature</span></div></th>
      <th width="4%" scope="col"><div align="center" class="Style1"><span class="Style10">Taille</span></div></th>
      <th width="5%" scope="col"><div align="center" class="Style1"><span class="Style10">Forme</span></div></th>
      <th width="5%" scope="col"><div align="center" class="Style1"><span class="Style10">Poids</span></div></th>
            <th width="6%" scope="col"><div align="center" class="Style1"><span class="Style10">Livr&eacute;</span></div></th>
    </tr>
    <?php
 
if(isset($_GET["actire"]) ) 
{
     mysql_connect("localhost", "root", "");
        mysql_select_db("articlee");
 
       $idgemr=mysql_real_escape_string(htmlspecialchars($_GET["actire"]));
 
$reponser = mysql_query("SELECT distinct * from article where id='".$idgemr."'"); 
while( $donneesr = mysql_fetch_array($reponser)){
$_SESSION['panier'][]= $donneesr;
foreach($_SESSION['panier'] as $donneesr_ses){ 
 
// On fait une boucle pour lister tout ce que contient la table :
 
$indice =$donneesr_ses['idnat'];
$na = mysql_query("SELECT idnat,nature FROM nature where idnat= '$indice'"); // Requête SQL
$nat = mysql_fetch_array($na);
$natu=$nat['nature'];
 
$indicee =$donneesr_ses['idtail'];
$ta = mysql_query("SELECT idtail,taille FROM taille where idtail= '$indicee'"); // Requête SQL
$tai = mysql_fetch_array($ta);
$tail=$tai['taille'];
 
$indicfo =$donneesr_ses['idform'];
$fo = mysql_query("SELECT idform,forme FROM forme where idform= '$indicfo'"); // Requête SQL
$for = mysql_fetch_array($fo);
$foge=$for['forme'];
 
 
$orl = mysql_query("SELECT livr FROM geme where id='".$idgemr."'"); // Requête SQL
$li = mysql_fetch_array($orl);
$liv=$li['livr'];
 
?>
 
     <tr><td><div align="center" class="Style11">
        <input type="radio" name="selection5" onclick="selectionner('<?php echo $donneesr_ses['id']; ?>')" />
      </div></td>
      <td><div align="center" class="Style11"><?php echo $donneesr_ses['id']; ?></div></td>
      <td><div align="center" class="Style11"><?php echo $natu; ?></div></td>
      <td><div align="center" class="Style11"><?php echo $tail; ?></div></td>
      <td><div align="center" class="Style11"><?php echo $foge; ?></div></td>
      <td><div align="center" class="Style11"><?php echo $donneesr_ses['poids']; ?></div></td>
          <td><div align="center" class="Style11"><?php echo $liv; ?></div></td>
    </tr>
 
    <?php
} 
 
 mysql_close();
}
 
 
 
}
?>
  </table>
<table width="7%" border="0" align="right">
    <tr>
      <th scope="col"><div align="left">
        <input name="utiliser" type="submit" class="Style1" id="utiliser" value="  Utiliser "  onclick="affiche('liste');"/>
      </div></th>
    </tr>
  </table>
 
  <p>&nbsp;</p>
</form>

pour le code ajax:

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
<script language="JavaScript" type="text/javascript">
var HttpObj = null;
var HttpStr = null;
 
function sendRequest(HttpStr,data) {
 if ( window.XMLHttpRequest ) {
  HttpObj = new XMLHttpRequest();   
 } else if ( window.ActiveXObject ) {
  HttpObj = new ActiveXObject( 'Microsoft.XMLHTTP' );   
 } else {
  alert( 'Votre navigateur ne supporte pas les objets XMLHTTPRequest...' );   
  return;
 }
 HttpObj.open('POST', HttpStr , true );
 HttpObj.setRequestHeader("Content-type", "application/x-www-form-urlencoded");//Pour POST
 HttpObj.onreadystatechange = returnRequest;
 HttpObj.send(data);
}
function returnRequest() {
 if ( HttpObj.readyState == 4 && HttpObj.status == 200) {
  document.getElementById('liste').innerHTML = HttpObj.responseText;
 }
} function affiche(){
elt3=document.getElementById("us");
elt4=document.getElementById("utiliser");
 var data='';
 data+='utiliser'+elt3.value;
 data+='&us'+elt4.value;
 sendRequest('Moneygems.php',data);
 }</script>

!!!!!!!!!!!!!!!!!!!!!:cry::cry::cry::cry::cry::cry::cry:

21/04/2009, 15h45
E.Bzz

Citation:

Envoyé par lamiae2

ca marche pas!!!!!!!!!!!!!!!!:cry::cry::cry:toujours la page s'actualise!!!!!!

Code:

<input name="utiliser" type="submit" class="Style1" id="utiliser" value=" Utiliser " onclick="affiche('liste');"/>

Ne t'énerve pas, Andry :aie:

A+
21/04/2009, 15h47
lamiae2

!!!!!!!!!!!!!!!!!!!!!!

j'ai rien compris???? c quoi l'ereur SVP expliquer moi je suis débutante????SVP:cry::cry:
21/04/2009, 15h49
lamiae2

je sais que lorsque je clique sur un sbmit la page s'actualise????mais c ca je que je voulais pas je voulais lorsque je clique sur submit que le tableau s'actualise!!!!SVP expliquer moi ma faute!!!
21/04/2009, 15h54
E.Bzz

Citation:

Envoyé par andry.aime

Salut,

Je pense que tu as utilisé un submit au lieu d'un simple appel d'une fonction Ajax

C'est le cas !!

Dans le code qu'Andry t'as donné ensuite, tu peux voir qu'il s'agit toujours de type="button"

type="submit" => actualise la page (= submit() le formulaire) avant ton appel Ajax
type="button" => n'actualise pas la page avant ton appel Ajax

Il faudrait que tu lises les réponses données avec un peu plus d'attention avant de conclure systématiquement "ça marche pas !", car tu avais la solution sous les yeux depuis un moment :mrgreen:

A+
21/04/2009, 16h08
lamiae2

vraiment merci infinimenr pour vos réponses!

désolée vraiment désolée andy !!!:oops::oops::oops:
le stress!!!! vraiment désolée
maintenant la page ne s'actualise pas mais rien ne se passe???la modification ne se lance pas????
21/04/2009, 16h45
andry.aime

Dans la page php que tu envois les données, tu devras retourner ce que tu veux afficher dans la page avec echo
Exemple

Code:

echo'<tr><td>Une ligne pour la table liste</td></tr>';
21/04/2009, 16h53
lamiae2

!!!j'ai une seule page???j'ai fais ce que tu m'ad dit mais rien qui se passe!
22/04/2009, 08h07
andry.aime

On peut voir la dernière modification sur ton JS et PHP?

vraiment merci

bonjour;
j'ai essayé plusieur code????
dans la meme page j'ai la fonction js et le html et le php:

pour 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
<script language="JavaScript" type="text/javascript">
var HttpObj = null;
var HttpStr = null;
 
function sendRequest(HttpStr,data) {
 if ( window.XMLHttpRequest ) {
  HttpObj = new XMLHttpRequest();   
 } else if ( window.ActiveXObject ) {
  HttpObj = new ActiveXObject( 'Microsoft.XMLHTTP' );   
 } else {
  alert( 'Votre navigateur ne supporte pas les objets XMLHTTPRequest...' );   
  return;
 }
 HttpObj.open('POST', HttpStr , true );
 HttpObj.setRequestHeader("Content-type", "application/x-www-form-urlencoded");//Pour POST
 HttpObj.onreadystatechange = returnRequest;
 HttpObj.send(data);
}
function returnRequest() {
 if ( HttpObj.readyState == 4 && HttpObj.status == 200) {
  document.getElementById('liste').innerHTML = HttpObj.responseText;
 }
}
 
function affiche(id){
elt3=document.getElementById("us");
elt4=document.getElementById("utiliser");
 var strHtml = document.getElementById(id).innerHTML;
 var data;
 data='str'+strHtml;
 data+='&utiliser'+elt4.value;
 data+='&us'+elt3.value;
 sendRequest('article.php',data);

pour html et 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
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
 
 
 
<?php 
 
  if( isset($_POST['utiliser']))
{
     mysql_connect("localhost", "root", "");
        mysql_select_db("article");
		$mgere=$_POST['us'];
 
		mysql_query("UPDATE articlee SET livr='OUI' where idg='".$mgere."'");
		}
		?>
 
<table width="100%" border="2" bordercolor="#0000FF" class="Style1" id="liste">
    <tr>
      <th width="2%" scope="col"><div align="center"><span class="Style3"></span></div></th>
      <th width="4%" scope="col"><div align="center" class="Style1"><span class="Style10">N°r&eacute;f.</span></div></th>
      <th width="5%" scope="col"><div align="center" class="Style1"><span class="Style10">Nature</span></div></th>
      <th width="4%" scope="col"><div align="center" class="Style1"><span class="Style10">Taille</span></div></th>
      <th width="5%" scope="col"><div align="center" class="Style1"><span class="Style10">Forme</span></div></th>
      <th width="5%" scope="col"><div align="center" class="Style1"><span class="Style10">Poids</span></div></th>
            <th width="6%" scope="col"><div align="center" class="Style1"><span class="Style10">Livr&eacute;</span></div></th>
    </tr>
    <?php
 
if(isset($_GET["actire"]) ) 
{
     mysql_connect("localhost", "root", "");
        mysql_select_db("articlee");
 
       $idgemr=mysql_real_escape_string(htmlspecialchars($_GET["actire"]));
 
$reponser = mysql_query("SELECT distinct * from article where id='".$idgemr."'"); 
while( $donneesr = mysql_fetch_array($reponser)){
$_SESSION['panier'][]= $donneesr;
foreach($_SESSION['panier'] as $donneesr_ses){ 
 
// On fait une boucle pour lister tout ce que contient la table :
 
$indice =$donneesr_ses['idnat'];
$na = mysql_query("SELECT idnat,nature FROM nature where idnat= '$indice'"); // Requête SQL
$nat = mysql_fetch_array($na);
$natu=$nat['nature'];
 
$indicee =$donneesr_ses['idtail'];
$ta = mysql_query("SELECT idtail,taille FROM taille where idtail= '$indicee'"); // Requête SQL
$tai = mysql_fetch_array($ta);
$tail=$tai['taille'];
 
$indicfo =$donneesr_ses['idform'];
$fo = mysql_query("SELECT idform,forme FROM forme where idform= '$indicfo'"); // Requête SQL
$for = mysql_fetch_array($fo);
$foge=$for['forme'];
 
 
$orl = mysql_query("SELECT livr FROM geme where id='".$idgemr."'"); // Requête SQL
$li = mysql_fetch_array($orl);
$liv=$li['livr'];
 
?>
 
     <tr><td><div align="center" class="Style11">
        <input type="radio" name="selection5" onclick="selectionner('<?php echo $donneesr_ses['id']; ?>')" />
      </div></td>
      <td><div align="center" class="Style11"><?php echo $donneesr_ses['id']; ?></div></td>
      <td><div align="center" class="Style11"><?php echo $natu; ?></div></td>
      <td><div align="center" class="Style11"><?php echo $tail; ?></div></td>
      <td><div align="center" class="Style11"><?php echo $foge; ?></div></td>
      <td><div align="center" class="Style11"><?php echo $donneesr_ses['poids']; ?></div></td>
          <td><div align="center" class="Style11"><?php echo $liv; ?></div></td>
    </tr>
 
    <?php
} 
 
 mysql_close();
}
 
 
 
}
?>
  </table>
<table width="7%" border="0" align="right">
    <tr>
      <th scope="col"><div align="left">
        <input name="utiliser" type="button" class="Style1" id="utiliser" value="  Utiliser "  onclick="affiche('liste');"/>
      </div></th>
    </tr>
  </table>
 
  <p>&nbsp;</p>
</form>

et voila???le grand problèlme c que je dois rendre cette tâche aujourd'hui et je suis encore bloquée????:cry:

Essai de mettre un php sans html dans le fichier que tu appelles avec l'ajax.

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<?php 
 
  if( isset($_POST['utiliser']))
{
     mysql_connect("localhost", "root", "");
        mysql_select_db("article");
		$mgere=$_POST['us'];
 
		mysql_query("UPDATE articlee SET livr='OUI' where idg='".$mgere."'");
		}
// Ton requête select
//Mettre dans un boucle et affiche avec echo le résultat
echo'<tr><td>essai</td><tr/>';
exit;//pour ne pas executer les autres code
		?>

22/04/2009, 11h41
lamiae2

!!
je peux pas le mettre par ce que le code de l'affichage s'exécute à partir d'une pop up dans le quel j'ajoute les élément du tableau ,ce que je dois faire c après l'affichage je modifie une celule de mon tableau en selectionnat la ligne et ecliquant sur un bouton utiliser!la requete s'execute et fontionne bien!mais il m'ajoute une ligne de plus???? à cause de l'actualisation!!!!
22/04/2009, 12h05
andry.aime

Citation:

la requete s'execute et fontionne bien!mais il m'ajoute une ligne de plus???? à cause de l'actualisation!!!!

Vérifie si c'est l'ajout des éléments du tableau qui ajoute cette ligne.
L'actualisation c'est ce que tu fais avec ajax?
22/04/2009, 16h52
emmanuel.remy

@lamiae2: j'ai un grand plaisir à essayer de suivre ce topic, mais pourrais tu stp arrêter de mettre entre 3 et 5 "?" ou "!" à chaque phrase ;) . Outre le stress que tu montres cela ne fait pas avancer les choses plus vite ! ;)

ERE

Voir 40 message(s) de cette discussion en une page