CODEWITHSUNDEEP
javascriptphpjquery
user3003900
user3003900

Reputation: 9

Get row content to a popup window

I have used this function to pop up a window, when a user clicked the table row 

<script type="text/javascript">
    $(document).ready(function() {
        $("td.abc").click(function() {
            var t = 'Ticket ID: ' + $(this).find('td:eq(0)').html()+'\n'+'\n';
            var r = 'Subject: ' + $(this).find('td:eq(1)').html()+'\n'+'\n';
            var e = 'Messege: ' + $(this).find('td:eq(2)').html()+'\n'+'\n';
            var f = 'Developer: ' + $(this).find('td:eq(3)').html()+'\n'+'\n';
            var w = 'Current Status: ' + $(this).find('td:eq(4)').html()+'\n'+'\n';
            var q = 'Uploaded Date & Time: ' + $(this).find('td:eq(5)').html()+'\n'+'\n';

            var o = $("#79").attr("name")+'\n'+'\n';
            alert(t+r+e+f+w+q+o);

        });
    });
</script>

my table is as follows 

echo "<br> <table border='0' id='example' width='980' align='center'>
<tr>
    <th width='60'>Ticket ID</th>
    <th width='150'>Subject</th>
    <th width='670'>Messege</th>
    <th width='60'>Developer</th>
    <th width='70'>Status</th>
    <th width='105'>Date - Time</th>
</tr>";

while($row = mysql_fetch_array($result)) {
    //echo $row['jobSatus'];
    echo "<tr>";
    echo "<td class=\"abc\" width='60'>" . $row['id'] . "</td>";
    echo "<td class=\"abc\" width='150'>" . $row['subject'] . "</td>";
    echo "<td class=\"abc\" width='670'>" . $row['msg'] . "</td>";
    echo "<td class=\"abc\" width='60'>" . $row['developer'] . "</td>";
    echo "<td class=\"abc\"width='60'>" . $row['jobstatus'] . "</td>";
    echo "<td class=\"abc\" width='105'>" . $row['date_time'] . "</td>";
    echo "<input class=\"abc\" type='hidden' name=".$row['image']." id=".$row['id'].">";
    echo "</tr>";
}
echo "</table>";

Now inside the pop window I don't get any values. It says "undefined". I would be very thankful if someone could show what I have done wrong.

Upvotes: 0

Views: 653

Answers (3)

Sergey
Sergey

Reputation: 5207

Set onclick on table-row

$("tr.ticker-row").click(function(ev) {
    var $this = $(ev.currentTarget);
    var t = 'Ticket ID: ' + $this.find('td:eq(0)').html()+'\n'+'\n';
    var r = 'Subject: ' + $this.find('td:eq(1)').html()+'\n'+'\n';
    var e = 'Messege: ' + $this.find('td:eq(2)').html()+'\n'+'\n';
    var f = 'Developer: ' + $this.find('td:eq(3)').html()+'\n'+'\n';
    var w = 'Current Status: ' + $this.find('td:eq(4)').html()+'\n'+'\n';
    var q = 'Uploaded Date & Time: ' + $this.find('td:eq(5)').html()+'\n'+'\n';
    var o = $this.find('input').attr('name') + '\n'+'\n';
    alert(t+r+e+f+w+q+o);
});

On php, do not insert any node in tr except td

while($row = mysql_fetch_array($result)) {
  //echo $row['jobSatus'];
  echo "<tr class=\"ticket-row\" data-row-index=\"".$row['id']."\">";
  echo "<td class=\"abc\" width='60'>" . $row['id'] . "<input class=\"abc\" type='hidden' name=".$row['image']." ></td>";
  echo "<td class=\"abc\" width='150'>" . $row['subject'] . "</td>";
  echo "<td class=\"abc\" width='670'>" . $row['msg'] . "</td>";
  echo "<td class=\"abc\" width='60'>" . $row['developer'] . "</td>";
  echo "<td class=\"abc\"width='60'>" . $row['jobstatus'] . "</td>";
  echo "<td class=\"abc\" width='105'>" . $row['date_time'] . "</td>";
  echo "</tr>";
  }
echo "</table>";

Upvotes: 0

epascarello
epascarello

Reputation: 207527

You are clicking on a table cell, not a table row

$("td.abc").click(function() {
   ^^

Change it to look at the table

$("#example").on("click", "tr", function () {

or

$("#example").on("click", "tr:has(td.abc)", function () {

And your HTML markup is invalid since an input element can not be a child element of a tr.

Upvotes: 0

Marc
Marc

Reputation: 139

try to change this...

var t = 'Ticket ID: ' + $(this).find('td:eq(0)').html()+'\n'+'\n';

to this

var t = 'Ticket ID: ' +$(this).closest('td:eq(0)').attr('class');

Hope this will help....

Upvotes: 1

Related Questions