Ajax Erfolgsdaten zweimal aufgerufen

Question

Ich verstehe nicht, warum meine Daten zweimal aufgerufen werden. Ich habe versucht, Append zu ersetzen, aber es funktioniert nicht. Ich denke es liegt an meinem Controller.

Das ist mein Ajax-Aufruf:

jQuery(document).ready(function($) { 
$('#referenceProduit').change(function(){ 
    // On recupere la valeur de l'attribut value pour afficher tel ou tel resultat 
    var req=$('#referenceProduit').val(); 
    // Requête ajax, appel du fichier function.php 
    $.ajax({ 
     type: "post", 
     url: "index.php?uc=gererReclamation&action=saisirReclamation", 
     data: "referenceProduit="+req, 
     dataType : "html", 
     //affichage de l'erreur en cas de problème 
     error: function(XMLHttpRequest, textStatus, errorThrown) { 
      alert(XMLHttpRequest + '--' + textStatus + '--' + errorThrown); 
     }, 
     // Function s'il n'y a pas de probleme 
     success:function(data){ 
      //On affiche la réponse du serveur 
      $('.result').empty(); 
      $('.result').prepend(data); 
     } 
    }); 
}); 

HTML-Code:

<div class="form-group"> 
    <label for="referenceProduit" class="col-sm-1 control-label">Reference</label> 
    <div class="col-sm-2"> 
     <select class="form-control" name="referenceProduit" id="referenceProduit"> 
      <option selected="selected" disabled="disabled">Choisir</option> 
      <?php foreach($lesProduits as $unProduit){?> 
      <option name="<?php echo $unProduit['id'];?>" value="<?php echo $unProduit['id'];?>"><?php echo $unProduit['reference']?></option> 
      <?php } ?> 
     </select> 
    </div> 
    <div class="result"></div> 
</div> 

-Controller

<?php 
    $action = $_REQUEST['action']; 
    switch($action){ 
     case 'accueil':{ 
      include("vue/v_accueil.php"); 
      break; 
     } 
     case 'saisirReclamation':{ 
      $lesSites = $pdo->getLesSites(); 
      $lesProduits = $pdo->getLesProduits(); 
      $lesClients = $pdo->getLesClients(); 
      $lesNatures = $pdo-> getLesNatures(); 
      $lesActivites = $pdo->getLesActivites(); 
      if(isset($_REQUEST['referenceProduit'])){ 
       $leProduit = $pdo->getLeProduit(); 
       foreach ($leProduit as $key => $value) { 
        echo '<input type="text" name="'.$key.'" value="'.$value.'"/>'; 
       } 
      } 
      include_once("vue/v_saisirReclamation.php"); 
      break; 
     } 
    } 
?> 

Answer 1

Ändern Sie diese Zeile

$('.result').empty(); 

zu

$('.result').html(' '); 

Answer 2

success:function(data){ 
    // On affiche la réponse du serveur 
    $('.result').empty(); 
    $('.result').prepend(data); 
} 

Statt obigen Code dieser Code unten verwenden

success:function(data){ 
    // On affiche la réponse du serveur 
    $('.result').html(data); 
} 

Answer 3

Lassen Sie uns auf den Code werfen Sie einen Blick:

jQuery(document).ready(function($) { 
$('#referenceProduit').change(function(){ 
    //on recupere la valeur de l'attribut value pour afficher tel ou tel resultat 
    var req=$('#referenceProduit').val(); 
    //requête ajax, appel du fichier function.php 
    $.ajax({ 
     type: "post", 
     url: "index.php?uc=gererReclamation&action=saisirReclamation", 
     data: "referenceProduit="+req, 
     dataType : "html", 
     //affichage de l'erreur en cas de problème 
     error: function(XMLHttpRequest, textStatus, errorThrown) { 
      alert(XMLHttpRequest + '--' + textStatus + '--' + errorThrown); 
     }, 
     //function s'il n'y a pas de probleme 
     success:function(data){ 
      //On affiche la réponse du serveur 
      $('.result').empty(); 
      $('.result').prepend(data); 
     } 
    }); 
}); 

Ihr Inhalt löst das Ereignis change aus. Sie müssen sicherstellen, dass Ihre Antwort nicht change auslöst. Dies ist eine einfache Lösung mit einem Flag:

jQuery(document).ready(function($) { 
var shouldChange = true; 
$('#referenceProduit').change(function(){ 
    if (!shouldChange) { 
     return; 
    } 
    //on recupere la valeur de l'attribut value pour afficher tel ou tel resultat 
    var req=$('#referenceProduit').val(); 
    //requête ajax, appel du fichier function.php 
    $.ajax({ 
     type: "post", 
     url: "index.php?uc=gererReclamation&action=saisirReclamation", 
     data: "referenceProduit="+req, 
     dataType : "html", 
     //affichage de l'erreur en cas de problème 
     error: function(XMLHttpRequest, textStatus, errorThrown) { 
      alert(XMLHttpRequest + '--' + textStatus + '--' + errorThrown); 
     }, 
     //function s'il n'y a pas de probleme 
     success:function(data){ 
      //On affiche la réponse du serveur 
      shouldChange = false; 
      $('.result').empty(); 
      $('.result').prepend(data); 
      shouldChange = true; 
     } 
    }); 
});