Deux appels mais un seul fonctionne

Version imprimable

Voir 40 message(s) de cette discussion en une page

21/09/2019, 22h06
Zarkoffe
Non je ne me mélange pas.
J'ai écris "Ce genre de chose ne fonctionne pas non plus : " => Cela signifie que j'ai essayé plusieurs manières d'obtenir le résultat que je veux, que ça soit par une div et ou encore par un input.
Aucune des 2 solutions de fonctionnent, et mon calcul fonctionne bien car quand je rentre manuellement la variable dans mon input ça marche.
J'aurai juste à laisser ma div telle quelle qui affiche le résultat à mon utilisateur, puis je balance la valeur dans l'input en hidden. Mais ceci ne semble pas fonctionner... as-tu une idée ?
Code:

1 2 3 4 article_designationarticle.html( retour.produit_nom ); article_pu.html(retour.produit_pu); document.getElementsByClassName("article_pu").value = retour.produit_pu;
merci :)
21/09/2019, 22h11
Invité

Là, il faudrait montrer tout le code, car je suis perdu...

Et voici :

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
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
 
        <table class="table table-bordered table-striped table-condensed">
          <thead>
            <tr>
              <th width="2"></th>
              <th width="80">Ref Article</th>
              <th width="20">Désign Article</th>
              <th width="5">Unite</th>        
              <th width="10">Prix Unitaire</th>
              <th width="10">Quantité</th>
              <th width="5">Remise</th>
              <th width="15">Total</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%;">
                    <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>
                  <div class="article_getrefarticle"></div>    
              </td>
              <td>
              <div class="article_designationarticle">
                  <select type="text" class="form-control scope article_designation" style="width: 100%;">
                    <option></option>
                    <?php $list = $bdd->query('SELECT * FROM produit WHERE produit_contact = "'.$_SESSION['Contact_id'].'" 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>
                  </div>
              </td>
              <?php //include 'inputdevis.php' ; ?>
              <td>
                <input type="hidden" class="article_devis">
                <input type="hidden" class="article_contact" value="<?php echo $_SESSION["Contact_id"] ?>" />
                <input type="number" class="form-control article_unite">
              </td>
              <td>
                <div class="article_prixunitaire">
                  Le prix unitaire
                </div>
                <input type="hidden" class="article_pu" step="0.01" >
                <label for="Tel">Après Remise:</label>
                <input type="text" class="form-control article_pu_avec_remise" readonly="readonly">
              </td>
              <td>
                <input type="number" step="1" class="form-control article_quantite">
              </td>
              <td>
                <div class="form-inline">
                  <input type="text" class="form-control article_remise" id="sumtoto">
                  <img class="sendto" src="../Assets/calculatrice.png" style="width: 40px; height: 40px; cursor: pointer;">
                </div>
                <div class="collapse">
                  <div class="form-group col-md-3 alert alert-info">
                    <label for="param1" style="font-size:12px;">Paramètre 1:</label>
                    <input type='text' class="form-control elem1" value="0">  
                  </div>
                  <div class="form-group col-md-3 alert alert-info">
                    <label for="param2" style="font-size:12px;">Paramètre 2:</label>
                    <input type='text' class="form-control elem2" value="0">  
                  </div>
                  <div class="form-group col-md-3 alert alert-info">
                    <label for="param3" style="font-size:12px;">Paramètre 3:</label>
                    <input type='text' class="form-control elem3" value="0">  
                  </div>
                  <div class="form-group col-md-3 alert alert-info">
                    <label for="param4" style="font-size:12px;">Paramètre 4:</label>
                    <input type='text' class="form-control elem4" value="0">  
                  </div>
                </div>
              </td>
              <td><input type="number" class="form-control article_total" readonly="readonly"></td>
            </tr>
          </tbody>
        </table>
 
        <h2 id="result"></h2>
        <div class="modal-footer">
          <button type="button" class="btn btn-secondary" data-dismiss="modal">Retour</button>
          <button id="bt_Envoi" class="btn btn-primary submit">Enregistrer le devis</button>
        </div>
      </div>
    </div>
  </div>
</div>

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
<script>
  /* Affiche le nom de l'article et son prix en fonction de la référence sélectionnée */
  $(function(){
		$('#table_article').on('change', '.article_ref', function(){
		  var article_ref = $(this).val();
		  var article_designationarticle = $(this).parent().siblings('td').find('.article_designationarticle');//closest remonte jusqu'au #table_article pour trouver .article_designationarticle
		  var article_pu=$(this).parent().siblings('td').find('.article_prixunitaire');//même chose ici avec closest()
		  $.ajax({
			url: "modal_header/Actions/ajax/getProduit.php",//un seul fichier php fera l'affaire.
			method: "POST",
			dataType:'json',// json ici obligatoire
			data: { article_ref: article_ref }
		  })
		  .done(function( retour ) {
			console.log('succes :',retour);
			  if(!retour.erreur){//si y'a pas d'erreur
				article_designationarticle.html( retour.produit_nom );
        article_pu.html(retour.produit_pu);
        document.getElementsByClassName("article_pu").value = retour.produit_pu;
			  }
			  else alert(retour.erreur);//sinon affiche l'erreur
		  })
      .fail(function(error) {
        alert( "error facture creation ajax :"+error.responseText );
		  });       
		}); 
	});
 </script>

puis getProduit.php

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
 
<?php 
    include '../../../../Include/connect.php' ; 
    $retour=[]; //déclaration du tableau $retour qui sera renvoyé par le fichier comme réponse.
    $article_ref  = (array_key_exists('article_ref', $_POST)) ? $_POST['article_ref']: NULL; 
    if ($article_ref!=null) {
        $stmt = $bdd->prepare('
            SELECT * FROM produit
            WHERE produit_ref = :ref
        ');
        $stmt->bindValue(':ref', $article_ref, PDO::PARAM_STR);//$article_ref est un chiffre, pas la peine de mettre strtoupper et bien-sûr PARAM_INT au lieu de PARAM_STR
        $stmt->execute();
        if($stmt->rowCount()>0){
		$retour=$stmt->fetch(PDO::FETCH_ASSOC);//on stocke le résultat dans $retour.
	}
	else{
		$retour['erreur']='Aucun produit n\'a été trouvé !';
	}
	$stmt->closeCursor();//libérer le curseur
 
    }
	echo json_encode($retour);//on renvoi $retour en tant que json ?>

J'ai découvers qu'il existait ce genre de chose, que j'ai essayé... en vain:

Code:

1
2
 
 $(".article_prixunitaire> input:hidden.article_pu").html();

Code:

1
2
3
 
        var essai = $('.article_prixunitaire').html();
        document.getElementsByClassName("article_pu").value = essai;

25/09/2019, 16h52
Zarkoffe

up please
25/09/2019, 17h02
Invité
"up" de quoi ?

On ne sait même plus où tu en es.
- Quelle est la question ?
- Qu'est-ce que tu as essayé depuis la dernière fois (3 jours) ?
- ... ?

Actuellement le retour de l'AJAX est renvoyé dans une div

Code:

<div class="article_designationarticle"></div>

Seulement je voudrai que le retour soit renvoyé vers un <select> (dès que la valeur arrive dans le <select>, sa valeur est donc la valeur renvoyée par l'AJAX).
Si j'essaye ceci, non seulement le select ne charge aucun élément mais en plus il ne réagit pas à la réception de la valeur (et ne m'affiche rien dans mes log, à part que le POST a bien eu lieu).

Code:

1
2
3
4
5
6
7
                <select type="text" class="article_designationarticle">
                  <option></option>
                  <?php $list = $bdd->query('SELECT * FROM produit WHERE produit_contact = "'.$_SESSION['Contact_id'].'" 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>

Pour rappel, l'ajax est celui-ci :

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
  /* Affiche le nom de l'article en fonction de la référence sélectionnée */
  $(function(){
		$('#table_article').on('change', '.article_ref', function(){
		  var article_ref = $(this).val();
		  var article_designationarticle = $(this).parent().siblings('td').find('.article_designationarticle');//closest remonte jusqu'au #table_article pour trouver .article_designationarticle
		  var article_pu=$(this).parent().siblings('td').find('.article_prixunitaire');//même chose ici avec closest()
		  $.ajax({
			url: "modal_header/Actions/ajax/getProduit.php",//un seul fichier php fera l'affaire.
			method: "POST",
			dataType:'json',// json ici obligatoire
			data: { article_ref: article_ref }
		  })
		  .done(function( retour ) {
			console.log('succes  from ref:',retour);
			  if(!retour.erreur){//si y'a pas d'erreur
				article_designationarticle.html( retour.produit_nom );
        article_pu.html(retour.produit_pu);
			  }
			  else alert(retour.erreur);//sinon affiche l'erreur
		  })
      .fail(function(error) {
        alert( "error facture creation ajax :"+error.responseText );
		  });       
		}); 
	});
  /* fin */

Et la page visée:

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<?php 
    include '../../../../Include/connect.php' ; 
    $retour=[]; //déclaration du tableau $retour qui sera renvoyé par le fichier comme réponse.
    $article_ref  = (array_key_exists('article_ref', $_POST)) ? $_POST['article_ref']: NULL; 
    if ($article_ref!=null) {
        $stmt = $bdd->prepare('
            SELECT * FROM produit
            WHERE produit_ref = :ref
        ');
        $stmt->bindValue(':ref', $article_ref, PDO::PARAM_STR);//$article_ref est un chiffre, pas la peine de mettre strtoupper et bien-sûr PARAM_INT au lieu de PARAM_STR
        $stmt->execute();
        if($stmt->rowCount()>0){
		$retour=$stmt->fetch(PDO::FETCH_ASSOC);//on stocke le résultat dans $retour.
	}
	else{
		$retour['erreur']='Aucun produit n\'a été trouvé !';
	}
	$stmt->closeCursor();//libérer le curseur
 
    }
	echo json_encode($retour);//on renvoi $retour en tant que json ?>

Merci d'avance

25/09/2019, 17h32
Invité
1-
- contenu d'un <div> -> .html()
- valeur d'un <select -> .val()
2- Tu as 2 éléments différents, avec la même classe :
Code:

1 2 3 <div class="article_designationarticle"></div> <select type="text" class="article_designationarticle">
A toi de faire en sorte qu'il ne puisse pas y avoir confusion.

En gardant la même classe (mais il faut vraiment aimer se compliquer la vie !...) :
Code:

1 2 3 .find('div.article_designationarticle') .find('select.article_designationarticle')

C'est fou, on s'est de nouveau pas compris... mais bon ça ne fait rien. Soyons bref:

Merci pour ta réponse, en effet le passage en val() me permet de transmettre va variable à des select des input:
Code:

1 2 article_designationarticle.val( retour.produit_nom );
J'ai trouvé d'où vient mon problème : mon select ne réagit plus lorsqu'il est utilisé sous la librairie SELECT2.
Sans elle, la valeur de l'AJAX est récupérée sans problème. Avec elle, aucune réaction du <select> en question.
Seulement je dois impérativement l'utiliser ici sur mon select.
Je cherche de mon côté... si tu as une idée je suis preneur. merci :)

PS : soyons clair, quand je dis avec elle, j'ai rajouté ceci à mon select (une classe article_designation + l'appel par select2 en jquery lors de la création d'une nouvelle ligne dans mon tableau):
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 <td> <select type="text" class="article_designation article_designationarticle" style="width: 100%;"> <option></option> <?php $list = $bdd->query('SELECT * FROM produit WHERE produit_contact = "'.$_SESSION['Contact_id'].'" 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> </td> <script> $('#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(".article_designation").select2({ tags: true, width: 'resolve' }); }); </script>

25/09/2019, 19h20
Toufik83

Regarde ce lien qui montre comment utiliser $.ajax et select2.

1 pièce(s) jointe(s)

Merci beaucoup, tu as vu juste c'est exactement ça qu'il me fallait.
J'ai essayé mais le nom ne s'actualise pas. Seulement une nouvelle option se créer avec un nouveau "data-select2-id" à chaque itération. Peut-être que je m'y prends mal?
Pièce jointe 505819

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
 
        <table id="fantome" style="display:none"> 
          <tbody>
            <tr>
              <td><input type="checkbox" name="chkbox[]"></td>
              <td>
                  <select type="text" class="form-control article_ref article_getrefarticle" style="width: 100%;">
                    <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>
                <select type="text" class="form-control scope article_designation article_designationarticle" style="width: 100%;">
                  <option></option>
                  <?php $list = $bdd->query('SELECT * FROM produit WHERE produit_contact = "'.$_SESSION['Contact_id'].'" 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>
              </td>
              <?php //include 'inputdevis.php' ; ?>
              <td>
                <input type="hidden" class="article_devis">
                <input type="hidden" class="article_contact" value="<?php echo $_SESSION["Contact_id"] ?>" />
                <input type="number" class="form-control article_unite">
              </td>
              <td>
                <div class="article_prixunitaire">
                  Le prix unitaire
                </div>
                <input type="text" class="article_pu" step="0.01" >
                <label for="Tel">Après Remise:</label>
                <input type="text" class="form-control article_pu_avec_remise" readonly="readonly">
              </td>
         </tr>
</table>

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
 
  /* Affiche le nom de l'article en fonction de la référence sélectionnée */
  $(function(){
		$('#table_article').on('change', '.article_ref', function(){
		  var article_ref = $(this).val();
		  var article_designationarticle = $(this).parent().siblings('td').find('.article_designationarticle');//closest remonte jusqu'au #table_article pour trouver .article_designationarticle
		  var article_pu=$(this).parent().siblings('td').find('.article_prixunitaire');//même chose ici avec closest()
		  $.ajax({
			url: "modal_header/Actions/ajax/getProduit.php",//un seul fichier php fera l'affaire.
			method: "POST",
			dataType:'json',// json ici obligatoire
			data: { article_ref: article_ref }
		  })
		  .done(function( retour ) {
			console.log('succes :',retour);
			  if(!retour.erreur){//si y'a pas d'erreur
          article_pu.html(retour.produit_pu);
          // create the option and append to Select2
          var option = new Option(retour.full_name, retour.id, true, true);
          article_designationarticle.append(option).trigger('change');
          // manually trigger the `select2:select` event
          article_designationarticle.trigger({
            type: 'select2:select',
            params: {
              retour: retour.produit_pu
            }
          });
			  }
			  else alert(retour.erreur);//sinon affiche l'erreur
		  })
      .fail(function(error) {
        alert( "error facture creation ajax :"+error.responseText );
		  });       
		}); 
	});

merci d'avance :)

26/09/2019, 17h03
Toufik83
1-retour.full_name est pour l'exemple, alors que toi tu as retour.produit_nom

Code:

new Option(retour.produit_nom, retour.id, true, true);

2-Remplace retour par data dans params :
Code:

1 2 3 4 params: { data: retour.produit_pu }
Tu as mélangé les noms de variables de l'exemple avec les tiennes :lol:

Et attention, il faut supprimer toutes les options à chaque appel ajax (à moins que tu veux les garder ....).

Dans la documentation il est indiqué d'utiliser .val(null) pour supprimer le contenu.
Code:

1 2 article_designationarticle.val(null).trigger("change");
26/09/2019, 17h22
Invité
Bonjour,

0- Si au moins tu étais capable d'expliquer CLAIREMENT ce que tu veux obtenir...
- Pourquoi crées-tu une nouvelle option ??
1- perso, j'utilise Select Chosen.

2- Si j'étais à ta place :
- je laisserais Select2 de coté, le temps de mettre au point le script JS
- seulement une fois le script bien rodé, j'essaierai de remettre Select2
  (ou je testerais Chosen !)
30/09/2019, 10h47
Zarkoffe
Merci pour vos réponses.
jreaux62 j'ai utilisé ce plugin sur tout mon site, je ne vais pas tout reprogrammer avec un autre plugin concurrent

Toufik83 c'est bon, mon AJAX fonctionne très bien. J'ai un dernier problème, et je sais à quoi cela est dû, mais je ne sais pas comment le résoudre
Mon ajax est déclenché si "article_designationarticle" a une nouvelle valeur :

Code:

$('#table_article').on('change', '.article_designationarticle', function(){

La dessus pas de soucis, il fait son taff. Mon problème, c'est que mon ajax envoit un nouvelle valeur à un select qui porte la classe "article_ref". Et j'ai aussi ce code suivant :
Code:

1 2 $('#table_article').on('change', '.article_ref', function(){
Concrètement, j'ai une liste de référence d'article et une liste désignation d'article. Si je sélectionne un <option> sur le premier, L'ajax envois la désignation en fonction de la référence d'article.
Si je sélectionne un option sur le second, c'est la référence qui se charge en fonction de la désignation.

En outre, ce qu'il se passe, c'est que j'ai une boucle. Je change article_ref, qui donne une nouvelle valeur à article_designation, mais qui donc execute son ajax lui aussi, et qui renvoie à son tour une nouvelle valeur à l'autre champs(et donc une nouvelle option, car c'est ce que fais mon système avec select2 : il créé une nouvelle <option> lorsque l'ajax est exécuté).

J'ai donc 2 listes qui se balancent indéfiniment des variables. Et je ne peux pas me priver du on.(change) de chacun car sinon mon architecture bi-directionnelle ne fonctionnera plus.

Si vous avez une idée je suis preneur. Merci!
30/09/2019, 10h59
Invité

Bonjour,

Citation:

Envoyé par Zarkoffe

...En outre, ce qu'il se passe, c'est que j'ai une boucle. Je change article_ref, qui donne une nouvelle valeur à article_designation, mais qui donc execute son ajax lui aussi, et qui renvoie à son tour une nouvelle valeur à l'autre champs(et donc une nouvelle option, car c'est ce que fais mon système avec select2 : il créé une nouvelle <option> lorsque l'ajax est exécuté)....

Bon, ben... Comme d'hab' : je n'y comprends rien.
A mon avis tu construis une usine à gaz type Seveso...
Ça me semble disproportionné dans sa complexité (ce sont juste des lignes "produit - prix unitaire-..." !!).
Plus de 10 jours que tu es dessus...

Je te laisse résoudre ça avec Toufik83.
30/09/2019, 15h21
Toufik83

Salut,

Apparemment c'est le .trigger("change") de ton select2 qui pose problème, parce que à chaque changement de valeur, cet événement se déclenche et une requête ajax est envoyée.

La solution qui me parait un peu adaptée, c'est d'annuler l'événement change avec jQuery.off() avant de modifier la valeur du select2 correspondant, puis rattacher l'événement après la modification de la valeur.
30/09/2019, 15h29
Invité

@Toufik83
Ce que Zarkoffe ne dis/montre pas, c'est qu'il y a déjà une tonne de script JS pour la gestion de son tableau...

@Zarkoffe
Si au moins tu nous montrais une page en ligne, on pourrait te résoudre ça en 2 temps 3 mouvements.

Oui @jreaux62, et le problème c'est qu'il utilise un plugin malgré qu'il ne maîtrise pas la bibliothèque jQuery.

Je vais essayer de t'expliquer un peu son souci.

Il a deux select2 :
Code:

1 2 3 4 5 6 7 8 9 10 <select class='article_ref'> <option value='ref_1'>Ref Un</option> <option value='ref_2'>Ref Deux</option> </select> <select class='article_designationarticle'> <option value='design_1'>Design UN</option> <option value='design_2'>Design DEUX</option> </select>
Vu qu'il a 2 gestionnaires d'événement "change" (un sur chaque select2), lorsqu'il sélectionne une valeur dans la première liste, il lance une requête ajax pour actualiser la deuxième liste selon la première (et vice versa), et ce n'est pas tout car avec le plugin select2 il est obligé d'utiliser trigger("change") pour modifier la valeur de la deuxième liste, ce qui déclenche l'événement change encore une fois et la liste 2 relance une requête ajax pour modifier la valeur de la première liste et ainsi de suite...

30/09/2019, 16h10
Invité

1- C'est pourquoi j'ai proposé Select Chosen.
Il n'y a pas de trigger à ajouter.

SINON, il faut changer de méthode :
Au lieu de ne ramener QUE la valeur dans le select, c'est TOUT le <select> qu'il faut récupérer via Ajax.
Ainsi, PLUS de problème de trigger.

2- par contre, je n'ai toujours pas compris si l'ajout d'une option est voulue ou pas ?

3- D'autre part, avec une page en ligne, on aurait une vue d'ensemble.

Oui ~~il doit soit utiliser le plugin que tu as proposé (qui me parait plus adapté à son besoin) soit utiliser des simples select pour éviter ce trigger .~~

Edit :

Citation:

Envoyé par jreaux62

SINON, il faut changer de méthode :
Au lieu de ne ramener QUE la valeur dans le select, c'est TOUT le <select> qu'il faut récupérer via Ajax.
Ainsi, PLUS de problème de trigger.

Bien vu jreaux62, je n'avais pas pensé à ça :ccool:

Edit: Je pense que j'avais tord concernant le plugin, parce qu'il existe le callback select2:select qui résout totalement le souci même si on fait appel au trigger.

Tous les événements sont listés ici

Il faut remplacer l'événement change par select2:select :
Code:

1 2 3 .on('select2:select', '.article_ref', function(e){...}); .on('select2:select', '.article_designationarticle', function(e){...});
Puis après dans le done d'ajax, on peut modifier les valeurs en deux lignes et sans l'utilisation de new Option et append, d’ailleurs je ne comprends pas pourquoi tu rajoutes une option à chaque sélection parce que tu auras des options en double dans tes select... :
Code:

1 2 3 4 5 .done(function(retour){ article_ref.val(retour.produit_ref).trigger('change'); article_designationarticle.val(retour.produit_nom).trigger('change'); });
En gros le script peut être factoriser en regroupant les deux select dans un seul sélecteur jQuery et utiliser une seule requête ajax pour les deux :
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 $('.article_ref,.article_designationarticle').select2(); $('#table_article').on('select2:select', '.article_ref,.article_designationarticle', function(e) { var article_ref,articlearticle_designationarticle,dataAjax; if($(this).hasClass('article_ref')){//si c'est .article_ref article_ref=$(this); article_designationarticle=$(this).parent().siblings('td').find('.article_designationarticle'); /* Ici on construit dataAjax selon la class du select, on passe l'article_ref , parce qu'il faut trouver l'article_nom en fonction de l'article_ref */ dataAjax={article_ref:article_ref.val()}; } else if($(this).hasClass('article_designationarticle')){//sinon si c'est article_designationarticle article_ref=$(this).parent().siblings('td').find('.article_ref'); article_designationarticle=$(this); /* Ici on construit dataAjax selon la class du select, on passe l'article_nom, parce qu'il faut trouver l'article_ref en fonction de l'article_nom */ dataAjax={article_nom:article_designationarticle.val()}; } $.ajax({ "url":"getProduit.php", "method":"post", "dataType":"json", "data":dataAjax//dataAjax est construit dynamiquement selon le select sur lequel on a cliqué }) .done(function(retour){ article_ref.val(retour.produit_ref).trigger('change'); article_designationarticle.val(retour.produit_nom).trigger('change'); }) .fail(function(error){ alert('erreur ! :'+error.responseText); }); });
:arrow: Remarque pour l'amélioration du script: Le plugin permet aussi d'utiliser ajax comme callback , voici l'exemple de la documentation

Voir 40 message(s) de cette discussion en une page