Remplacement élément dans une cellule

Version imprimable

Bonjour,
J'ai le code suivant qui créer des cellules avec des inputs :

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
 
        $('#add_article').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),
            cell_3        = nvlle_ligneT.insertCell(3),
            cell_4        = nvlle_ligneT.insertCell(4),
            cell_5        = nvlle_ligneT.insertCell(5),
            cell_6        = nvlle_ligneT.insertCell(6),
            cell_7        = nvlle_ligneT.insertCell(7),       
            cell_8        = nvlle_ligneT.insertCell(8), 
            nv_input      = document.createElement("input")
        ;
        nv_input.type  = "checkbox";
        nv_input.name  = "chkbox[]";
 
        cell_0.appendChild(nv_input);
        cell_1.innerHTML = "<input type='text' class='form-control article_ref' />";
        cell_2.innerHTML = "<input type='text' class='form-control article_refarticle' />";
        cell_3.innerHTML = "<input type='text' class='form-control article_devis' />";
        cell_4.innerHTML = "<input type='text' class='form-control article_designationarticle' />";
        cell_5.innerHTML = "<input type='text' class='form-control article_pu' />";
        cell_6.innerHTML = "<input type='text' class='form-control article_unite' />";
        cell_7.innerHTML = "<input type='text' class='form-control article_quantite' />";      
        cell_8.innerHTML = "<input type='text' class='form-control article_prixnetunite' />";
    });

Je souhaiterai remplacer l'un de ces input par un select, tel que :

Code:

1
2
3
4
5
6
7
8
9
 
        cell_1.innerHTML = "<input type='text' class='form-control article_ref' />";
        cell_2.innerHTML = "                                    <select name="facture_produit" id="facture_produit" type="text" class="form-control col-lg-5 facture_produit">
                                        <?php $list = $bdd->query('SELECT * FROM produit ORDER BY produit_nom ASC');
                                        while ($data = $list->fetch()) { ?>
                                                <option value="<?php echo $data['produit_nom']; ?>"> <?php echo $data['produit_nom']; ?></option>
                                        <?php } $list->closeCursor(); ?>
                                    </select>";
        cell_3.innerHTML = "<input type='text' class='form-control article_devis' />";

Seulement cela ne marche pas.
Comment faire?
Merci

13/05/2019, 17h33
Pecose

Bonjour,
c'est quoi qui ne marche pas?
Ou alors mieux: Qu'est ce qui marche?
La connexion à la base de donnée?
T'es fonctions prises indépendamment?
Est ce que tu as au moins des petites pistes?
Tu as essayer de simplifier le code, d'isoler des petits bout?
14/05/2019, 01h18
psychadelic

c'est bizarre comme question : comment peux tu imaginer qu'un navigateur puisse exécuter lui même un script php ? (et qui en plus accède à une base de données !)

Merci pour vos réponses, et désolé de ne pas avoir été assez précis.
Ceci devrait être beaucoup plus clair : https://jsfiddle.net/zarkoffe/vksnoxhr/4/
Pour commencer, je voudrai insérer un <select></select> à place du premier intput, du style:

Code:

1
2
3
4
5
6
7
8
9
 
cell_1.innerHTML = "
                                    <select type='text' class='form-control facture_fournisseur'>
                                        <?php $list = $bdd->query('SELECT * FROM fournisseur');
                                        while ($data = $list->fetch()) { ?>
                                                <option value="<?php echo $data['fournisseur_nom']; ?>"> <?php echo $data['fournisseur_nom']; ?></option>
                                        <?php } $list->closeCursor(); ?>
                                    </select>
"

merci d'avance

16/05/2019, 11h13
Invité

Bonjour,

commence par regarder le code HTML généré.

Tu verras qu'il y a encore des erreurs dans ton code, notamment des " en trop (pas échappés) à l'intérieur d'autres "...".

Merci pour ta réponse, en effet il en restait 2. Mais le problème semble venir d'autre part. merci d'avance

Code:

1
2
3
4
5
6
7
8
9
 
        cell_1.innerHTML = "
                                    <select type='text' class='form-control facture_fournisseur'>
                                        <?php $list = $bdd->query('SELECT * FROM fournisseur');
                                        while ($data = $list->fetch()) { ?>
                                                <option value='<?php echo $data['fournisseur_nom']; ?>'> <?php echo $data['fournisseur_nom']; ?></option>
                                        <?php } $list->closeCursor(); ?>
                                    </select>
                                        "

Je te conseille de bien séparer le PHP du JavaScript :
Code:

1 2 3 4 5 6 7 8 9 10 11 12 <?php $le_select = ' <select type="text" class="form-control facture_fournisseur">'."\n"; $list = $bdd->query("SELECT * FROM fournisseur"); while ($data = $list->fetch()) { $le_select .= ' <option value="'. htmlspecialchars( $data["fournisseur_nom"], ENT_QUOTES ) .'">'. htmlspecialchars( $data["fournisseur_nom"], ENT_QUOTES ) .'</option>'."\n"; } $list->closeCursor(); $le_select .= ' </select>'."\n"; ?> // on insère le <select> dans le JS cell_1.innerHTML = '<?php echo htmlspecialchars( $le_select, ENT_QUOTES ); ?>';
NE PAS OUBLIER htmlspecialchars() !

PAR CONTRE, ce n'est pas très "malin" de mettre "fournisseur_nom" en value des option.
Il est plus judicieux de récupérer l'id "fournisseur_id" (auto-incrémenté, numérique, et forcément unique).

Bon, voici la bonne méthode pour ne pas ce faire des nœuds au cerveau (je suis spécialiste ;) )

dans la partie BODY:

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
 
  <table class="table table-bordered table-striped table-condensed">
    <thead>
      <tr>
        <th width="40"></th>
        <th width="1"></th>
        <th width="20">Ref</th>
        <th width="20">Ref Article</th>
        <th width="20">Désign Article</th>
        <th width="10">Unite</th>
        <th width="40">Prix Unitaire</th>
        <th width="40">Quantité</th>
        <th width="40">Prix Net Unité</th>
      </tr>
    </thead>
    <tbody id="table_article"></tbody>
  </table>
 
 
<!-- nouvelle table à ajouter sur l'interface, qui restera "invisible" -->
<!-- elle intègre une 'ligne type' à insérer dans le tableau précédent -->
 
 <table id="fantome" style="display:none">   <!-- enlever le display none lors des tests pour vérifier la validité du php  -->
  <tbody>
    <tr>
      <td><input type="checkbox" name="chkbox[]"></td>
      <!-- <td><input type="text" class="form-control article_ref"></td>  -->
      <td>
        <select type="text" class="form-control facture_fournisseur">
<?php
  $list = $bdd->query('SELECT * FROM fournisseur');
  while ($data = $list->fetch()) {
?>
          <option value="<?php echo $data['fournisseur_nom']; ?>"> <?php echo $data['fournisseur_nom']; ?></option>
<?php
  } 
  $list->closeCursor();
?>
        </select>
      </td>
      <td><input type="text" class="form-control article_refarticle" /></td>
      <td><input type="text" class="form-control article_devis"></td>
      <td><input type="text" class="form-control article_designationarticle"></td>
      <td><input type="text" class="form-control article_pu"></td>
      <td><input type="text" class="form-control article_unite"></td>
      <td><input type="text" class="form-control article_quantite"></td>
      <td><input type="text" class="form-control article_prixnetunite"></td>
    </tr>
  </tbody>
 </table>

et dans la partie JS / jQuery avoir tout simplement :

Code:

1
2
3
4
5
      const TR_Base = document.querySelector('#fantome tbody tr');
 
      $('#add_article').click(function () {    // "Ajouter un produit"
        Table_noms_messages.appendChild(TR_Base.cloneNode(true) );
      });

tout simlement ;)

après tu sera plus au clair pour débugger ta façon d'implémenter ton php.

20/05/2019, 11h20
Zarkoffe
@jreaux62 et @psychadelic, merci pour vos réponses à tous les 2.

@psychadelic ta solution est exactement ce que je voulais, cela fonctionne parfaitement, merci beaucoup! En plus de ça, je retravaille avec du HTML directement, et je préfère ça. (en plus du JS qui est maintenant beaucoup plus simple! Je retiendrai ces méthodes Jquery pour l'avenir :) ).

Dernier soucis: J'utilise le plugin SELECT2 comme ceci:

Code:

<select type="text" class="form-control" id="state">

Puis:
Code:

1 2 3 4 5 $(document).ready(function() { $("#state").select2({ tags: true });
L'objectif est d'avoir un select où l'utilisateur peut créer son propre élément si il ne le trouve pas dans la liste : https://select2.org/tagging

Avez-vous une idée du comment je fais pour indiquer dans mon Jquery la ligne du select? (si je ne n'indique qu'ID, alors mon JQUERY modifiera toutes mes lignes)

Merci d'avance
20/05/2019, 15h19
psychadelic

Citation:

Envoyé par Zarkoffe

@psychadelic /../ Je retiendrai ces méthodes Jquery ...

désolé mais le code que je t'ai proposé n'est pas du jQuery, ce sont uniquement des méthodes JS "pure vanilla"
https://developer.mozilla.org/en-US/.../querySelector
https://developer.mozilla.org/en-US/...de/appendChild

je ne connais pas ton select2, mais j'imagine qu'il faut utiliser principalement les méthodes présentes dans ce pluggin jQuery pour le manipuler, et non celles habituelles de jQuery "de base".

Sinon, il y a un principe ici : une question technique à la fois, si tu découvre d'autres problèmes autour de ton code qui ne concernent pas directement la question initiale, il faut ouvrir un autre sujet.

(et perso, je ne crois pas à l'avenir de jQuery, mais c'est un autre débat)