Not getting the id of the clicked name

Question

I have a jquery code that fetched the name of the users saved in mysql.

<script>  
var currentID = null;
function fetch_data() {
  $.ajax({
    url: "select.php",
    method: "POST",
    success: function(data) {
      $('#live_data').html(data);
      //fetch_chat();
    }
  });
}

$(document).ready(function() {
 fetch_data();
 $(document).on('click', '.first_name', function() {
    currentID = $(this).data("id1");
    alert(currentID);
  });
});         
</script>

and the select.php looks like this:

<?php 
 session_start();
require("config.php");
 $output = '';  
 $sql = "SELECT * FROM users  where name!='$_SESSION[name]'";  
 $result = mysqli_query($con, $sql);  
 $output .= '  
      <div class="table-responsive">  
           <table class="table table-bordered">  
                <tr>  

                     <th width="40%">First Name</th>  

                </tr>';  
 if(mysqli_num_rows($result) > 0)  
 {  
      while($row = mysqli_fetch_array($result))  
      {  
           $output .= '  
                <tr>  

                     <td class="first_name" data-id1="'.$row['id'].'">'.$row["name"].'</td>  

                </tr>  
           ';  
      }  

 }  
 else  
 {  
      $output .= '<tr>  
                          <td colspan="4">Data not Found</td>  
                     </tr>';  
 }  
 $output .= '</table>  
      </div>';  
 echo $output;  
 ?>

The problem is that I am not geeting the id of the clicked user. the code is to fetch the data from the table and when clicked on any name it should alert their respective id.

It means that your `currentID` is null please verify array index `id` with the database columns — Shankar, Nov 11 '17 at 09:33

Sunny Pun · Answer 1 · 2017-11-11T09:20:05.973

Sorry I forgot that $(document).on() should work for dynamic elements. Old answer is attached at the end of the post.

Please check if the $row['id'] is properly fetched from the server by inspecting element in the browser. Or you may modify the code so inside the <td> it shows $row['id'] instead of $row['name'] to see if the id is correctly fetched. Chances are that the id field isn't named as id in the database - partially why SELECT * queries aren't good (autocomplete and SQL errors won't help us if we listed the wrong field!).

In case it is correctly fetched but the handlers seems not working, maybe this answer may help.

Old Answer

~~For a quickfix, you should put the click handler block inside the success: callback of the ajax call, i.e.:~~

success: function(data) {
    $('#live_data').html(data);
    $(document).on('click', '.first_name', function() {
        currentID = $(this).data("id1");
        alert(currentID);
    });
}

Probably the reason why it isn't working is that fetch_data() is an ajax call.

So before $('#live_data') is populated (after the ajax call succeeded), you have already told the document to attach the click handlers. The <td>s are not there yet!

However, you may not want fetch_data() to couple with the click-handler-adding function. In that case, you may want to attach a then() and return a Promise in the fetch_data() function.

Hope these links may help:

`$(document).on()` will work for Dynamic elements (added from ajax) Also — B. Desai, Nov 11 '17 at 09:10
It worked twice in my system but after few days when I run the it wasn't working. — max tech, Nov 11 '17 at 09:28
In that case, if you have a version control, maybe it is worth trying to revert the commits to find the one the broke this existing function? And, is the `$row['id']` correctly shown in the HTML? — Sunny Pun, Nov 11 '17 at 09:31

Not getting the id of the clicked name

1 Answers1

Old Answer