関数をループに入れずにjquery/ajax関数に表の行IDを付ける

Question

私はクライアントのデータをループし、クライアントの行でいっぱいのテーブルを作成するphpクエリを持っています。各行には固有のIDを持つリンクが付いています。このリンクがクリックされると、クライアントのIDに基づいてajax関数が実行され、そのクライアントからの情報でモーダルが開きます。これは、ページを大幅にダウンさせること以外はOKです。

問題は私が新しいループを作成して、ajax関数の呼び出しとクエリのループをループする必要があることです。または私はajaxコールをメインループに入れます。ループの中で私のajax呼び出しを持たずにリンクのIDを取得する方法はありますか？私がやっていることの私の例は以下の通りです。

実際に試してやりたいことは、リンクをクリックすることです。ループの外側には、クライアントのIDを取得する1つのajax呼び出しがあります。離れて、私が必要とする情報を得て、私のモーダルを埋める。これも可能ですか、実際には呼び出しがループ内になければなりませんか？

<?php for($i=0; $i<count($user); $i++){ ?> 
    <tr> 
     <td><a href="" id="client-<?php echo $user[$i]['idclient'];?>">name</a></td> 
     <td>address</td> 
     <td>tel</td> 
     <td>contact</td> 
    </tr> 

<script> 
$("#clientName-<?php echo $user[$i]['idclient'];?>).click(function() 
{ 
    $.ajax(
    { 
     type: "GET", 
     url: '/includes/scripts/getUserAJ.php', 
     cache: false, 
     data: {iduser: <?php echo $user[$i]['idclient'];?>}, 
     success: function (data) 
     { 
      $("#div-1").html(data); 
      $("#div-2").html('<a href="<?php echo $_SERVER['PHP_SELF'].'?viewClient&i='.$user[$i]['idclient'];?>" class="btn btn-block btn-success"><i class="fa fa-user"></i> View Profile</a>'); 
      $("#div-3").html('<a href="<?php echo $_SERVER['PHP_SELF'].'?viewClientService&i='.$user[$i]['idclient'];?>" class="btn btn-block mt20 btn-success"><i class="fa fa-server"></i> View Service Templates</a>'); 
      $("#div-4").html('<a href="<?php echo $_SERVER['PHP_SELF'].'?viewClientRota&i='.$user[$i]['idclient'];?>" class="btn btn-block mt20 btn-success"><i class="fa fa-calendar"></i> View Client Rota</a>'); 
      $('#userModal').modal('show'); 

     } 
    }); 

}); 
</script> 


    <?php } ?> 



<!-- /.modal Name --> 
<div class="modal fade" id="userModal"> 
    <div class="modal-dialog"> 
    <div class="modal-content"> 
     <div class="modal-header"> 
     <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button> 
    <h4 class="modal-title">User Options</h4> 
     </div> 
     <div class="modal-body"> 

    <div id="div-1" class="col-sm-6"> 


    </div> 

     <div class="col-xs-12 col-sm-6"> 

    <div id="div-2" class="col-xs-12"> 

    </div> 
    <div id="div-3" class="col-xs-12"> 

    </div> 

    <div id="div-4" class="col-xs-12"> 

    </div> 


     </div> 
<div class="clearfix"></div> 
    </div> 
    <div class="modal-footer"> 
    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> 

     </div> 
    </div> 
    </div> 
</div> 
<!-- /.End Modal Name --> 

Answer 1

1.Create class、代わりにそのあなたのjQueryコードにid使用します。

2.ページ下部のループの外側に、<script></script>を外します。

3.A id構造におけるビット変化も必要とされている： -

ので、コードは以下のようにする必要があります： -

<?php for($i=0; $i<count($user); $i++){ ?> 
    <tr> 
     <td><a href="" id="<?php echo $user[$i]['idclient'];?>" class="clickMe">name</a></td><!-- class added and id structure is also changed--> 
     <td>address</td> 
     <td>tel</td> 
     <td>contact</td> 
    </tr> 
<?php } ?> 

あなたのモーダルのdivのhtml、その後

<script> 
$(".clickMe").click(function (e){ //check change here 
    e.preventDefault(); 
    $.ajax({ 
     type: "GET", 
     url: '/includes/scripts/getUserAJ.php', 
     cache: false, 
     data: {iduser: $(this).attr('id')}, //check change here 
     success: function (data) 
     { 
      $("#div-1").html(data); 
      $("#div-2").html('<a href="<?php echo $_SERVER['PHP_SELF'].'?viewClient&i='.$user[$i]['idclient'];?>" class="btn btn-block btn-success"><i class="fa fa-user"></i> View Profile</a>'); 
      $("#div-3").html('<a href="<?php echo $_SERVER['PHP_SELF'].'?viewClientService&i='.$user[$i]['idclient'];?>" class="btn btn-block mt20 btn-success"><i class="fa fa-server"></i> View Service Templates</a>'); 
      $("#div-4").html('<a href="<?php echo $_SERVER['PHP_SELF'].'?viewClientRota&i='.$user[$i]['idclient'];?>" class="btn btn-block mt20 btn-success"><i class="fa fa-calendar"></i> View Client Rota</a>'); 
      $('#userModal').modal('show'); 
     } 
    }); 
}); 
</script> 

注： -

1.このコードの前にjQueryライブラリが追加されていることを確認してください。

2.スクリプトコードはページの下部にある必要があります。

Answer 2

あなたが望むのは、各IDではなくクラスに.click（）関数をアタッチし、idクライアントがカスタムデータタグオプションに存在することです。以下のためのPHPの外に置かれ、次のようになります。そして、.click（）関数 <a class="clickMe" data-id="<?php echo $user[$i]['idclient'];?>"
：

 

     $(".clickMe").click(function() 
     { 
      var idClient = $(this).data('id'); 
      $.ajax(
      { 
       type: "GET", 
       url: '/includes/scripts/getUserAJ.php', 
       cache: false, 
       data: {iduser: idClient}, 
       success: function (data) { 
        // ... 
       } 
      }); 
     });