CODEWITHSUNDEEP
javascriptjquerydatatablesmodal-dialogbootstrap-modal
Marco A. Vieto V
Marco A. Vieto V

Reputation: 41

Load image from datatable to a modal when I click on a row

I'm have a table with some rows that contains images like this

<tr>
<td><img src="img/examples/photo/example_1s.jpg" class="img-polaroid"/></td>
<td>jhon</td>
<td>mv03790</td>
</tr>

and I'm trying to load a modal with the data from the row,

like this

$('tr td').on('click',function(){
$("#fname").val($(this).closest('tr').children()[1].textContent);
$("#username").val($(this).closest('tr').children()[2].textContent);
$("#rowmodal").modal("show");
});

it works for the all text, but i can't get to load an image

this is the modal

<img id="edit_foto" src="">
<input type="text" id ="fname"/>
<input type="text" id ="username"/>

I'm trying to make like an user edit modal, with the data loaded when I click a user from the table

Upvotes: 0

Views: 1662

Answers (1)

charlietfl
charlietfl

Reputation: 171690

For the image try the following:

$('tr:has(td)').on('click', function() {
  var $row = $(this);
  $("#fname").val($row.children()[1].textContent);

  $('#edit_foto').attr('src', $row.find('img').attr('src'));
  $("#username").val($row.children()[2].textContent);
  $("#rowmodal").modal("show");
});

I moved click handler to <tr> since it would be same as clicking on any and simplifies$row`

Upvotes: 1

Related Questions