CODEWITHSUNDEEP
javascriptphpjquerymysqlajax
Daniel Robinson
Daniel Robinson

Reputation: 653

Attach a table row id to a jquery/ajax function without putting the function in a loop

I have a php query which loops through client data and creates table full of client rows. Each row has a link with unique id attached to it. When this link is click it goes away and runs an ajax function based on the id of the client and opens a modal with the information from that client. This works OK other than its slowing the page down massively

The problem i am having is i am having to create a new loop and loop through the ajax function call as well as the loop for the query or I have to put the ajax call in the main loop. Is there a way to capture the id of the link without having my ajax call in a loop. My example of what i am doing is below.

What I actually want to try and do is click the link and outside the loop have one ajax call that gets the id of the client. Goes away, gets the information I need and populates my modal. Is this even possible or does the call actually have to live in the loop?

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

Upvotes: 1

Views: 584

Answers (2)

Narcis Cotaie
Narcis Cotaie

Reputation: 39

What you want is to attach the .click() function to a class rather than to each id, and the id client can reside in a custom data tag option. <a class="clickMe" data-id="<?php echo $user[$i]['idclient'];?>"
Then the .click() function which will be placed out of the php for and will look like this:


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

Upvotes: 1

Death-is-the-real-truth
Death-is-the-real-truth

Reputation: 72299

1.Create a class and instead of id use that into your jQuery code.

2.Put<script></script> outside of loop at the bottom of the page.

3.A bit change in id structure is also Needed:-

So the code should be like below:-

<?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 } ?>

your modal div html and then

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

Note:-

1.Make sure that jQuery library is added before this code

2.Script code need to be at the bottom of the page.

Upvotes: 3

Related Questions