Deux appels mais un seul fonctionne

**Zarkoffe** · 19/09/2019, 16h37

Bonjour,
J'essaye de faire un double ajax pour remplir 2 champs différents en fonction d'une même valeur. Je n'ai pas d'erreur, dans mon onglet Réseau les 2 variables passent bien. Mais l'un de mes 2 champs ne s'actualisent pas.
Je suis à la recherche d'une solution ou même mieux, d'une amélioration de mon système qui je pense est un peu crado.
La div qui se déclenche est donc "article_designationarticle" et celui qui ne fonctionne pas "article_prixunitaire". 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
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
<!-- PS  : c est un extrait, bien sûr tout cela est dans un tableau complet -->
              <td>
                <div class="article_designationarticle">
                  Le produit sera chargé ici
                </div>
              </td>
              <td>
                <div class="article_prixunitaire">
                  Le prix unitaire
                </div>
              </td>
<script>
  /* 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().next().find('.article_designationarticle');
      $.ajax({
        url: "modal_header/Actions/ajax/inputdevis.php",
        method: "POST",
        data: { article_ref: article_ref }
      })
      .done(function( retour_html ) {
        article_designationarticle.html( retour_html );
      })
      .fail(function() {
        alert( "error facture creation ajax" );
      });       
    }); 
  });
    
  $(function(){
    $('#table_article').on('change', '.article_ref', function(){
      var article_ref = $(this).val();
      var article_prixunitaire = $(this).parent().next().find('.article_prixunitaire');
      $.ajax({
        url: "modal_header/Actions/ajax/getArticlePU.php",
        method: "POST",
        data: { article_ref: article_ref }
      })
      .done(function( retour_html ) {
        article_prixunitaire.html( retour_html );
      })
      .fail(function() {
        alert( "error facture creation ajax" );
      });       
    });
  });
  /* fin */
</script>

inputdevis.php

Code php :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<?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'] ?>" />     
        <?php 
        }
    }

getArticlePU.php

Code php :

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
<?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_pu'] ?>" />     
        <?php 
        }
    }
?>

Merci d'avance

**Toufik83** · 19/09/2019, 21h37

Salut,

Je vois qu'il y'a trop de répétition dans ton code jQuery.
Tu ne dois définir les éléments suivants qu'une seule fois et n'utiliser qu'un seul fichier php (pas deux) pour traiter les données :

$(function(){});
$('#table_article').on('change', '.article_ref', function(){...});

Supposons que la table est structurée comme ça :

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
 
<table id="table_article">
     <tr><th>Select produit</th><th>Nom produit</th><th>Prix Unitaire produit</th></tr>
     <tr>	  
	<td>
		<select class="article_ref" >
                       <!-- Bien-sûr que cette partie doit être chargée en php-->
			<option value='1'>Produit 1</option>
                        <option value='2'>Produit 2</option>
                        <option value='3'>Produit 3</option>
		</select>
       </td>
	<td>
		<div class="article_designationarticle"></div>
	</td>
	<td>
		<div class="article_prixunitaire"></div>
	</td>
     </tr>
</table>

Maintenant tu dois utiliser le type de donnée json en ajoutant dataType:"json" dans $.ajax :

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
 
$(function(){
		$('#table_article').on('change', '.article_ref', function(){
		  var article_ref = $(this).val();
		  var article_designationarticle = $(this).closest('#table_article').find('.article_designationarticle');//closest remonte jusqu'au #table_article pour trouver .article_designationarticle
		  var article_pu=$(this).closest('#table_article').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);
			  }
			  else alert(retour.erreur);//sinon affiche l'erreur
		  })
		  .fail(function() {
			alert( "error facture creation ajax" );
		  });       
		}); 
	  });

Et finalement le fichier getProduit.php :

Code php :

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
 
<?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_INT);//$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
	unset($bdd);//détruit la connexion $bdd
    }
	echo json_encode($retour);//on renvoi $retour en tant que json

**Zarkoffe** · 20/09/2019, 11h45

Merci beaucoup pour ta réponse.
Question : pourquoi utiliser du json? Quel est l'avantage?

J'ai tenté avec ton code, la variable semble bien être envoyé jusq'au getProduit.php mais j'ai mon erreur qui se déclenche (et mes 2 div ne chargent pas la valeur voulue). J'ai fais le tour du code je me demande d'où viens le problème... Ci joint un screen pour que tu y vois clair à mon soucis.
Nom : Capture d’écran de 2019-09-20 11-42-59.png
Affichages : 144
Taille : 74,5 Ko

Nom : Capture d’écran de 2019-09-20 11-42-59.png
Affichages : 144
Taille : 74,5 Ko

merci d'avance

Invité · 20/09/2019, 13h44

Bonjour,

Envoyé par Zarkoffe

Question : pourquoi utiliser du json? Quel est l'avantage?

Ça permet de transmettre plusieurs valeurs en même temps.

**Toufik83** · 20/09/2019, 13h58

Envoyé par Zarkoffe

Question : pourquoi utiliser du json? Quel est l'avantage?

L'avantage dans ton cas c'est de récupérer un objet contenant plusieurs variables avec un seul appel Ajax.
Je te signale que j'ai testé le code avant de le poster, et je n'ai pas l'erreur que tu reçois.
Pour avoir plus de détails sur l'erreur :

Modifies la fonction fail comme suite :

Code :

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

1
2
3
4
 
.fail(function(error) {
	alert( "error facture creation ajax :"+error.responseText );
});

Regarde la réponse dans l'onglet Reseau.

**Zarkoffe** · 20/09/2019, 14h09

Merci pour vos 2 réponses.

J'ai le résultat suivant :
Dans la console :
Nom : Capture d’écran de 2019-09-20 14-06-20.png
Affichages : 139
Taille : 2,9 Ko

La ligne visée étant celle de l'alert();

Puis dans l'onglet réseau, le POST semble bien avoir été effectué:
Nom : Capture d’écran de 2019-09-20 14-07-07.png
Affichages : 140
Taille : 4,2 Ko

Nom : Capture d’écran de 2019-09-20 14-07-07.png
Affichages : 140
Taille : 4,2 Ko

Merci d'avance

**Toufik83** · 20/09/2019, 14h12

tu es sûr que t'as mis error comme paramètre de la fonction fail ?

Le fichier getProduit.php contient bien un json_encode($retour); à la fin ?

cliques sur la ligne que tu vois dans l'onglet Réseau, et regarde ce qui est écrit dans le sous-onglet réponse...

**Zarkoffe** · 20/09/2019, 14h22

Autant pour moi désolé, en effet j'avais oublié de mettre error function().
J'ai le résultat suivant :
Nom : Capture d’écran de 2019-09-20 14-20-26.png
Affichages : 139
Taille : 150,3 Ko

Nom : Capture d’écran de 2019-09-20 14-20-26.png
Affichages : 139
Taille : 150,3 Ko

merci d'avance

Invité · 20/09/2019, 14h23

Montre TON code !

**Toufik83** · 20/09/2019, 14h25

Voilà! c'est la partie html qui pose problème, sinon tu vois bien l'objet renvoyé tout en bas de l'alert.

supprime tous les echo dans ton fichier php à part celle de json_encode();

Montre le fichier php au complet.

**Zarkoffe** · 20/09/2019, 14h47

Ci-dessous mon code. Peut-être que le problème viendrait de table_article que je vise mal? merci

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
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
        <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>
              </td>
              <td>
                <div class="article_designationarticle">
                  Le produit sera chargé ici
                </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>
                <!--<label for="Tel">Après Remise:</label>
                <input type="text" step="1" 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" max="5">  
                  </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" max="5">  
                  </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" max="5">  
                  </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" max="5">  
                  </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 :

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
<script>
  /* 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).closest('#table_article').find('.article_designationarticle');//closest remonte jusqu'au #table_article pour trouver .article_designationarticle
		  var article_pu=$(this).closest('#table_article').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);
			  }
			  else alert(retour.erreur);//sinon affiche l'erreur
		  })
      .fail(function(error) {
        alert( "error facture creation ajax :"+error.responseText );
		  });       
		}); 
	});
  /* fin */
</script>

Merci d'avance

**Toufik83** · 20/09/2019, 14h48

Montre le fichier getProduit.php pas l'index.php.

Il faut t'assurer que getProduit.php ne contient que du code php, pas d'html ni css ni js.

**Zarkoffe** · 20/09/2019, 15h21

Il contient ton code, ni plus ni moins :

Code php :

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
<?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_INT);//$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
	unset($bdd);//détruit la connexion $bdd
    }
	echo json_encode($retour);//on renvoi $retour en tant que json

merci d'avance

**Toufik83** · 20/09/2019, 15h26

Ok, mais où se trouve le

Code html :

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

<style>textarea{...}</style>

que tu nous a montré dans ton post 8 ? parce que c'est ce style qui génère l'erreur d'ajax vu que cette dernière attend une réponse JSON ayant un format valide.

Ne me dis pas qu'il est dans connect.php

!

**Zarkoffe** · 20/09/2019, 17h48

Si c'était bien cela, j'avais ce style qui traînait pour je ne sais plus quelle raison...
Bonne nouvelle, les 2 champs se chargent à présent.
Mauvaise nouvelle : quelque soit la valeur sélectionnée, c'est toujours le dernier élément de la liste de mon select qui est utilisé (ainsi que son prix). Quelque soit l'élément que je sélectionne dans mon select, c'est toujours lui qui ressort dans mes 2 divs avec son prix.
En clair, ci-dessous 2 tests:
Nom : Capture d’écran de 2019-09-20 17-48-08.png
Affichages : 127
Taille : 34,4 Ko

Nom : Capture d’écran de 2019-09-20 17-48-08.png
Affichages : 127
Taille : 34,4 Ko

Si tu as une idée je suis preneur, en attendant je cherche de mon côté. merci

Invité · 20/09/2019, 17h59

Tu remontes trop haut dans le DOM.

Pourtant, je t'avais montré comment faire ici, non ?

Code :

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

1
2
3
4
5
6
$(function(){
  $('#table_article').on('change', '.article_ref', function(){
    var article_ref = $(this).val();
    var article_designationarticle = $(this).parent().siblings('td').find('.article_designationarticle');
    var article_pu = $(this).parent().siblings('td').find('.article_prixunitaire');
...

Je pense qu'on peut remplacer $(this).parent().siblings('td') par $(this).closest('tr').
Mais pas sûr que ce soit plus performant.

**NoSmoking** · 20/09/2019, 19h08

Bonjour,

avec deux requêtes et des paramètres différents, G-JG-GT et GTH-RFD, tu obtiens la même réponse

Regarde du côté serveur ce qui se trame d'autant qu'il y a un commentaire troublant dans ton code !

$stmt->bindValue(':ref', $article_ref, PDO::PARAM_INT);//$article_ref est un chiffre, pas la peine de mettre strtoupper et bien-sûr PARAM_INT au lieu de PARAM_STR

**Zarkoffe** · 20/09/2019, 19h47

Merci pour vos 2 réponses.
jreaux62, oui en effet ce que tu m'avais montré fonctionne, cela me mène au même résultat.

NoSmoking tu as raison le problème venait bien de cette ligne, je passe des chaines de caractères et non des entiers :

Code :

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

1
2
 
        $stmt->bindValue(':ref', $article_ref, PDO::PARAM_STR);

Le problème venait bien de là. Merci beaucoup! Je vais pouvoir avancer ce w-e

Bonne soirée à vous!

Sujet résolu

**Zarkoffe** · 21/09/2019, 20h16

Dernière petite question : Depuis 1h30 j'essaye désespérément de récupérer la valeur envoyée dans un input. Je n'y arrive pas.
J'essaye de travailler avec la variable qui arrive dans

Code HTML :

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

1
2
3
  <div class="article_prixunitaire">
      Le prix unitaire
  </div>

(qui est le résultat du success de notre ajax hein)
Ce genre de chose ne fonctionne pas non plus :

Code HTML :

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

 <input type="text" class="article_pu" step="0.01">

Comme le retour de la variable est transmis ainsi (ce que l'on a vu, c'est un rappel):

Code :

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

	article_pu.html(retour.produit_pu);

Comment puis-je le récupérer afin de l'exploiter dans des calculs derrière?
Concrètement j'ai besoin de travailler avec la variable en pointant sa classe comme ceci (ceci est fonctionnel, n'y touchez pas svp merci):

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
  $(function(){
    $('#table_article').on('input', '.article_pu, .article_remise', function(){
      var article_pu = $(this).closest('tr').find('.article_pu');
      var remise = $(this).closest('tr').find('.article_remise');
      var totalAvecRemise = $(this).closest('tr').find('.article_total');
      if( article_pu.val() != '' && remise.val() != '' )
      {
        totalAvecRemise.val( parseFloat(article_pu.val()) * (parseFloat(remise.val())/10) );
      } else {
        totalAvecRemise.val( '' );
      }
    });
  });

En tout cas récupérer le résultat dans une simple <div> n'est pas suffisant pour mon cas.
Merci d'avance

Invité · 21/09/2019, 20h50

Bonjour,

A MON AVIS, tu manques de RIGUEUR.
Que contient exactement la variable JS article_pu ?

1- Car on a :

Code HTML :

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

1
2
3
  <div class="article_prixunitaire">
      Le prix unitaire
  </div>

et article_pu.html(retour.produit_pu); qui remplit le <div class="article_prixunitaire"> !

La variable JS que tu appelles "article_pu" est en réalité le <div class="article_prixunitaire">.
PAS l'<input class="article_pu"> !

2- Mais quand tu écris :

Code :

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

      var article_pu = $(this).closest('tr').find('.article_pu');

Là, tu cibles bien l'<input class="article_pu">.

Par conséquent, ce nom de variable porte à confusion : tantôt le <div>, tantôt l'<input> !
SOIS PLUS PRÉCIS/EXPLICITE dans tes noms de variables, et ce qu'elles ciblent.

Deux appels mais un seul fonctionne

jQuery

Discussions similaires

Partager

Partager