ThalesMiguel ThalesMiguel - 4 months ago 8
jQuery Question

Call Bootstrap Modal that loads another HTML via Javascript

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

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

Comments