Ajax wählen basierend auf einem anderen wählen

Question

Ich habe eine erste Auswahl, die funktioniert perfekt und zeigt zwei Felder und eine andere Auswahl im Zusammenhang mit dem, was der Benutzer gewählt.

Also, die zweite Auswahl füllt auch perfekt mit anderen Möglichkeiten und der Benutzer muss erneut auf eine Option klicken.

Und dann 4 andere Felder angezeigt werden, aber dieser Schritt doest nicht funktionieren .. Meine Felder werden nicht angezeigt ..

Es geht nicht in meiner zweiten Ajax-Funktion. Ich denke, es ist, weil am Anfang meine zweite Auswahl nicht erstellt wird.

Ich weiß, warum, aber ich weiß nicht, wie ..

zu tun, ich hoffe ihr könnt mir helfen. ;)

Lassen Sie meinen Code sehen.

Meine Ajax:

// 
//FIRST SELECT 
// 

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: "GET", 
     url: "include/php.php?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 
      $('.produit').empty(); 
      $('.produit').prepend(data); 
      $('input[name=designation]').val($('input:hidden[name=designation]').val()); 
      $('input[name=prix]').val($('input:hidden[name=prix]').val()); 
     } 
    }); 
}); 

// 
//SECOND SELECT 
// 

$('#nomClient').change(function(){ 

    //on recupere la valeur de l'attribut value pour afficher tel ou tel resultat 
    var req2=$('#referenceProduit').val(); 
    var req=$('#nomClient').val(); 
    //requête ajax, appel du fichier function.php 
    $.ajax({ 
     type: "GET", 
     url: "include/php.php?nomClient="+req+"&referenceProduit="+req2, 
     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 
      $('.client').empty(); 
      $('.client').prepend(data); 
      $('input[name=nom]').val($('input:hidden[name=nom]').val()); 
      $('input[name=prenom]').val($('input:hidden[name=prenom]').val()); 
      $('input[name=telephone]').val($('input:hidden[name=telephone]').val()); 
      $('input[name=mail]').val($('input:hidden[name=mail]').val()); 
     } 
    }); 
}); 
}); 

Meine PHP:

// 
//FIRST SELECT (display 2 fileds and 1 select) 
//  

if(isset($_GET['referenceProduit'])){ 
    $id = $_GET["referenceProduit"]; 
    $res = $pdo->getLeProduitAjax($id); 
    $res2 = $pdo->getClientByProduit($id); 

    foreach ($res as $key => $value) { 
     echo '<input type="hidden" name="'.$key.'" value="'.$value.'"/>'; 
    } 

    echo ' 
     <label for="designation" class="col-sm-1 control-label">Désignation</label> 
     <div class="col-sm-3"> 
      <input type="text" class="form-control" name="designation" id="designation" readonly> 
     </div> 
     <label for="prix" class="col-sm-1 control-label">Prix </label> 
     <div class="input-group col-sm-1"> 
      <input type="text" class="form-control" aria-describedby="basic-addon2" name="prix" id="prix" readonly> 
      <span class="input-group-addon" id="basic-addon2">€</span> 
     </div><br/><br/> 
     '; 


    echo ' 
     <label for="nomClient" class="col-sm-1 control-label">Client</label> 
     <div class="col-sm-2"> 
      <select class="form-control" name="nomClient" id="nomClient">'; 
      foreach($res2 as $unClient){ 
       echo '<option value="'. $unClient['id'].'">'. $unClient['nom'].'</option>'; 
      } 
    echo '</select> 
     </div> 
     '; 
} 

// 
//SECOND SELECT - SHOULD DISPLAYS 4 FIELDS 
// 

if(isset($_GET['nomClient'])){ 
    $id = $_GET["referenceProduit"]; 
    $id2 = $_GET["nomClient"]; 

    $res = $pdo->getContactByClient($id2, $id); 

    foreach ($res as $key => $value) { 
     echo '<input type="hidden" name="'.$key.'" value="'.$value.'"/>'; 
    } 

    echo ' 
     <div class="form-group"> 
      <label for="nomContact" class="col-sm-1 control-label">Nom</label> 
      <div class="col-sm-3"> 
      <input type="text" class="form-control" name="nom" id="nom" readonly> 
      </div> 
      <label for="prenomContact" class="col-sm-1 control-label">Prénom</label> 
      <div class="col-sm-3"> 
      <input type="text" class="form-control" name="prenom" id="prenom" readonly> 
      </div> 
     </div> 
     <div class="form-group"> 
      <label for="emailContact" class="col-sm-1 control-label">Email</label> 
      <div class="col-sm-3"> 
      <input type="text" class="form-control" name="email" id="email" readonly> 
      </div> 
      <label for="telephoneContact" class="col-sm-1 control-label">Téléphone</label> 
      <div class="col-sm-3"> 
      <input type="text" class="form-control" name="telephone" id="telephone" readonly> 
      </div> 
     </div> 
     </div> 
    '; 
} 

MY HTML:

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

Answer 1

Sie wahrscheinlich brauchen Ereignis Delegierung: Die Ereignisse sind nicht an Ihre zweite Auswahl gebunden, da sie zum Zeitpunkt der Bindung (beim Laden der Seite) noch nicht existiert.

können Sie tun, dass dies durch eine Änderung:

$('#nomClient').change(function(){ 

Um so etwas wie dieses:

$('body').on('change', '#nomClient', function(){ 

Jetzt wird dieses Ereignis ausgelöst, auch wenn die #nomClient Element noch nicht existierte, wenn die Seite geladen wurde .

Answer 2

Da Sie die ID nomClient dynamisch hinzufügen und daher keine Ereignisse an sie angehängt werden, wird der direkte Aufruf von change nicht funktionieren.

Anstatt also diese:

$('#nomClient').change(function(){}); 

Versuchen Sie folgendes:

$(document).on('change','#nomClient',function(){});