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')

?

Answer 1

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

Sign up