CODEWITHSUNDEEP
javascriptajax
mctjl_1997
mctjl_1997

Reputation: 163

On table row click, alert box shows click value

i'm having problems where when i click the tablerow, nothing is being shown. enter image description here

When I click lets say the row where customername= 'John', the name 'John' should appear on a alert box, but nothing happens.

This is my table click code.

$(document).ready(function(){
$("#parentElementIdHere").on("click", "#test tr", function(e) {
var name = $(this).find("td").first().text();
alert(name);
});

And, here is my generating of table code.

if(!empty($_GET['q'])){
$q = $_GET['q'];
$query="select * from customer where customername like '$q%'";
$result = mysqli_query($dbconn,$query);
echo "<div id='parentElementIdHere'>";
echo "<table id='test' border=3>
<tr>
<th>Customername</th>
<th>nric</th>
<th>email</th>
<th>mobileno</th>
<th>telephoneno</th>
<th>address</th>
<th>postalcode</th>
<th>datejoined</th>
<th>points</th>
</tr>";
while($row =  mysqli_fetch_array($result)){
echo "<tr>";
echo "<td>" . $row['customername'] . "</td>";
echo "<td>" . $row['nric'] . "</td>";
echo "<td>" . $row['email'] . "</td>";
echo "<td>" . $row['mobileno'] . "</td>";
echo "<td>" . $row['telephoneno'] . "</td>";
echo "<td>" . $row['occupation'] . "</td>";
echo "<td>" . $row['address'] . "</td>";
echo "<td>" . $row['postalcode'] . "</td>";
echo "<td>" . $row['datejoined'] . "</td>";
echo "<td>" . $row['points'] . "</td>";
echo "</tr>";
} 
echo "</table>"; 
echo "</div>";
}

Could the problem be because my table generated is constantly changing because of ajax?

Upvotes: 1

Views: 3314

Answers (3)

mctjl_1997
mctjl_1997

Reputation: 163

I managed to solve it. I tested with a non ajax generated sql table and did it. Then i brought over the javascript code over to this file and tried it out. This is the code i used.

$(document).ready(function(){
}).on('click','.test tr',function(){
var id = $(this).attr('value');
alert(id);
});

Thanks to all who helped me i appreciate it!

Upvotes: 0

Naga Sai A
Naga Sai A

Reputation: 10975

To get name value for click on any value of the row 

          $("tr").click(function() {
          var str = this.innerText;
          var i = str.split('').indexOf("   ");
          alert(str.slice(0, i));
        })

http://codepen.io/nagasai/pen/QENwgQ

to get table cell value on click 

 $("td").click(function(){
  alert(this.innerText);
  })

codepen URL for reference- http://codepen.io/nagasai/pen/jrqEBz

Hope this is helpful for you

Upvotes: 2

nnnnnn
nnnnnn

Reputation: 150040

There are two main problems with your code:

  1. Your selector '#test tr #name' says to select all elements with id="name" that are descendants of tr elements, but it is actually your tr elements that all have that id. (And speaking of them all having that same id, duplicate ids is invalid HTML.)

  2. Calling .click() binds a click handler to elements that exist at that moment. Which means that when your table changes due to an Ajax call your click handler would not work for the newly loaded/created elements even if you fixed the selector.

The solution to both problems is to use a delegated event handler, which you bind to the table element's parent (or to the nearest ancestor element that does not get overwritten by the Ajax call):

$(document).ready(function(){
  $("#parentElementIdHere").on("click", "#test tr", function(e) {
    var name = $(this).find("td").first().text();
    alert(name);
  });
});

When a click occurs on any descendant element of the parent element, jQuery will check if the specific clicked element matches the selector that is the second argument to the .on() method, and if so it will call your function with this set to the matching element. Because the matching element is a tr element, you would then use .find("td").first() to get that row's name td.

Demo: https://jsfiddle.net/269Lt9hm/

Upvotes: 0

Related Questions