아약스 선택에 따라 다른 선택

Question

나는 완벽하게 작동하는 첫 번째 선택하고 두 개의 필드와 사용자가 선택한 것과 관련된 다른 하나를 표시합니다.

그래서 두 번째 선택 항목도 다른 선택 항목으로 완벽하게 채워지고 사용자는 옵션을 다시 클릭해야합니다.

그리고는, 4 개 다른 필드는 표시해야하지만이 단계는

그것은 나의 두 번째 아약스 기능의 내부 간다 ... .. 내 필드가 표시되지 않습니다 작동하지 도다. 나는 처음부터 beacause, 내 두 번째 선택 만들어지지 않습니다 생각합니다.

나는 이유를 알고하지만 난 ..

난 당신이 나에게 도움이되기를 바랍니다 수행하는 방법을 모르겠어요. ;)

내 코드를 보도록하겠습니다.

내 아약스 :

// 
//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

당신은 아마 필요한 이벤트 위임 : 이벤트는 바인딩 (페이지로드시)이 아직 존재하지 않기 때문에 두 번째 선택에 바인딩되지 않습니다.

당신은 할 수있는이을 변경하여 :

이 같은 것으로

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

:

이제

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

이 이벤트는 페이지가로드 될 때 #nomClient 요소가 아직 존재하지 않은 경우에도 트리거 .

Answer 2

id nomClient를 동적으로 추가하므로 이벤트가 연결되지 않고 직접 change change를 호출해도 작동하지 않습니다.

그래서, 대신의 :

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

이 시도 : 나는 '성공'방법 내부 경고를 넣어 내 경고가 표시되지만 내 4 있기 때문에, 노력하고 있습니다

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