Call Bootstrap Modal that loads another HTML via Javascript

Question

I have this table where, When a user clicks on a row, should open a modal with some information regarding that row. Since the content of this Modal is on another HTML file within my project, I don't know how to accomplish it.

So far, I can do this for each row:

<tr data-toggle="modal" href="../clients/edit.html" data-id="10238" data-target=".clientEditModal">
  <td>10238</td>
  <td>eduardo@pingpong.com</td>
  <td>14.10.2013</td>
</tr>

I'd like to do something like this via Javascript:

$(".table-clickable").find("tr").dblclick(function(){
  $('.clientEditModal').modal('show'); 
});

Is there a way to specify an HTML file to load as a model using Javascript modal('show')?

With the Bootstrap 3.3 update and deprecation, the linked answer is no longer useful. — CXJ, Aug 03 '17 at 21:01

score 2 · Accepted Answer · edited May 23 '17 at 11:58

The ability to use remote urls has been deprecated in the most recent versions of bootstrap. Try something along the lines of

// Fill modal with content from link href
$("#myModal").on("show.bs.modal", function(e) {
    var link = $(e.relatedTarget);
    $(this).find(".modal-body").load(link.attr("href"));
});

for full context please see marcovtwout's answer over at: Load content with ajax in bootstrap modal

Call Bootstrap Modal that loads another HTML via Javascript

1 Answers1