On click ticket ID open message-content tr

Printable View

08-21-2016, 12:45 PM
vinpkl

On click ticket ID open message-content tr

hi all

I am trying to open message-content tr on click ticket ID

but its not opening message-content tr

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <title>Untitled Document</title> <style type="text/css"> #imaptable{border:1px solid #CCCCCC; border-collapse:collapse} #imaptable td{padding:3px} #imaptable th{background-color:#eee; padding:3px;} .message-content{display:none} </style> </head> <body> <table width="100%" border="1" cellspacing="0" cellpadding="0" id="imaptable"> <tr> <td><a href="" class="ticket">Ticket ID</a></td> <td class="date">Mon, 7 May 2016</td> <td class="from">John</td> <td class="subject">Subject : inquiry df</td> </tr> <tr> <td class="message-content" colspan="5">first ticket message comes here</td> </tr> <tr> <td><a href="" class="ticket">Ticket ID</a></td> <td class="date">Mon, 12 May 2016</td> <td class="from">Sam Cook</td> <td class="subject">Subject : getting latest phone</td> </tr> <tr> <td class="message-content" colspan="5">second ticket message comes here</td> </tr> </table> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> <script type="text/javascript"> var msgopen = $('.message-content'); $('.ticket').click(function(e) { msgopen.hide(); $(this).closest("tr").next(".message-content").show(); }); </script> </body> </html>

vineet
08-21-2016, 04:29 PM
jscheuer1

The class (message-content) is on the td element, but that's not within the next() category (must be a same level child of the parent of the element being searched from) of the tr you get with closest("tr"). Long story short, move the message-content class to the tr elements. Also the click function on an a tag that has an href (even an empty one) must be at least default prevented, otherwise the page will reload before or immediately after the action is carried out (changes/additions highlighted, 3 places):

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <title>Untitled Document</title> <style type="text/css"> #imaptable{border:1px solid #CCCCCC; border-collapse:collapse} #imaptable td{padding:3px} #imaptable th{background-color:#eee; padding:3px;} .message-content{display:none} </style> </head> <body> <table width="100%" border="1" cellspacing="0" cellpadding="0" id="imaptable"> <tr> <td><a href="" class="ticket">Ticket ID</a></td> <td class="date">Mon, 7 May 2016</td> <td class="from">John</td> <td class="subject">Subject : inquiry df</td> </tr> <tr class="message-content"> <td colspan="5">first ticket message comes here</td> </tr> <tr> <td><a href="" class="ticket">Ticket ID</a></td> <td class="date">Mon, 12 May 2016</td> <td class="from">Sam Cook</td> <td class="subject">Subject : getting latest phone</td> </tr> <tr class="message-content"> <td colspan="5">second ticket message comes here</td> </tr> </table> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> <script type="text/javascript"> var msgopen = $('.message-content'); $('.ticket').click(function(e) { msgopen.hide(); $(this).closest("tr").next(".message-content").show(); e.preventDefault(); }); </script> </body> </html>
08-22-2016, 02:30 AM
vinpkl

Thanks jscheuer1

Its working perfect now

vineet