Insertion dans BD par Ajax et eventuellement JavaScript

Version imprimable

Bonjour le forum!
Je remplis un tableau HTML dynamiquement par javascript. Maintenant j'aimerais savoir comment envoyer les lignes de ce tableau dans la base de données en utilisant Ajax et le tableau (Array) de javascript( le but étant de stocker aussi les données dans un array pour après les parcourir et les mettre dans la base de données.Il faut aussi avoir la possibilité de supprimer les données au niveau du tableau javascript (array)

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
<?php 
include ("haut.php");
 
if (isset($_POST['btndemande'])) { 
        echo "aaaa";
        include("insertiondemande.php");
 
        }
?>
 <script type="text/javascript" src="jquery-1.7.1.min.js"></script>
        <script type="text/javascript" src="liste.js"></script>
		<div class="col-sm-8 text-left"> 
<script language="JavaScript">
function ajouterLigne()
{ 
	var tableau = document.getElementById("tableau");
 
	var ligne = tableau.insertRow(-1);//on a ajouté une ligne
 
	var colonne1 = ligne.insertCell(0);//on a une ajouté une cellule
	colonne1.innerHTML += document.getElementById("localite_deux").value;//on y met le contenu de titre
var select = document.getElementById("localite_deux" );
 
var valeur = select.options[select.selectedIndex].text;
	var colonne2 = ligne.insertCell(1);//on ajoute la seconde cellule
	colonne2.innerHTML +=valeur; 
 
 
 
	var colonne3 = ligne.insertCell(2);//on ajoute la troisieme cellule
	colonne3.innerHTML +=document.getElementById("quantite").value;
	var rowNumber = document.getElementById("tableau").rows.length
	var colonne4= ligne.insertCell(3);//on ajoute la quartrieme cellule
	colonne4.innerHTML +=rowNumber-1;
var numo=rowNumber-1;
var colonne5= ligne.insertCell(4);//on ajoute la quartrieme cellule
	colonne5.innerHTML +='<td><input type="button" onclick="supprimerLigne(this.parentNode.parentNode.rowIndex);" value="supprimer"/></td>'
 
}
 
function supprimerLigne(num)
{var num1=num+1;
	document.getElementById("tableau").deleteRow(num);
}
      </script>
 <select id="localite_un">
        	<option value="">Choisir la famille</select>
        </select>
        <select id="localite_deux">
        	<option value="">Choisir l'article</select>
        </select>
 
               <label for="textdirection"> Quantité:</label>
			   <input type="numerique" name="Quantité" id="quantite">
 
			   <br><input type="submit" name ="btndemande" value= "créer une demande" class="btn btn-primary" >
			    <button type="reset" name="annuler" value="annuler" class="btn btn-primary">Annuler</button>
 
				<input type="button" onclick="ajouterLigne();" value="Enregistrer"/>
 
<div dir="rtl" style="height:100px;overflow-y:scroll;">
 
<table id="tableau" border="1"  style="width:100%" dir="ltr">
	<thead>
		<tr>
			<th>Article</th>
			<th>libelle</th>
			<th>Quantite</th>
			<th>numero de ligne</th>
			<th>supprimer</th>
 
			</tr>
	</thead>
	<tbody id="contenub">
 
	</tbody>
</table>
</div>
</form>
 
 
 
 
 
    </div>
 
 
 
<?php 
include ("bas.php")
?>

16/05/2018, 01h35
bonjourajax

Bonsoir,
Tu peux utiliser ajax quelle est ta requête?

Bonjour,

je te propose cet algorithme, il te permettra de sérialiser ton tableau au format JSON.
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 function tableToJSON(table) { var json = []; var headers = []; for (let th of table.querySelectorAll("thead th")) { headers.push(th.textContent.trim()); } var numCols = headers.length; for (let row of table.tBodies[0].rows) { let rowJson = {}; for (let i = 0; i < numCols; i++) { rowJson[headers[i]] = row.cells[i].textContent.trim(); } json.push(rowJson); } return json; }
Pour que le code reste relativement simple, j’ai fait plusieurs hypothèses :

ton tableau n’a qu’un seul <tbody>
les lignes ont toujours le même nombre de cellules

Si une de ces conditions vient à changer, il faudra adapter le code.

17/05/2018, 00h13
cricos

Citation:

Envoyé par bonjourajax

Tu peux utiliser ajax quelle est ta requête?

c'est une requete insertion

Citation:

Envoyé par Watilin

je te propose cet algorithme, il te permettra de sérialiser ton tableau au format JSON.

je vais essayer de mieux comprendre ta proposition sinon le but est de le parcourir et d'inserer le contenu dans un bd
17/05/2018, 03h15
bonjourajax

Pour l'insertion dans la base de données tu as plusieurs choix INSERT INTO, UPDATE.
17/05/2018, 12h52
cricos

Citation:

Envoyé par bonjourajax

Pour l'insertion dans la base de données tu as plusieurs choix INSERT INTO, UPDATE.

c'est insert into
17/05/2018, 13h21
bonjourajax

Regarde ici:
INSERT INTO
17/05/2018, 18h28
NoSmoking

Bonjour,
j'aurais tendance à dire, et ce sans vouloir être vulgaire, on se fout de ce que tu fais côté serveur sur un forum javascript :aie:

As tu au moins essayé le code que t'a fourni Watilin, la résolution de ton problème ,là au moins, pourrait sûrement avancer !!
18/05/2018, 09h07
cricos

bonjour. J'ai essayé le code de Watilin. Le json retourné est vide. Quand j'essaie d'afficher le nombre de colonnes ( console.log(numCols)) il me renvoie le nombre exacte.au niveau de la seconde boucle for il y a un petit souci apparemment.

Pourrais tu expliquer ce que tu essaies de faire avec ce code
Code:

1 2 var colonne5 = ligne.insertCell(4); //on ajoute la quartrieme cellule colonne5.innerHTML += '<td><input type="button" onclick="supprimerLigne(this.parentNode.parentNode.rowIndex);" value="supprimer"/></td>'
tu mets une <td> dans une <td> !

Sert toi de l'explorateur pour vérifier que le code HTML que tu crées est correct, regarde la console il est possible qu'elle t'indique des erreurs (F12).

OK mes excuses. J'avais déjà corrigé ces erreurs dans le passé. le code de la page actuellement:

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
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
 
<?php 
include ("haut.php");
 
if (isset($_POST['btndemande'])) {
        include("insertiondemande.php");
}
?>
 
<div class="col-sm-8 text-left">
	<form action="#" method="post">
		<select id="localite_un">
			<option value="">Choisir la famille</option>
		</select>
 
		<select id="localite_deux" name="localite_deux">
			<option value="">Choisir l'article</option>
		</select>
 
		<label for="textdirection"> Quantité:</label>
		<input type="number" name="quantite" id="quantite"><br>
 
		<input type="submit" name ="btndemande" value= "créer une demande" class="btn btn-primary" >
		<button type="reset" name="annuler" value="annuler" class="btn btn-primary">Annuler</button>
 
		<input type="button" onclick="ajouterLigne();" value="Enregistrer">
			<input type="button" onclick="tableToJSON(tableau);" value="test">
 
	</form>
 
	<div dir="rtl">
		<table id="tableau" border="1"  style="width:100%" dir="ltr">
			<thead>
				<tr>
					<th>Article</th>
					<th>libelle</th>
					<th>Quantite</th>
					<th>numero de ligne</th>
					<th>supprimer</th>				
				</tr>
			</thead>
			<tbody id="contenub">			
			</tbody>
		</table>
	</div>
</div>
 
<script type="text/javascript" src="liste.js"></script>
<script language="JavaScript">
	var produits = new Array();
 
	function ajouterLigne()	{
		var idProduit = document.getElementById("localite_deux").value;
		var qte = document.getElementById("quantite").value;
		produits.push({
			idProduit: idProduit,
			qte: qte
		});
		var tableau = document.getElementById("tableau");
		var ligne = tableau.insertRow(-1);
 
		var colonne1 = ligne.insertCell(0); //on a une ajouté une cellule
		colonne1.innerHTML += document.getElementById("localite_deux").value;//on y met le contenu de titre
		var select = document.getElementById("localite_deux" );
 
		var valeur = select.options[select.selectedIndex].text;
		var colonne2 = ligne.insertCell(1);//on ajoute la seconde cellule
		colonne2.innerHTML +=valeur; 
 
		var colonne3 = ligne.insertCell(2);//on ajoute la troisieme cellule
		colonne3.innerHTML +=document.getElementById("quantite").value;
		var rowNumber = document.getElementById("tableau").rows.length
		var colonne4= ligne.insertCell(3);//on ajoute la quartrieme cellule
		colonne4.innerHTML +=rowNumber-1;
		var numo=rowNumber-1;
		var colonne5= ligne.insertCell(4);//on ajoute la quartrieme cellule
		let btn = document.createElement("button");
		btn.textContent = "Supprimer";
		btn.addEventListener("click", function(ev) {
			produits.splice(ligne.rowIndex, 1);
			console.log(produits);
		});
		colonne5.appendChild(btn);
	}
 
 
 
	function tableToJSON(tableau) {
  var json = [];
 
  var headers = [];
  for (let th of tableau.querySelectorAll("thead th")) {
    headers.push(th.textContent.trim());
  }
  var numCols = headers.length;
  console.log(numCols);
 
  for (let row of tableau.tBodies[0].rows) {
    let rowJson = {};
    for (let i = 0; i < numCols; i++) {
      rowJson[headers[i]] = row.cells[i].textContent.trim();
    }
	console.log(rowJson);
    json.push(rowJson);
  }
 console.log(json);
  return json;
}
</script>
 
<?php
        include ("bas.php")
?>

Citation:

Le json retourné est vide.

Lorsque tu écris

Code:

1
2
var tableau = document.getElementById("tableau");
var ligne = tableau.insertRow(-1);

la ligne est insérée après la dernière ligne de la <table> et comme celle-ci est dans ton <thead> elle est rajoutée dans le <thead> et le <tbody> reste vide.

Si tu veux l'ajouter dans le <tbody> il te faut donc le préciser, quelque chose comme

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
function ajouterLigne() {
  var oDest = document.getElementById("contenub");
 
  var ligne = oDest.insertRow(-1); //on a ajouté une ligne
 
  var colonne1 = ligne.insertCell(0); //on a une ajouté une cellule
  colonne1.innerHTML = document.getElementById("localite_deux").value; //on y met le contenu de titre
 
  var colonne2 = ligne.insertCell(1); //on ajoute la seconde cellule
  var select = document.getElementById("localite_deux");
  var valeur = select.options[select.selectedIndex].text;
  colonne2.innerHTML = valeur;
 
  var colonne3 = ligne.insertCell(2); //on ajoute la troisieme cellule
  colonne3.innerHTML = document.getElementById("quantite").value;
 
  var colonne4 = ligne.insertCell(3); //on ajoute la quartrieme cellule
  colonne4.innerHTML = oDest.rows.length;
 
  var colonne5 = ligne.insertCell(4); //on ajoute la quartrieme cellule
  colonne5.innerHTML = '<input type="button" onclick="supprimerLigne(this.parentNode.parentNode.rowIndex);" value="supprimer"/>'
}

18/05/2018, 17h44
cricos

ok merci ça marche après avoir suivi tes conseils. Maintenant comment passer le json à php via ajax pour exécuter la requete insertion sur l'ensemble du contenu du json?
18/05/2018, 19h05
bonjourajax

Bonjour
Introduction a Ajax