Remplacement élément dans une cellule

**Zarkoffe** · 13/05/2019, 16h51

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

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
 
        $('#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 :

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

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

**Pecose** · 13/05/2019, 17h33

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?

**psychadelic** · 14/05/2019, 01h18

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

**Zarkoffe** · 16/05/2019, 09h45

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 :

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

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

Invité · 16/05/2019, 11h13

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

**Zarkoffe** · 16/05/2019, 11h18

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

Code :

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

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

Invité · 16/05/2019, 11h19

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

Code :

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

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

**psychadelic** · 16/05/2019, 16h00

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

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

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.

**Zarkoffe** · 20/05/2019, 11h20

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

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

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

Puis:

Code :

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

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

**psychadelic** · 20/05/2019, 15h19

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)

Remplacement élément dans une cellule

jQuery

Discussions similaires

Partager

Partager