user982124 user982124 - 1 year ago 39
HTML Question

Get Table Cell values and pass to Javascript

I have a table with a link which opens a Bootstrap modal. I'm trying to pass some values from the row the user clicks the link on to the modal, but I'm having trouble getting the values from the table cell.

Here's how the table rows look:



<tr id="D8F49748-212A-42D8-A188-4C23556027FA">
<td><a href="#" data-contactName="John Citizen" data-contactMobile="0412345678" data-toggle="modal" data-rec-id="1537" data-target="#contactCallModal"><span class="glyphicon glyphicon-earphone"></span> 0412345678</a></td>
</tr>
<tr id="D9AA7744-E138-4A0E-86A2-B8D0CD2007D6">
<td><a href="#" data-contactName="Fred Flinstone" data-contactMobile="0498765432" data-toggle="modal" data-rec-id="1577" data-target="#contactCallModal"><span class="glyphicon glyphicon-earphone"></span> 0498765432</a></td>
</tr>





and here's my script which runs when the modal loads where I'm trying to get to the data-contactMobile and the data-contactName from the selected cell:



$(window).load(function() {
$('#contactCallModal').on('show.bs.modal', function(e) {
var recID = $(e.relatedTarget).data('rec-id');
var contactMobile = $(e.relatedTarget).data('contactMobile');
var contactName = $(e.relatedTarget).data('contactName');
console.log(recID);
console.log(contactMobile);
console.log(contactName)
});
}); //]]>





When I look in the Console I'm only seeing the recID - the contactName and contactMobile are showing as undefined. Not sure what I'm doing wrong here?

Answer Source

Last Time I got the same issue, when i used javascript method getAttribute()

it worked

Try it

 var clickedlink = e.relatedTarget;
 var contactMobile  = clickedlink.getAttribute('data-contactMobile');
 var contactName= clickedlink.getAttribute('data-contactName');
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download