Table Row attr() Issue - php

Question

I'm stuck on a piece of code that calls a jQuery modul populated with a table row id. I'm about 90% sure that the error is within my jQuery code. Once I click on the button (class="view"), I get an undefined value instead of the row ID.
Thanks for any help!
Relevant section of leads_queue_a.php:
<section class="main">
<h1>Lead Queue - Assigned Leads</h1>
<div id="lead_wrapper_a"></div>
</section>
fill_leads_a.php:
$cond = array();
$params = array();
if ($_POST['id'] == '') {
return;
}
if (isset($_POST['id']) && $_POST['id'] != '') {
$userID = $_POST['id'];
}
if (!empty($userID)) {
$cond[] = '`users`.`id` = ?';
$params[] = "$userID";
}
$query = "SELECT `leads`.`id`, `leads`.`fname`, `leads`.`lname`, `leads`.`lead_type`, `leads`.`addr_street`, `leads`.`addr_city`, `leads`.`addr_zip`, `leads`.`phone`, `leads`.`phone_alt`, `leads`.`note`, `leads`.`created_by`, `leads`.`created` FROM `leads`,`users`,`leads_assignment`";
if (count($cond)) {
$query .= ' WHERE ' . implode(' AND ', $cond);
}
$query .= ' AND `leads`.`id` = `leads_assignment`.`id_lead`'
. ' AND `users`.`id` = `leads_assignment`.`id_user`';
$stmt = $db->prepare($query);
$stmt->execute($params);
//TABLE BUILDER
$lead = '';
$lead .= '<div class="leads">';
$lead .= '<table class="lead_table">';
$lead .= '<tr>';
$lead .= '<td>Customer</td>';
$lead .= '<td>Phone</td>';
$lead .= '<td>Lead Type</td>';
$lead .= '<td>Status</td>';
$lead .= '<td>Operations</td>';
$lead .= '</tr>';
foreach ($stmt->fetchAll(PDO::FETCH_OBJ) as $row) {
$id = $row->id;
$status = get_statusLast($id);
$fname = $row->fname;
$lname = $row->lname;
$lead_type = $row->lead_type;
$addr_street = $row->addr_street;
$addr_city = $row->addr_city;
$addr_zip = $row->addr_zip;
$phone = $row->phone;
$phone_alt = $row->phone_alt;
$note = $row->note;
$created_by = $row->created_by;
$created = $row->created;
$lead .= "<tr id='$id'>";
$lead .= '<td>' . $fname . ' ' . $lname . '<br />' . $addr_street . '<br />' . $addr_city . ' ' . $addr_zip . '</td>';
$lead .= '<td>' . $phone . '<br />' . $phone_alt . '</td>';
$lead .= '<td>' . $lead_type . '</td>';
$lead .= '<td>' . $status . '</td>';
$lead .= '<td><button type="button" class="view" name="view">View Notes</button><br />'
. '<button type="button" class="update" name="update">Update Status</button></td>';
}
$lead .= '</table>';
$lead .= '</div>';
$db = null;
print $lead;
Relevent section of modul.js:
$("#lead_wrapper_a").on('click', '.view', function() {
alert($('tr', this).attr('id'));
});

Answer 1

Because your selction is incorrect. Use closest to get to the clicked buttons parent row (tr). Using the syntax $('tr', this) you are trying to find tr that are descendant of the button .view which is incorrect. You need to go upwards to get to the tr. this in the handler will be the button.
alert($(this).closest('tr').attr('id'));

Answer 2

You are trying to search row tr in descendant of button but button is descendant of row tr. You probably need closest() to get the ancestor row, to get the parent row of button having class view.
$("#lead_wrapper_a").on('click', '.view', function() {
alert($(this).closest('tr').attr('id'));
});

Answer 3

You cant find tr within the context of this, Because tr is the ancestor of the source button in your case. So you have to use .closest() to achieve the desired result.
Try,
$("#lead_wrapper_a").on('click', '.view', function() {
$( "#dialog_view" ).dialog( "open" );
alert($(this).closest('tr').attr('id'));
});

Answer 4

when it comes to table its bit tricky.
for your first line you want to select the entire path of class "view". I dont know your exact path but it should be someting like this.
$("#lead_wrapper_a").on('click', '"#lead_wrapper_a > table > tbody > tr > td.view', function() {
});
Hope this helps