Creation tables apres click sur un bouton

**vermine** · 19/06/2009, 13h58

Ha oui, j'ai oublié de lire le code PhP. ^^
Au temps pour moi.

C'est parce que le innerHTML va effacer la liste initialisée au load de la page et que j'imaginais bêtement que "leselect" rendrait des <option> tout court.

Parce que si je ne m'abuse, après le clic sur le bouton, on perd l'option:

Code html :

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

<option value='-1'>Choisir un Status</option>

**billyrose** · 19/06/2009, 14h13

J'ai ajoute le alert(leselect); et rien. j'ai toujours ma balise select qui est vide quand je teste.

pourquoi perdrais je cette option?

Code :

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

<option value='-1'>Choisir un Status</option>

Merci encore pour votre aide

**le_chomeur** · 19/06/2009, 14h15

parce que tu vas remplir la div avec le retour php qui est une liste et non la liste existente avec des options ...

**vermine** · 19/06/2009, 14h18

Le alert ne s'est pas lancé ? Il est placé au mauvais endroit ? Que dit-il si il se lance ? Et tant qu'on y est, la requête SQL donne-t-elle un résultat (essayez d'interroger votre SGBD directement) ?

**billyrose** · 19/06/2009, 14h19

Envoyé par le_chomeur

parce que tu vas remplir la div avec le retour php qui est une liste et non la liste existente avec des options ...

Mais le retour php a liste avec les options (du moins quand je teste mon code php individuellement j'ai mon menu deroulant avec toutes les options qui s'affichent).
De toute facon, je peux toujours inclure

Code :

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

<option value='-1'>Choisir un Status</option>

dans mon code php.

ce que je n'arrive pas a comprendre c'est pourquoi quand je teste la page ayant mon code JS et le formulaire, ma liste deroulante est vide.

Merci

**billyrose** · 22/06/2009, 12h52

Bonjour a tous,

j'ai un premier fichier qui me permet d'afficher l'entete d'une table (ecrit en HTML)

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
 
<html>
<head>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
   <script src="ajax_req.js" type="text/javascript"></script>
</head>
<body>
<h1> Create an Item </h1>
<form  method="post">
	<table align="center" border = "2" cellspacing ="0" cellpadding="3">
		<tr><td><b>Functionality Name:</b></td> <td><b>Description:</b></td> <td><b>Status:</b></td> <td><input type="submit" Name= "Ajouter" Value="Ajouter" onclick="htmlData('status.php')"></a></td></tr>
 
 
	</table>
</form>
</body>
</html>

J'ajoute une nouvelle ligne en executant le code status.php qui est :

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
<tr>
<td><input type="text" name="depname" size="20" maxlength="50" value="" /></td>
<td><select name="fstatus" style="width: 150px">';
 
<?php
require_once ('../mysqli_connect.php');                         
                // Retrieve all the statuses of a functionality
                $q = "SELECT F_status_ID, Functionality_status FROM fstatuses ORDER BY F_status_ID ASC";
                $r = mysqli_query($dbc, $q);
                if (mysqli_num_rows($r) > 0) {
                        
                        while ($menu_row = mysqli_fetch_array($r, MYSQLI_NUM)) {
                                echo "<option value=\"$menu_row[0]\">$menu_row[1]</option>\n";
                        }
                }
                mysqli_free_result($r);
                unset($menu_row);
                 
 
 ?>
</select>
</td>
<td> <textarea name="fdescription" rows="2" cols="30" wrap="hard" ></textarea> </td>
<td valign="center"><a href="delete.php">[delete]</a></td>
</tr>

J'ai utilise JS-AJAX pour l'execution de mon code status.php
mon fichier js est le suivant:

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
38
39
40
41
42
function GetXmlHttpObject(handler)
{
   var objXMLHttp=null
   if (window.XMLHttpRequest)
   {
       objXMLHttp=new XMLHttpRequest()
   }
   else if (window.ActiveXObject)
   {
       objXMLHttp=new ActiveXObject("Microsoft.XMLHTTP")
   }
   return objXMLHttp
}
 
function stateChanged()
{
   if (xmlHttp.readyState==4 || xmlHttp.readyState=="complete")
   {
       }
   else {
 
   }
}
 
// Will populate data based on input
function htmlData(url, qStr)
{
   if (url.length==0)
   {
       return;
   }
   xmlHttp=GetXmlHttpObject()
   if (xmlHttp==null)
   {
       alert ("Browser does not support HTTP Request");
       return;
   }
 
   xmlHttp.onreadystatechange=stateChanged;
   xmlHttp.open("GET",url,true) ;
   xmlHttp.send(null);
}

Et la, rien. Quand je clique sur Ajouter, aucune ligne n'est ajoutee.

merci d'avance.

**billyrose** · 22/06/2009, 13h38

J'ai modifie mon fichier js et il apparait coe suit:

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
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
 
<html>
<head>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
   <!--<script src="ajax_req.js" type="text/javascript"></script> -->
   <script>
   function getXhr(){
                var xhr = null; 
				if(window.XMLHttpRequest) // Firefox et autres
				   xhr = new XMLHttpRequest(); 
				else if(window.ActiveXObject){ // Internet Explorer 
				   try {
			                xhr = new ActiveXObject("Msxml2.XMLHTTP");
			            } catch (e) {
			                xhr = new ActiveXObject("Microsoft.XMLHTTP");
			            }
				}
				else { // XMLHttpRequest non supporté par le navigateur 
				   alert("Votre navigateur ne supporte pas les objets XMLHTTPRequest..."); 
				   xhr = false; 
				} 
                                return xhr
			}
 
			/**
			* Méthode qui sera appelée sur le click du bouton
			*/
			function go(){
				var xhr = getXhr()
				// On défini ce qu'on va faire quand on aura la réponse
				xhr.onreadystatechange = function(){
					// On ne fait quelque chose que si on a tout reçu et que le serveur est ok
					if(xhr.readyState == 4 && xhr.status == 200){
						alert(xhr.responseText);
					}
				}
				xhr.open("GET","status.php",true);
				xhr.send(null);
			}
 
   </script>
</head>
<body>
<h1> Create an Item </h1>
<form  method="post">
	<table align="center" border = "2" cellspacing ="0" cellpadding="3">
		<tr><td><b>Functionality Name:</b></td> <td><b>Description:</b></td> <td><b>Status:</b></td> <td><input type="submit" Name= "Ajouter" Value="Ajouter" onclick="go()"></a></td></tr>
 
 
	</table>
</form>
</body>
</html>

et le fichier status.php est le suivant:

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
<tr>
<td><input type="text" name="depname" size="20" maxlength="50" value="" /></td>
<td><select name="fstatus" style="width: 150px">';
 
<?php
require_once ('../mysqli_connect.php');                         
                // Retrieve all the statuses of a functionality
                $q = "SELECT F_status_ID, Functionality_status FROM fstatuses ORDER BY F_status_ID ASC";
                $r = mysqli_query($dbc, $q);
                if (mysqli_num_rows($r) > 0) {
                        
                        while ($menu_row = mysqli_fetch_array($r, MYSQLI_NUM)) {
                                echo "<option value=\"$menu_row[0]\">$menu_row[1]</option>\n";
                        }
                }
                mysqli_free_result($r);
                unset($menu_row);
                 
 
 ?>
</select>
</td>
<td> <textarea name="fdescription" rows="2" cols="30" wrap="hard" ></textarea> </td>
<td valign="center"><a href="delete.php">[delete]</a></td>
</tr>

Cette fois qund je clique sur Ajouter, le Alert m'affiche bien tout mon code status.php (voir fichier attache svp).

Comment puis je faire pour que ce code soit effectivement interprete par mon navigateur? ie que j'ai effectivement la ligne que je veux creer?

Merci

**Vil'Coyote** · 22/06/2009, 13h52

Salut,

l'utilisation d'ajax pour effectuer des ajouts de ligne avec tes données n'est pas une mauvaise idée. là ou ça coince et que tu va récupérer une ligne (c.f ton image) cependant comment récupère tu les précédente? et surtout comment l'ajouter?

car le but d'utiliser un tel script et de sélectionner au préalable une zone
d'affichage.
Personnellement, je n'utiliserais pas de tableau mais des div. un 'div' principale permettant d'afficher et de récupérer le contenu et des div généré par ton status.php au lie d'utiliser un tableau qui à mon sens ne permettra pas d'ajouter des lignes sauf si tu utilise le dom pour te balader dans l'arbo du tableau.

Donc en gros
dans ton jvs :

Code :

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

1
2
3
4
 
.......
document.getElementByid["principale"].innerHTML += xhr.responseText;
.......

Code :

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

1
2
3
4
5
 
ici ton tableau définissant la tête 
<div id='principale'>
/// ici l'affichage de tes lignes
</div>

maintenant si tu souhaite ajouter et supprime des lignes il faudra alors non plus limité à l'ajout simple dans 'principale' mais faire des ajout de div et faire du récursif pour la suppression.

**billyrose** · 22/06/2009, 13h56

Merci.

Oui je souhaite ajouter des lignes et pouvoir les supprimer aussi.
Je vais essayer ce que tu as propose.

**billyrose** · 22/06/2009, 14h08

voila comment j'ai modifie mon code js:

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
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
<html>
<head>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 <script>
   function getXhr(){
                var xhr = null; 
				if(window.XMLHttpRequest) // Firefox et autres
				   xhr = new XMLHttpRequest(); 
				else if(window.ActiveXObject){ // Internet Explorer 
				   try {
			                xhr = new ActiveXObject("Msxml2.XMLHTTP");
			            } catch (e) {
			                xhr = new ActiveXObject("Microsoft.XMLHTTP");
			            }
				}
				else { // XMLHttpRequest non supporté par le navigateur 
				   alert("Votre navigateur ne supporte pas les objets XMLHTTPRequest..."); 
				   xhr = false; 
				} 
                                return xhr
			}
 
			/**
			* Méthode qui sera appelée sur le click du bouton
			*/
			function go(){
				var xhr = getXhr()
				// On défini ce qu'on va faire quand on aura la réponse
				xhr.onreadystatechange = function(){
					// On ne fait quelque chose que si on a tout reçu et que le serveur est ok
					if(xhr.readyState == 4 && xhr.status == 200){
						//alert(xhr.responseText);
						document.body.innerHTML += xhr.responseText;
					}
				}
				xhr.open("GET","status.php",true);
				xhr.send(null);
			}
 
   </script>
</head>
<body>
<h1> Create an Item </h1>
<form  method="post">
	<table align="center" border = "2" cellspacing ="0" cellpadding="3"> 
		<tr><td><b>Functionality Name:</b></td> <td><b>Description:</b></td> <td><b>Status:</b></td> <td><input type="submit" Name= "Ajouter" Value="Ajouter" onclick="go()"></a></td></tr>
 
 
	</table>
</form>
</body>
</html>

et le code status.php:

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
<tr>
<td><input type="text" name="depname" size="20" maxlength="50" value="" /></td>
<td><select name="fstatus" style="width: 150px">';
 
<?php
require_once ('../mysqli_connect.php');                         
                // Retrieve all the statuses of a functionality
                $q = "SELECT F_status_ID, Functionality_status FROM fstatuses ORDER BY F_status_ID ASC";
                $r = mysqli_query($dbc, $q);
                if (mysqli_num_rows($r) > 0) {
                        
                        while ($menu_row = mysqli_fetch_array($r, MYSQLI_NUM)) {
                                echo "<option value=\"$menu_row[0]\">$menu_row[1]</option>\n";
                        }
                }
                mysqli_free_result($r);
                unset($menu_row);
                 
 
 ?>
</select>
</td>
<td> <textarea name="fdescription" rows="2" cols="30" wrap="hard" ></textarea> </td>
<td valign="center"><a href="delete.php">[delete]</a></td>
</tr>

Mais voila l'affichage est horrible (voir figure attache)

Merci

**billyrose** · 22/06/2009, 14h34

Je me suis rendue compte que c'est l'instruction

Code :

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

document.body.innerHTML += xhr.responseText;

Qui provoque un affichage comme celui du fichier affichage.jpg

Par quoi devrais-je remplacer ce code pour avoir ma nouvelle ligne affichee en dessous mon entete de table?

Merci

**billyrose** · 22/06/2009, 14h36

Je me suis rendue compte que c'est l'instruction

Code :

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

document.body.innerHTML += xhr.responseText;

Qui provoque un affichage comme celui du fichier affichage.jpg

Par quoi devrais -je remplacer ce code pour avoir ma nouvelle ligne affichee en dessous mon entete de table?

Merci

**billyrose** · 22/06/2009, 14h53

j'ai essaye ceci:

Code :

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

1
2
3
var newRow = document.getElementById('table').insertRow(-1);
	newRow.innerHTML = xhr.responseText;
	newRow.appendChild(newRow);

Mais ca ne marche pas. quand je clique sur Ajouter, ma ligne n'apparait plus.

J'ai aussi essaye ceci:

Code :

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

document.getElementById('table').innerHTML +=xhr.responseText;

ca ne marche pas. quand je clique sur Ajouter, ma ligne n'apparait plus.

**andry.aime** · 22/06/2009, 16h02

Salut,
Regardes dans la FAQ comment ajouter une ligne dans un tableau:
http://javascript.developpez.com/faq...ble#AjoutLigne

**billyrose** · 22/06/2009, 16h09

Merci mais j'ai deja lu cette FAQ.

mon pb est que ce que me retourne xhr.responseText est compose d'une zone de texte, d'une liste deroulante, d'un textarea et d'un href avec aussi des <td> et des <tr>. En resume mes cellules sont deja creees.

Quand je fais (base sur la FAQ)

Code :

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

1
2
var newRow = document.getElementById('table').insertRow(-1);
newRow.innerHTML +=xhr.responseText

Ca marche pas.
Qu'est ce qui manque?

merci

**andry.aime** · 22/06/2009, 16h19

Pour ajouter une ligne, tu dois faire

Code :

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

1
2
3
 var newRow = document.getElementById('table').insertRow(-1);
    var newCell = newRow.insertCell(0);
    newCell.innerHTML = xhr.responseText;

Mais si xhr.responseText contient déjà les td et tr correspondant:

Code :

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

document.getElementById('table').innerHTML+=xhr.responseText

**billyrose** · 22/06/2009, 16h27

Envoyé par andry.aime

Mais si xhr.responseText contient déjà les td et tr correspondant:

Code :

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

document.getElementById('table').innerHTML+=xhr.responseText

J'ai essaye cela et ca ne marche pas. Quand je clique sur Ajouter rien ne passe et pourtant quand je fais mon

Code :

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

alert(xhr.responseText)

j'ai ma ligne qui s'affiche dans la fenetre alert.

Je teste aussi ceci:

Code :

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

1
2
3
var newrow= document.getElementById('table');
 newrow.innerHTML +=xhr.responseText;
alert(newrow);

le alert(newrow) n'affiche rien. La fenetre alert ne s'affiche meme pas.

J'a teste avec IE et FF.

Merci

**andry.aime** · 23/06/2009, 07h50

document.getElementById('table')

Est-ce que ton tableau a un id "table"?

**billyrose** · 23/06/2009, 09h44

Oui mon tableau a un id= "table". mais jái verifie apparemment la balise <table> n'a pas d'attribut InnerHTML.

J'ai decide d'executer cette fois seulement mon code de creation de liste deroulante avec AJAX.

J'ai le code fstatus.php suivant:

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
require_once ('../mysqli_connect.php');                         
                // Retrieve all the statuses of a functionality
                echo "<select name='status'>";
                $q = "SELECT F_status_ID, Functionality_status FROM fstatuses ORDER BY F_status_ID ASC";
                $r = mysqli_query($dbc, $q);
                if (mysqli_num_rows($r) > 0) {
                        
                        while ($menu_row = mysqli_fetch_array($r, MYSQLI_NUM)) {
                                echo "<option value=\"$menu_row[0]\">$menu_row[1]</option>\n";
                        }
                }
                mysqli_free_result($r);
                unset($menu_row);
                 
                echo "</select>";
 
 ?>

Ensuite avec JS + AJAX j'ecris ceci:

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
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
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 
<html>
<head>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 <script>
   function getXhr(){
                var xhr = null; 
				if(window.XMLHttpRequest) // Firefox and others
				   xhr = new XMLHttpRequest(); 
				else if(window.ActiveXObject){ // Internet Explorer 
				   try {
			                xhr = new ActiveXObject("Msxml2.XMLHTTP");
			            } catch (e) {
			                xhr = new ActiveXObject("Microsoft.XMLHTTP");
			            }
				}
				else { // XMLHttpRequest not supported by your browser
				   alert("Votre navigateur ne supporte pas les objets XMLHTTPRequest..."); 
				   xhr = false; 
				} 
                                return xhr
			}
 
			/**
			*  method called when the user clicks on the button
			*/
			function go(){
				var xhr = getXhr()
				// We defined what we gonna do with the response
				xhr.onreadystatechange = function(){
					// We do somthing once the server's response is OK
					if(xhr.readyState == 4 && xhr.status == 200){
 
						var body = document.getElementsByTagName("body")[0];
 
					// Retrieve <table> ID and create a <tbody> element
 
						var tbl = document.getElementById("table");
						var tblBody = document.createElement("tbody");
						var row = document.createElement("tr");
 
					// Create  <td> elements and a text node, make the text
					// node the contents of the <td>, and put the <td> at
					// the end of the table row
						var cell_1 = document.createElement("td");
						var cell_2 = document.createElement("td");
						var cell_3 = document.createElement("td");
						var cell_4 = document.createElement("td");
 
					// Create the first cell which is a text zone	
						var cell1=document.createElement("input");
						cell1.type="text";
						cell1.name="fname";
						cell1.size="20";
						cell1.maxlength="50";
						cell_1.appendChild(cell1);
 
					// Create the second cell which is a text area	
						var cell2=document.createElement("textarea");
						cell2.name="fdescription";
						cell2.rows="2";
						cell2.cols="30";
						cell_2.appendChild(cell2);
 
					// Create the third cell which is a combo box						
					// retrieve the xhr response and put it on a cell
						var cell3=xhr.responseText;
						document.getElementById('status').innerHTML = cell3;	
						cell_3.appendChild(cell3);
 
					// Create the fourth cell which is a href
						var cell4 = document.createElement("a");
						cell4.setAttribute("href","delete.php");
						cell4.appendChild(document.createTextNode("[Delete]"));
						cell_4.appendChild(cell4);
 
					// add cells to the row
						row.appendChild(cell_1);
						row.appendChild(cell_2);
						row.appendChild(cell_3);
						row.appendChild(cell_4);
 
 
					// add the row to the end of the table body
						tblBody.appendChild(row);
 
					// put the <tbody> in the <table>
						tbl.appendChild(tblBody);
					// appends <table> into <body>
						body.appendChild(tbl);
					// sets the border attribute of tbl to 2;
						tbl.setAttribute("border", "1");
				}
 
					}
 
				xhr.open("GET","fstatus.php",true);
				xhr.send(null);
			}
 
   </script>
 
</head>
<body>
<h1> Create an Item </h1>
<form  method="post">
	<table align="center" border = "2" cellspacing ="0" cellpadding="3" id="table"> 
		<tr><td><b>Functionality Name:</b></td> <td><b>Description:</b></td> <td><b>Status:</b></td> <td><input type="submit" Name= "Ajouter" Value="Ajouter" onclick="go()"></a></td></tr>
 
 
	</table>
</form>
</body>
</html>

Quand je clique sur "Ajouter" rien ne se passe.

Dans mon code je mets en commentaire:

Code :

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

1
2
3
4
5
 
var cell3=xhr.responseText;
document.getElementById('status').innerHTML = cell3;	
cell_3.appendChild(cell3)
row.appendChild(cell_3);

Et la, les autres cellules s'affichent quand je clique sur Ajouter
et j'arrive a creer mes lignes sans probleme mais je n'ai pas la cellule 3 (cell3).

Comment puis je faire? pour afficher le reultat xhr.responseText qui juste le code de creation de mon select. je me suis base sur le code suivant http://siddh.developpez.com/articles/ajax/#LIV-A

Merci

**billyrose** · 23/06/2009, 09h50

Quand je fais un alert(xhr.responseText) j'obtiens l'image en fichier attache.

Merci

Creation tables apres click sur un bouton

JavaScript

Discussions similaires

Partager

Partager