Discussion :

[Zarkoffe]

Bonjour,
J'ai le système suivant :

Principe : je sélectionne un élément dans la colonne "Ref", et grâce à de l'AJAX, lors de cette sélection, je charge le nom du produit dans la colonne "Ref Article" qui lui est attribué dans la bdd.
Le bouton "Ajouter un produit" ajoute une ligne, et celle d'à côté la supprime.
Mon problème: Lorsque je créé plusieurs lignes, le "Ref Article" invoqué vient se mettre sur la première ligne, ce qui est normal car je n'ai pas spécifié d'id de ligne à mon ajax. Comment m'y prendre?
voici mon code, merci d'avance :

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
        <button id="add_article" class="btn btn-success">Ajouter un produit</button>
        <button id="del_article" class="btn btn-danger">Supprimer le(s) produit(s)</button>
        <table class="table table-bordered table-striped table-condensed">
          <thead>
            <tr>
              <th width="2"></th>
              <th width="80">Ref</th>
              <th width="20">Ref Article</th>
            </tr>
          </thead>
          <tbody id="table_article"> </tbody>
        </table>
        <!-- lignes ajoutés au tableau -->
        <table id="fantome" style="display:none"> 
          <tbody>
            <tr>
              <td><input type="checkbox" name="chkbox[]"></td>
              <td>
                <select type="text" class="form-control scope article_ref" style="width: 100%;" onchange="ref_to_rearticle(this.value)">
                  <option></option>
                  <?php $list = $bdd->query('SELECT * FROM produit WHERE produit_contact = "'.$_SESSION['Contact_id'].'" ORDER BY `produit_ref` ASC');
                  while ($data = $list->fetch()) { ?>
                  <option value="<?php echo $data['produit_ref']; ?>"><?php echo $data['produit_ref']; ?></option>
                  <?php } $list->closeCursor(); ?>
                </select>
              </td>
              <td>
                <div id="article_refarticle">
                    Le produit sera chargé ici
                </div>
              </td>
            </tr>
</table>

Code JavaScript :

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
function ref_to_rearticle(produit_ref) {
  $.ajax({
    url: "modal_header/Actions/inputdevis.php",
    method: "POST",
    data: { article_ref: produit_ref }
  })
  .done(function( retour_html ) {
    $("#article_refarticle").html( retour_html );
  })
  .fail(function() {
    alert( "error facture creation ajax" );
  });	
}
  // AJOUTER UN ARTICLE DANS LE DEVIS               
  $(document).ready(function()
  {
    var Table_noms_messages = document.getElementById('table_article');
 
    const TR_Base = document.querySelector('#fantome tbody tr');
 
    $('#add_article').click(function () {    // "Ajouter un produit"
      var new_tr_clone = TR_Base.cloneNode(true);
      Table_noms_messages.appendChild( new_tr_clone );
 
      //select 2
      $( new_tr_clone ).find("select.form-control").select2({
        tags: true,
        width: 'resolve'
      });
    });
 
 
    $('#del_article').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);
        }
    });

inputdevis.php (l'ajax quoi):

Code php :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
<?php include '../../../Include/connect.php' ; 
 
      $article_ref  = (array_key_exists('article_ref', $_POST)) ? $_POST['article_ref']: NULL; 
      if ($article_ref) {
        $stmt = $bdd->prepare('
            SELECT * FROM produit
            WHERE produit_ref = :ref
        ');
        $stmt->bindValue(':ref', strtoupper($article_ref), PDO::PARAM_STR);
        $stmt->execute();
        if ($donnees = $stmt->fetch(PDO::FETCH_ASSOC)) { ?>
          <input class="form-control" type="text" value="<?php echo $donnees['produit_nom'] ?>" />
  } ?>

Merci d'avance

[Invité]

Bonjour,

1-

...ce qui est normal car je n'ai pas spécifié d'id de ligne à mon ajax. Comment m'y prendre?
...

La réponse est dans la question.

2-

Code HTML :

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

 <div id="article_refarticle">

Tu continue à mettre un id, alors que cette ligne est clonée...


3- Tu n'as tenu aucun compte de mes conseils dans ta précédente discussion (sur le même sujet !)
Dommages...

[Zarkoffe]

Merci pour ta réponse.
Oui mon problème vient bien de là, et si je le passe en classe, là ce sont donc tous mes champs qui changent (normal...)

J'ai vu ta réponse mais elle ne corresponds pas à ce que je veux.
Le select fait partie du tableau (voir le screenshot en haut de ce post), seulement tu me proposes de le mettre dès le chargement de la page, et ce n'est pas ce que je veux.

Code HTML :

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

1
2
3
4
5
6
7
8
<select type="text" id="select_produit">
	<option value="">...</option>
	<option value="1">article 1</option>
	<option value="2">article 2</option>
	<option value="3">article 3</option>
	<option value="4">article 4</option>
</select>
<button id="add_produit" class="btn btn-success">Ajouter un produit</button>

Et ton ajax regarde la valeur de ce select... enfin tout ça ne va pas, ce n'est pas du tout ce que je veux.
Et je ne vais pas casser tout mon système, je suis à 2 doigts de parvenir à ce que je veux faire, il me manque simplement ce dernier problème d'id de ligne.

merci d'avance

[Invité]

Bonjour,

voici la clé du Bonheur... :


1- Remplace :

Code HTML :

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

                <select type="text" class="form-control scope article_ref" style="width: 100%;" onchange="ref_to_rearticle(this.value)">

par :

Code HTML :

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

                <select type="text" class="form-control scope article_ref" style="width: 100%;">

Et :

Code HTML :

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

1
2
3
                <div id="article_refarticle">
                    Le produit sera chargé ici
                </div>

par :

Code HTML :

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

1
2
3
                <div class="article_refarticle">
                    Le produit sera chargé ici
                </div>

2- JS : supprime la fonction ref_to_rearticle(), et ajoute :

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
$(function(){
	$('#table_article').on('change', '.article_ref', function(){
		var article_ref = $(this).val();
		var article_refarticle = $(this).closest('.article_refarticle');
		$.ajax({
			url: "modal_header/Actions/inputdevis.php",
			method: "POST",
			data: { article_ref: article_ref }
		})
		.done(function( retour_html ) {
			article_refarticle.html( retour_html );
		})
		.fail(function() {
			alert( "error facture creation ajax" );
		});	
 
	});
});

[Zarkoffe]

Merci pour ta réponse.
J'aime bien ta solution, je crois que l'on touche au but.

J'ai essayé ton code, dans l'onglet réseau je vois que la requête se fait bien, le petit soucis c'est que la div ne se change pas après l'appel Ajax.
Comme mon système ajax fonctionnait, cela ne vient pas de ma requête (cela ne vient pas de inputdevis.php quoi).

Je pense que le soucis est lié au "closest". Je viens de me renseigner et je comprends son intérêt ici mais j'ai l'impression qu'il est à l'origine du soucis.
Peut-être faut-il un genre d'open en jquery après ou autre chose du genre.

Je cherche de mon côté, si tu as une idée je suis preneur, merci

Edit : ou peut-être que le "done" renvoie cette variable qui est "closest".. non?

[Invité]

Ce n'était pas la bonne clé * ?

Celle-ci devrait être la bonne :

Code :

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

		var article_refarticle = $(this).parent().next().find('.article_refarticle');

• $(this) : le <select> concerné
• $(this).parent() : le <td> contenant le <select>
• $(this).parent().next() : le <td> suivant
• $(this).parent().next().find('.article_refarticle') : trouve l'élément de classe "article_refarticle", dans le <td> suivant

* En effet, .closest() ne convenait pas.

For each element in the set, get the first element that matches the selector by testing the element itself and traversing up through its ancestors in the DOM tree.

Pour chaque élément de l'ensemble, obtenez le premier élément qui correspond au sélecteur en testant l'élément lui-même et en parcourant ses ancêtres dans l'arborescence DOM.