JS INSERT dynamique

Insertion dynamique : blocage

Anonyme

19 octobre 2018 à 12:14:15

Bonjour,

Je souhaiterai faire des insertions dynamiques de lignes dans un tableau.Seulement l'insertion en se fait pas lorsque j'essaye d'introduire du JS pour éviter le rechargement de page. Merci d'avance.

1.php

<HTML>
  <HEAD>
  <meta charset="utf-8">
  <title>Poster en ajax</title>
  <link rel="stylesheet" href="ajax.css">
  <script src="jquery.min.js"></script>
  <script src="script.js"></script>


<TITLE> Add/Remove dynamic rows in HTML table </TITLE>

<SCRIPT language="javascript">
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'  name='devis_ref[]' class='devis_ref[]' />";

      var cell3 = row.insertCell(2);
      cell3.innerHTML = "<input type='text'  name='devis_contact[]' class='devis_contact[]' />";
      //cell2.innerHTML = "<select name='item[]' id='facture_fournisseur' type='text' class='form-control'>< $list = $bdd->query('SELECT * FROM fournisseur');while ($data = $list->fetch()) { ?><option value='< echo $data['fournisseur_nom']; ?>'> < echo $data['fournisseur_nom']; ?></option>< } $list->closeCursor(); ?></select>";

      var cell4 = row.insertCell(3);
      cell4.innerHTML = "<input type='text'  name='devis_refarticle[]' class='devis_refarticle[]' />";

      var cell5 = row.insertCell(4);
      cell5.innerHTML =  "<input type='text'  name='devis_designationarticle[]' class='devis_designationarticle[]' />";

      var cell6 = row.insertCell(5);
      cell6.innerHTML = "<input type='text'  name='devis_pu[]' class='devis_pu[]' />";

      var cell7 = row.insertCell(6);
      cell7.innerHTML =  "<input type='text'  name='devis_unite[]' class='devis_unite[]' />";

      var cell8 = row.insertCell(7);
      cell8.innerHTML = "<input type='text'  name='devis_quantite[]' class='devis_quantite[]' />";

      var cell9 = row.insertCell(8);
      cell9.innerHTML =  "<input type='text'  name='devis_prixnetunite[]' name='devis_prixnetunite[]' />";
      }

    function deleteRow(tableID) {
        try {
        var table = document.getElementById(tableID);
        var rowCount = table.rows.length;

        for(var i=0; i<rowCount; i++) {
            var row = table.rows[i];
            var chkbox = row.cells[0].childNodes[0];
            if(null != chkbox && true == chkbox.checked) {
                table.deleteRow(i);
                rowCount--;
                i--;
            }
        }
        }catch(e) {
            alert(e);
        }
    }

</SCRIPT>
</HEAD>
<BODY>
      <div class="return"></div>
      <div class="msg"></div>
<form action="" method="post" name="f">
  <INPUT type="button" class="btn btn-success" value="Ajouter un autre produit" onClick="addRow('dataTable')" />

  <INPUT type="button" class="btn btn-danger" value="Supprimer le produit" onClick="deleteRow('dataTable')" />


<table class="table table-bordered table-striped table-condensed" width="1000" border="1">
<thead>
<tr>
<th width="40"></th>
<th width="40">ID</th>
<th width="40">Contact</th>
<th width="40">Référence Article</th>
<th width="40">Désignation Article</th>
<th width="40">Prix unitaire</th>
<th width="40">Unité</th>
<th width="40">Quantité</th>
<th width="40">Prix Net Unitaire</th>
</tr>
</thead>
<tbody id="dataTable">

</tbody>
</TABLE>


<INPUT type="submit" value="Insert" name="submit" />
</form>
</BODY>

script.js

$(document).ready(function(){
    $('.submit').click(function(){
    $(".msg").slideDown().load("2.php", {
    devis_ref: $('.devis_ref').val(),
    devis_contact: $('.devis_contact').val(),
    devis_refarticle: $('.devis_refarticle').val(),
    devis_designationarticle: $('.devis_designationarticle').val(),
    devis_pu: $('.devis_pu').val(),
    devis_unite: $('.devis_unite').val(),
    devis_quantite: $('.devis_quantite').val(),
    devis_prixnetunite: $('.devis_prixnetunite').val()});
  });
});

<?php try { $bdd = new PDO('mysql:host=localhost;dbname=contact', 'root', '', array (PDO::MYSQL_ATTR_INIT_COMMAND => 'SET NAMES \'UTF8\''));}
catch (Exception $e) {
  die('Erreur : ' . $e->getMessage()) ; }
$bdd->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);

    if(isset($_POST['submit']))
      {
       foreach ($_POST['devis_ref'] as $key => $value)
          {
              $devis_ref = $_POST["devis_ref"][$key];
              $devis_contact = $_POST["devis_contact"][$key];
              $devis_refarticle = $_POST["devis_refarticle"][$key];
              $devis_designationarticle = $_POST["devis_designationarticle"][$key];
              $devis_pu = $_POST["devis_pu"][$key];
              $devis_unite = $_POST["devis_unite"][$key];
              $devis_quantite = $_POST["devis_quantite"][$key];
              $devis_prixnetunite = $_POST["devis_prixnetunite"][$key];

              $req = $bdd->prepare("INSERT INTO devis(devis_ref, devis_contact, devis_refarticle, devis_designationarticle, devis_pu, devis_unite, devis_quantite, devis_prixnetunite) VALUES(?,?,?,?,?,?,?,?)");
              $req->execute(array($devis_ref,$devis_contact,$devis_refarticle,$devis_designationarticle,$devis_pu,$devis_unite,$devis_quantite,$devis_prixnetunite));

          }
    }

?>

merci d'avance.

ox223252

19 octobre 2018 à 14:53:25

je suis pas sur d'avoir bien tout compris, tu as une page web, et tu veux dynamiquement ajouter du javascript ?

si oui regarde

eval ("la string contenant du javascript") ;

-
Edité par ox223252 19 octobre 2018 à 14:54:09

la connaissance est une chose qui ne nous appauvrit pas quand on la partage.

Mon GitHub

Anonyme

20 octobre 2018 à 20:38:53

Merci pour ta réponse.

Merci mais en quoi mon système bloque t-il? Merci

ox223252

21 octobre 2018 à 20:39:01

ox223252 a écrit:

je suis pas sur d'avoir bien tout compris, tu as une page web, et tu veux dynamiquement ajouter du javascript ?

Est-ce bien ça ?

la connaissance est une chose qui ne nous appauvrit pas quand on la partage.

Mon GitHub

Anonyme

21 octobre 2018 à 21:28:21

Oui c'est ça, comme vous pouvez le voir dans le code que j'ai posté (script.js)

si vous voyez un problème dans mon code je suis preneur merci

-
Edité par Anonyme 21 octobre 2018 à 21:39:45

Anonyme

23 octobre 2018 à 9:14:47

up please

ox223252

23 octobre 2018 à 9:20:49

je n'ai pas fais de php depuis longtemps ^^, et je n'utilise pas JQuery, donc je vais pas pouvoir t'aider à la relecture de code, mais bon.

Tu ajoutes donc du JS dans ta page une fois qu'elle est chargé ? mais à quel moment en fais tu l'évaluation ?

la connaissance est une chose qui ne nous appauvrit pas quand on la partage.

Mon GitHub

Anonyme

23 octobre 2018 à 9:35:38

Quand je submit, j'appelle mon script.js qui récupère mes variables et qui les renvoient vers 2.php pour l'insertion.

Tout mon code est là, j'utilise un css et forcément la librairie jquery.

ox223252

23 octobre 2018 à 9:43:54

alors il faut un eval quelque part, sinon c'est comme si tu rajoutais du texte, pour que ce soit interprété par ton navigateur il faut faire un eval :

var string = "alert(text);"

eval ( string );

la connaissance est une chose qui ne nous appauvrit pas quand on la partage.

Mon GitHub

Anonyme

23 octobre 2018 à 10:10:50

Merci pour ta réponse.

Pourrais tu être un peu plus précis? Quelle variable voudrait tu que je passe en paramêtre?

Et pourquoi un alert()? Je n'ai pas de faire ça.

Merci d'avance

ox223252

23 octobre 2018 à 11:13:16

c'est un simple exemple, tu dois passer au eval, une chaine de caractère contenant le contenu je javascript que tu viens de charger.

Addmettons que tu face une requette (AJAX par exemple), qui te renvoie du code javascript, ce code tu le place dans un truc comme ceci :

<script id="newScript">
    alert ( "mon script chargé en AJAX" );
</script>

jusque là tu sais faire ?

Si oui continuons :

// ça, ça doit être appelé apres avoir céé le nouvelle élément javascript 
var str = document.getElementById( "newScript" ).innerHTML;
eval ( str );

Et voila le tour est joué

la connaissance est une chose qui ne nous appauvrit pas quand on la partage.

Mon GitHub