Creation tables apres click sur un bouton

**andry.aime** · 23/06/2009, 10h01

Reprend la code que je t'ai donné,

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;

**billyrose** · 23/06/2009, 10h03

Quand je relis mon code je me rends compte que je n'ai pas de ID "status" car dans le select jái juste mis

.
Est il possible d'ecrire

et ensuite de faire:

Code :

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

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

Si j'ai totelement tort, y a t-il une autre facon d'aborder ce probleme? parceque JS est entrain de me rendre dingue.

Merci

**billyrose** · 23/06/2009, 10h25

Envoyé par andry.aime

Reprend la code que je t'ai donné,

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;

Merci. quand je clique sur Ajouter je vois bien que la ligne veut apparaitre mais c'est tres rapide et a la fin il y'a rien. je fais un appui prolonge sur "Ajouter" je vois les lignes qui apparaissent et disparaissent immediatement.

Alors que jái juste ajouter les lignes telles que tu me l'as recommende

Merci

**andry.aime** · 23/06/2009, 10h31

Montre nous la dernière version de la fonction.

**billyrose** · 23/06/2009, 10h36

Derniere version de la fonction:

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
<?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 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){
						var newRow = document.getElementById('table').insertRow(-1);
						var newCell = newRow.insertCell(0);
						newCell.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" 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>

le code 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="30" 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>

Merci pour votre aide

**andry.aime** · 23/06/2009, 12h32

Utilise button et non pas submit.

Code :

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

<input type="button" name= "Ajouter" value="Ajouter" onclick="go()">

**billyrose** · 23/06/2009, 13h26

Merci de tout coeur.
Jái un petit probleme dáffichage maintenant. regarde un peu le fichier attache.
STP quelle est la difference entre type="submit" et type="button"?

Merci

**vermine** · 23/06/2009, 13h36

Bonjour,

Vous ne préciser qu'une seule cellule pour votre ligne, or vous en aimeriez plusieurs.

Code :

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

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

xhr.responseText va donc apparaitre dans la cellule numéro 0 de newRow.

**billyrose** · 23/06/2009, 13h43

oui justement. j'ai vu que cet affichage est du au fait que je precise une seule cellule.
Mais la reponse renvoyee par xhr.responseText; a deja les <tr> et <td>. ce qui fait que je ne sais pas si c'est possible de parser xhr.responseText de sorte que je puisse identifier </td>

**E.Bzz** · 23/06/2009, 13h46

Bonjour,

Envoyé par billyrose

Mais la reponse renvoyee par xhr.responseText; a deja les <tr> et <td>.

Pas bon ça : il faut que tu les crées toi, puis que tu n'insères que du texte dans le <td> ...

A+

**vermine** · 23/06/2009, 13h47

En fait, votre nouvelle ligne n'est composée que d'une cellule et cette cellule est composée elle-même d'une ligne à quatre cellules (sans table, je ne sais pas ce qu'il comprend effectivement).

PS: n'y-t-il pas moyen de repartir sur le tout premier post que vous avez ouvert à ce sujet ?

**billyrose** · 23/06/2009, 13h52

Envoyé par E.Bzz

Bonjour,
Pas bon ça : il faut que tu les crées toi, puis que tu n'insères que du texte dans le <td> ...

A+

jái aussi essayer cette option. je vais la reconsiderer

**andry.aime** · 23/06/2009, 13h53

STP quelle est la difference entre type="submit" et type="button"?

submit sert à envoyer un formulaire et la page sera recharger, mais button sert à appeler une fonction.

**billyrose** · 23/06/2009, 13h54

Envoyé par vermine

En fait, votre nouvelle ligne n'est composée que d'une cellule et cette cellule est composée elle-même d'une ligne à quatre cellules (sans table, je ne sais pas ce qu'il comprend effectivement).

PS: n'y-t-il pas moyen de repartir sur le tout premier post que vous avez ouvert à ce sujet ?

voila la reponse renvoyee par xhr.response (please voir fichier attache).

Jái encore ce post mais le pb est que la cellule3 qui devait contenir la liste deroulante plantait

**billyrose** · 23/06/2009, 13h54

Envoyé par andry.aime

submit sert à envoyer un formulaire et la page sera recharger, mais button sert à appeler une fonction.

Merci

**vermine** · 23/06/2009, 13h57

Oui, il y a donc trop d'information si on repart sur le code d'avant (celui d'il y a quelques jours). Il ne faudrait que le select et les options, voire les options uniquement si possible. Mais, ça veut dire qu'il faut remixer vos codes pour revenir à la méthode utilisée il y a quelques jours, avec les quelques modifications nécessaires apportées hier et aujourd'hui. J'avoue que je n'ai pas suivi l'évolution de votre code entre les deux posts.

**E.Bzz** · 23/06/2009, 13h57

Envoyé par billyrose

voila la reponse renvoyee par xhr.response (please voir fichier attache)

Ça ne fait que confirmer

D'autant que, ajouté via innerHTML, ton select ne sera pas pris en compte dans le <form>. Il faut le créer avec les fonctions DOM.

A+

**E.Bzz** · 23/06/2009, 14h01

Discussion fusionnée avec la précédente : ça évitera de répéter tout ce qui a déjà été dit et dont tu ne tiens pas compte

Merci de tout relire à tête reposée avant de continuer les questions !

A+

**andry.aime** · 23/06/2009, 14h02

Structure la résultat du requête en XML et tu remplis ton select avec.

**billyrose** · 23/06/2009, 14h06

voila ou j'en suis avec les DOM :

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
117
<?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.innerHTML=xhr.responseText;
						cell3.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="button" Name= "Ajouter" Value="Ajouter" onclick="go()"></td></tr>
 
 
	</table>
</form> 
</body>
</html>

Voila ce a quoi je suis arriver.
Mais bien entendu ca ne marche pas a cause de ceci:

Code :

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

1
2
3
4
5
var cell_3 = document.createElement("td");
var cell3.innerHTML=xhr.responseText;
cell3.innerHTML = cell3;
cell_3.appendChild(cell3);
row.appendChild(cell_3);

Creation tables apres click sur un bouton

JavaScript

Discussions similaires

Partager

Partager