Insertion dans BD par Ajax et eventuellement JavaScript

**cricos** · 11/05/2018, 00h32

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 html :

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
<?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")
?>

**bonjourajax** · 16/05/2018, 01h35

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

**Watilin** · 16/05/2018, 14h37

Bonjour,

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

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
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.

**cricos** · 17/05/2018, 00h13

Envoyé par bonjourajax

Tu peux utiliser ajax quelle est ta requête?

c'est une requete insertion

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

**bonjourajax** · 17/05/2018, 03h15

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

**cricos** · 17/05/2018, 12h52

Envoyé par bonjourajax

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

c'est insert into

**bonjourajax** · 17/05/2018, 13h21

Regarde ici:
INSERT INTO

**NoSmoking** · 17/05/2018, 18h28

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

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 !!

**cricos** · 18/05/2018, 09h07

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.

**NoSmoking** · 18/05/2018, 09h22

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

Code :

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

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).

**cricos** · 18/05/2018, 09h44

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

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
 
<?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")
?>

**NoSmoking** · 18/05/2018, 14h48

Le json retourné est vide.

Lorsque tu écris

Code :

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

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 :

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
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"/>'
}

**cricos** · 18/05/2018, 17h44

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?

**bonjourajax** · 18/05/2018, 19h05

Bonjour
Introduction a Ajax

Insertion dans BD par Ajax et eventuellement JavaScript

AJAX

Discussions similaires

Partager

Partager