单击时更新具有PHP生成的表行ID的AJAX请求变量

Question

Im probably overlooking something very obvious but at this point i surrender and need help.

Here is my situation. When my page loads, in a while loops, PHP generates a table with data from my server. Each table row has a name column, phone, etc. One of the columns is an icon that when clicked allows the user to view a popup with notes on this particular lead. Easy stuff.

The icons in each row have the same class name and their ID's are unique.

I have an AJAX request that should be pulling the notes data from the server and displaying it in the popup when the user clicks on the relative icon. I am trying to use $('.class').click(this).attr('id'); to set a variable in my AJAX request with the id that needs to be submitted to my PHP script.

PROBLEM: The AJAX request and return seems to be working fine but no matter which row icon I click on it only displays the data that belongs to the first row, or the first instance with the class name 'homelead' Example: I click on row 1 icon and i get a popup with row 1's notes, GREAT!. I click on any other row and it only shows the 1st rows data, :(. I have confirmed that the ID's associated with each row icon are correct by doing a simple click.(this).(id) and alerting the id belonging to the row icon. All is correct, just can't seem to get the JS variable to update with the correct ID.

Im confused why this is. Any help would be appreciated. Here is my current code.

HTML:

 <td>
       <img class="homelead" id="<?php echo $leadsfetch['unit_id'];?>"  
           onclick="ajax_unitnotes();" src="images/list-view.png">
  </td>
  <?php echo "</tr>"; } ?>

AJAX request:

function ajax_unitnotes(){

    var hr = new XMLHttpRequest();
    var url = "PHP/getnotes.php";

   // this variable should update with clicked rows id before      submitting to PHP script
    var unitidnotes = $('.homelead').click(this).attr('id');     

    var vars = "unitidnotes="+unitidnotes;
    hr.open("POST", url, true);
    hr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
    hr.onreadystatechange = function() {
        if(hr.readyState == 4 && hr.status == 200) {
            var return_data = hr.responseText;
            document.getElementById("unitnotes").innerHTML = return_data;
        }
    }
    hr.send(vars); 
    document.getElementById("unitnotes").innerHTML = "processing...";
}

Answer 1

As you are using an onclick trigger in the tag itself - which is usually un common when using jQuery. You can do this:

 <img class="homelead" id="<?php echo $leadsfetch['unit_id'];?>"  
           onclick="ajax_unitnotes($(this));" src="images/list-view.png">

And the in your function

function ajax_unitnotes(e){

    var unitidnotes = e.attr('id');
}

Your current code

var unitidnotes = $('.homelead').click(this).attr('id'); 

Actually does not know what it the this object you are trying to access.

Better yet you can use a jQuery event, remove the onclick from the img tag and have an event like this:

$('.homelead').click(function(){
    id = $(this).attr('id');
});

Answer 2

You could pass the clicked object this to the function trigged by "onclick":

onclick="ajax_unitnotes(this);"

That will make the DOM object you clicked on available inside the JS function.

You need to change the function signature accordingly:

function ajax_unitnotes(clickedElement){

and then you can alter this

var unitidnotes = $('.homelead').click(this).attr('id');  

to

var unitidnotes = clickedElement.id;

This will give you the value of $leadsfetch['unit_id'] = img id.