Insérer un grand nombre de lignes et afficher span

**Zarkoffe** · 13/11/2018, 16h50

Je n'ai rien dans mes logs

que j'essaye ce que j'ai expliqué au post précédent, ou que je garde ma solution, j'ai simplement un

ReferenceError: nom is not defined

(grâce au console.log!)
Mais puisque l'insertion se fait malgrès tout j'en tiens pas compte.
Quel méthode, quelle fonction, comment procéder pour faire comprendre au JS que je balance plusieurs lignes d'un tableau?

PS : je n'ai pas dis "ça fonctionne pas" j'ai expliqué tout de A à Z, avec en prime l'intégralité du code.
merci

Invité · 13/11/2018, 16h59

Envoyé par jreaux62

...Dans l'AUTRE DISCUSSION (...) je t'ai montré comment récupérer TOUTES LES VALEURS.

Et j'ai écrit un EXEMPLE SIMPLE.

**NoSmoking** · 13/11/2018, 17h14

Bonjour,
j'amène mes deux cents à la discussion !

Ce genre de soucis a déjà été traité sur le forum et j'ai donné en son temps une façon de procéder.
• Insertion/Suppression d'une ligne d'une TABLE.

**psychadelic** · 13/11/2018, 17h19

Envoyé par Zarkoffe

Autant pour moi Psy, ça marche, soucis de biblio de ma part.
@jreaux62 ma console est vide. J'ai suivis tes conseils et j'ai simplifié mon exemple.

J'ai maintenant un exemple qui fonctionne : insertion d'une ligne + span affiché.
Objectif : insérer plusieurs lignes. (seulement la 1ère s'insere... et c'est normal vu le JS. Je ne retourne que 2 variables simples ici). Seulement dès que je repars sur des retournements d'array du style

Code :

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

devis_ref: Object.values(document.getElementsByClassName('devis_ref[]')).map(el => el.value),

Ca part en couille. Je vous mets mon code au complet en dessous.

script.js

Code :

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

1
2
3
4
5
6
7
$(document).ready(function(){
    $('.submit').click(function(){
    $(".msg").slideDown().load("send.php", {
     nom: $('.nom').val(),
    message: $('.message').val()});
  });
});

Voilà. Je ne comprends pas pourquoi le js refuse que je calibre mon code en tableau [] car ce sont bien des lignes de tableaux qu'il reçoit... merci d'avance

purée...
bon, visiblement tu n'a même pas testé mon code.
les lignes 91 à 99 ont aussi réglé ce problème:

ok, mais il n'y en a pas 1 seul mais plusieurs éléments utilisant cette même classe, et il n'enverra que le premier trouvé

et je t'ai aussi explique ce qui cloche dans ton code d'exemple:

tu ne fais pas passer plusieurs variables , mais juste la première de chacune des éléments ayant pour classes nom ou message.

Une des bonnes méthodes : ( copie des lignes 91 à 99)

Code JavaScript :

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

1
2
3
4
5
6
7
8
9
    $('#bt_Envoi').click(function() {
      var params_envoi = {
        nom: [], 
        message: []
      } 
      $(".nom").each(function()     {  params_envoi.nom.push( $(this).val()); });
      $(".message").each(function() {  params_envoi.message.push( $(this).val()); });
      $(".msg").slideDown().load("send.php", params_envoi);
    });

au passage, je crois que c'est une des solutions proposées par jreaux62, ou du moins dans une forme proche..

**Zarkoffe** · 13/11/2018, 17h24

D'accord je vais me référer à ton exemple alors.

avant: script.js:9:5
après:[] script.js:11:5
avant: script.js:17:5
après:[] script.js:19:5

Ca semble vide. Et mon système ne fonctionne plus maintenant.
Mon système du post précédent marche pour une ligne :

Code :

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

1
2
3
4
5
6
7
8
 
$(document).ready(function(){
    $('.submit').click(function(){
    $(".msg").slideDown().load("send.php", {
     nom: $('.nom').val(),
    message: $('.message').val()});
  });
});

Cela (tiré de ton exemple) ne marche pas et ne renvoie aucune valeur (voir haut du post).

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
 
$(document).ready(function(){
	$('.submit').on('click', function( event ){
		event.preventDefault();
 
		var nom = []; // array
		$('input[name^=nom]').each(function() {
			nom.push($(this).val());
		});
    console.log( 'avant:'+nom ); 
    nom = JSON.stringify(nom); 
    console.log( 'après:'+nom ); 
 
    var message = []; // array
		$('input[name^=message]').each(function() {
			message.push($(this).val());
		});
    console.log( 'avant:'+message ); 
    message = JSON.stringify(message); 
    console.log( 'après:'+message ); 
		// ----------
	});
});

Invité · 13/11/2018, 17h25

Envoyé par psychadelic

...au passage, je crois que c'est une des solutions proposées par jreaux62, ou du moins dans une forme proche...

+1
C'est effectivement proche de ce que j'ai proposé dans ce script, dans l'AUTRE discussion...

Malheureusement, quand :

on ne maitrise pas les BASES du langage,
et qu'on s'accroche à son code comme un morpion à un poil de luc au lieu de faire des EXERCICES SIMPLES (!!!) pour APPRENDRE ces BASES,

...on ne COMPREND pas forcément les RÉPONSES fournies.
Donc, on ne sait pas les appliquer.

N.B. Et ouvrir DEUX discussions n'aide pas non plus à y voir plus clair.
Au contraire.

Invité · 13/11/2018, 17h29

@Zarkoffe

OK.
Essayons d'être un peu plus pédagogue...

Code :

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

1
2
3
4
		var nom = []; // array
		$('input[name^=nom]').each(function() {
			nom.push($(this).val());
		});

1- Comprends-tu cette syntaxe, ou pas ?

2- As-tu TESTE mon EXEMPLE SIMPLE (et fonctionnel) ?

**Zarkoffe** · 13/11/2018, 17h33

Tu as insisté pour que je donne les console log, les voilà.
Je te donne exactement ton code appliqué à mon pb pour te montrer que ta solution plante, et tu me renvois "va faire des exos".
Peux-tu (si tu le sais...) m'indiquer ce qui bloque dans TON système?
On redéfinit les 2 variables en [] donc on perds leurs valeurs qui viennent d'être récupéré dans le formulaire... Apprends moi quelque chose, au lieu de te moquer stp.

PS : Bien sûr que je l'ai testé, ils renvoient des array vide (regarde mon commentaire précédent

) Oui je comprends cette syntaxe, bien sûr

Merci d'avance

Invité · 13/11/2018, 17h38

Envoyé par Zarkoffe

...Je te donne exactement ton code appliqué à mon pb pour te montrer que ta solution plante...

C'est en ça que tu est BORNÉ !
Tu veux "appliquer à ton problème", sans TESTER A PART !

Le code FONCTIONNE !

**Zarkoffe** · 13/11/2018, 17h53

J'peux te poser une dernière question?
Pourquoi faire ça :

Code :

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

1
2
 
	devis_ref = JSON.stringify(devis_ref);

merci.

Invité · 13/11/2018, 17h56

Réponse dans ton AUTRE discussion....

**Zarkoffe** · 13/11/2018, 17h59

"JSON.stringify() convertit une valeur JavaScript en chaîne JSON"
J'veux bien, j'ai déjà regardé dans la doc pour comprendre ce que c'est. Mais dans quel but utiliser ça?

**Zarkoffe** · 13/11/2018, 18h06

Peux-tu répondre à une dernière question ? dans ton exemple, tu utilises directement les input pour développer tes array : client_ref[]
Comment l'appliquer ici?

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
 
function addRow(tableID) {
 
      var table = document.getElementById(tableID);
 
      var rowCount = table.rows.length;
      var row = table.insertRow(rowCount);
 
      var cell1 = row.insertCell(0);
      var element1 = document.createElement("input");
      element1.type = "checkbox";
      element1.name="chkbox[]";
      cell1.appendChild(element1);
 
      var cell2 = row.insertCell(1);
      cell2.innerHTML = "<input type='text' placeholder='Votre nom' class='nom' />";
 
      var cell3 = row.insertCell(2);
      cell3.innerHTML = "<textarea placeholder='Votre message' class='message'></textarea>";
      }

Je traitais ça ensuite en php (que je maitrise un peu mieux que 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
 
?php
    if($_POST[submit])
    {
     foreach ($_POST['nom'] as $key => $value) 
        {
            $nom = $_POST["nom"][$key];
            $message = $_POST["message"][$key];
 
 
            $sql = mysql_query("insert into your_table_name values ('','$nom', '$message')");        
        }
 
    }   
?>

Seulement... c'est pas dynamique. J'ai donc voulu intégrer le script.js entre 2 pour traiter mes données.. et je suis donc venu ici pour poster ma question.

En tout cas merci pour tes efforts, ne t'inquiète pas tu ne m'as pas appris qu'à faire des console log (je ne connaissais rien du js, et j'y vois plus clair maintenant).

Je vais me débrouiller par la suite (je l'espère) merci!

**psychadelic** · 13/11/2018, 18h15

Et pourquoi tu n'essaie pas de tester le code que je t'ai mis dans post https://www.developpez.net/forums/d1.../#post10589846

il envoi les 2 tableaux de nom et de message , et il est compatible avec ton code php actuel. (pas testé mais tu peux faire un dump php pour vérifier)

**Zarkoffe** · 13/11/2018, 20h50

oui merci pour ta réponse psy!
j'ai essayé seulement ça bloque.
J'ai fais un

Code :

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

1
2
3
4
5
6
7
8
 
      $(".nom").each(function()     {  params_envoi.nom.push( $(this).val()); });
      $(".message").each(function() {  params_envoi.message.push( $(this).val()); });
      $(".msg").slideDown().load("send.php", params_envoi);
 
      console.log(nom);
      console.log(message);
      console.log(message);

et j'ai une erreur seulement sur nom

ReferenceError: nom is not defined[En savoir plus] index.php:101:7

Pourtant on le définit ligne 93 non?

PS: je remet le send.php que j'utilise. C'est juste pour me repérer, je sais bien qu'il n'est pas lié à l'erreur.

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
 
<?php $bdd = new PDO('mysql:host=localhost;dbname=ajax', 'root', '');
if(!empty($_POST['nom']) && !empty($_POST['message'])) {
 
 
  foreach ($_POST['nom'] as $key => $value)
  {
      $nom = trim($_POST["nom"][$key]);
      $message = trim($_POST["message"][$key]);
 
    $req = $bdd->prepare("INSERT INTO js(nom, message) VALUES(?,?)");
		$req->execute(array($nom,$message));
    echo "<span class='success'>Vos données ont été envoyées</span>";
  }
}
else{
  echo 'erreur';
}
 ?>

Merci d'avance

**psychadelic** · 13/11/2018, 21h37

a ton avis, que représente les lignes qui précèdent (l’extrait de code que tu donne) ?
à savoir:

Code JavaScript :

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

1
2
3
4
5
 
  var params_envoi = {
        nom: [], 
        message: []
      }

dans ton code initial :
on a :

Code JavaScript :

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

1
2
3
4
 $(".msg").slideDown().load("send.php", {
     nom: $('.nom').val(),
    message: $('.message').val()});
  });

avec la partie :

Code JavaScript :

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

1
2
3
4
{
     nom: $('.nom').val(),
    message: $('.message').val()
}

ça s'appelle un objet JavaScript, et ça à donné lieu à la création du format JSON qui à des règles d’écriture plus strictes.

Dans le cas de ton code initial cet objet est directement intégré dans l'appel du load.
Dans le cas de mon code cet objet est utilisé par adressage, et il porte le nom = params_envoi

donc coder console.log(nom); n'a aucune signification pour l'interpréteur JS.
Il faut écrire : console.log(params_envoi);ou console.log(params_envoi.nom);

**psychadelic** · 13/11/2018, 22h03

bon; je viens de regarder la doc jQuery et j'ai découvert que les données envoyées doivent être de type (plain Object) ce qui visiblement n'est pas le cas.

ça m'oblige à recharger Docker et mon container PHP sur ma machine; ça va me prendre un petit moment parce j'ai changé de Linux sur ma machine depuis.

au passage, j'ai vu que tu utilise un jQuery en version v1.11.1 de 2005 !
t'a peur de rien!
la version 3.3.1. est sortie depuis au moins 2 ans maintenant, je me demande d'ailleurs si c'est pas à cause de cela que ça bugg...

Invité · 13/11/2018, 22h08

@psychadelic
Lis l'autre discussion.

**Zarkoffe** · 13/11/2018, 22h47

Merci pour ta réponse.
Tu parles de ceci : https://api.jquery.com/jquery.isplainobject/ ?
Je ne pensais pas qu'insérer un tableau serait aussi compliqué :o
Je pensais vraiment que 2/3 connaissance en js suffirait... ce langage m'a l'air d'être un cauchemar sur patte :o
Merci d'avance

**psychadelic** · 13/11/2018, 23h43

Encore une fois, tu préfères considérer que le JS est un problème, alors qu'en fait on est ici dans un problème lié au formatage de données à transmettre, un pb TCP/IP ou je ne sais quoi, mais en tout cas pas un pb JS.
Ensuite ton code c'est du jQuery et non du JS pur.
En plus au travers un librairie obsolète datant de 13 ans.

Pour ma part ça fait un siècle que j'ai laissé tombé jQuery, et peut être un millénaire j'utilise uniquement du JSON pour transmettre et recevoir des données.
et heureusement en ES6 le Fetch est complètement mature.

Sinon, j'ai testé mon code sur mon serveur Docker et il marche comme un charme.

je sais pas ce que tu à bricolé avec ton PHP mais ça colle pas avec la base de donnée.

du coup, J'ai réécrit la partie send.php => send_x.php ainsi:

Code PHP :

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
<?php
header('Content-type: text/html; charset=utf-8');
 
if(!empty($_POST['nom']) && !empty($_POST['message']))
{
  foreach ($_POST['nom'] as $key => $value)
  {
    $nom     = trim($_POST["nom"][$key]);
    $message = trim($_POST["message"][$key]);
 
    echo( " nom : ".$key.'==>'.$nom .'<br>');
    echo( " msg : ".$key.'==>'.$message.'<br>');
    echo( " --  <br>" );
  }
  echo " : ) ";
}
else
{
  echo " ça foire :/ ";
}
exit(0);
?>

PS :
1- ben oui y a pas besoin d'utiliser une base de données pour savoir si des données sont bien reçues
2- le header n'est pas un truc superflu, idem pour le exit(0) (mais ça j'imagine que tu le sais déjà)

j'ai aussi viré la zone "msg" pour <div id="retour"> zone pour test retour du Load PHP </div>et utilisé un vrai jQuery à jour (331)
-- ça ce télécharge ici : https://jquery.com/download/
sinon utilise le CDN comme ici dans ce code

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
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
<!DOCTYPE html>
<html lang="fr">
 
<head>
  <meta charset="UTF-8" />
  <title>Poster en ajax</title>
  <link rel="stylesheet" href="ajax.css">
 
  <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
 
  <style>
    .myTablePlus {
      width : 1000px;
      border: 1px solid black;
    }
    .myTablePlus th,
    .myTablePlus td {
      border: 1px solid grey;
    }
    #retour {
      display: block;
      width: 90%;
      border: 1px solid orange;
      padding: 5px;
      height: 200px;
      overflow: auto;
    }
  </style>
</head>
 
<body>
  <h2>Ajax</h2>
  <div id="retour"> zone pour test retour du Load PHP </div>
 
  <button id="add_Row" class="btn btn-success">Ajouter un autre produit</button>
  <button id="Del_Row" class="btn btn-danger">Supprimer le produit</button>
 
  <table class="table table-bordered table-striped table-condensed myTablePlus">
    <thead>
      <tr>
        <th width="40"></th>
        <th width="40">nom</th>
        <th width="40">message</th>
      </tr>
    </thead>
    <tbody id="My_dataTable"> </tbody>
  </table>
 
  <button id="bt_Envoi" class="submit">Envoyer...</button>
 
  <script>
  $(document).ready(function()
  {
    var Table_noms_messages = document.getElementById('My_dataTable');
 
    $('#add_Row').click(function() {
      var
        rowCount      = Table_noms_messages.rows.length,
        nvlle_ligneT  = Table_noms_messages.insertRow(rowCount),
        cell_0        = nvlle_ligneT.insertCell(0),
        cell_1        = nvlle_ligneT.insertCell(1),
        cell_2        = nvlle_ligneT.insertCell(2),
        nv_input      = document.createElement("input")
      ;
      nv_input.type  = "checkbox";
      nv_input.name  = "chkbox[]";
 
      cell_0.appendChild(nv_input);
      cell_1.innerHTML = "<input type='text' placeholder='Votre nom' class='nom' />";
      cell_2.innerHTML = "<textarea placeholder='Votre message' class='message'></textarea>";
    });
 
    $('#Del_Row').click(function() {
      try {
        var rowCount = Table_noms_messages.rows.length;
        for(let i=0; i<rowCount; i++) {
          let
            ligneT = Table_noms_messages.rows[i],
            chkbox = ligneT.cells[0].childNodes[0]
          ;
          if(chkbox!=null && chkbox.checked)
          {
            Table_noms_messages.deleteRow(i);
            rowCount--;
            i--;
          }
        }
      }
      catch(e) {
        alert(e);
      }
    });
 
    $('#bt_Envoi').click(function() {
      var params_envoi = {
        nom: [], 
        message: []
      };
      $(".nom").each(function()     { params_envoi.nom.push( $(this).val()); });
      $(".message").each(function() { params_envoi.message.push( $(this).val()); });
 
      $("#retour").load("send_x.php", params_envoi );
 
      console.log( params_envoi );  // au cas ou t'aurrais pas fait le test
 
    });
  });
</script>
</body>
</html>

Insérer un grand nombre de lignes et afficher span

jQuery

Discussions similaires

Partager

Partager