ajaxは別の選択に基づいて選択します

Question

私は完全に動作している2番目の選択肢を持っており、2つのフィールドと1つの選択肢がユーザが選択したものに関連して表示されます。

したがって、2番目の選択も他の選択肢で完全に満たされているため、ユーザーはオプションをもう一度クリックする必要があります。

そしてその後、4つの、他のフィールドが表示されるように持っているが、このステップは

それはない、私の第二のAJAX機能の内部に入る..私のフィールドが表示されていない動作しませdoest。私はそれが始まりにbeacauseだと思う、私の2番目の選択は作成されていません。

私はなぜ知っているが、私は..

私はあなたが私を助けることを願って行う方法を知りません。 ;）

私のコードを見てみましょう。

私の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()); 
     } 
    }); 
}); 
}); 

マイ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

あなたはおそらく必要がある場合委任：イベントは、バインドの瞬間（ページの読み込み時）にはまだ存在しないため、2番目の選択にバインドされません。

あなたは、この変更によってそれを行うことができます

：このような何かに

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

を：

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

今、このイベントは、ページがロードされたとき#nomClient要素がまだ存在していなかった場合でも、トリガされます。

Answer 2

id nomClientを動的に追加しているため、イベントがそのイベントにアタッチされず、そのままchange changeを呼び出すと機能しません。

ので、これに代えて：

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

はこれを試してみてください：私は「成功」メソッド内でアラートを入れて、私の警告が表示されますが、私の4されているので、働いている

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