Bootstrap 4 with remote Modal
Solution 1
Found the problem: They have removed the remote option in bootstrap 4
remote : This option is deprecated since v3.3.0 and will be removed in v4. We recommend instead using client-side templating or a data binding framework, or calling jQuery.load yourself.
I used JQuery to implement this removed feature.
$('body').on('click', '[data-toggle="modal"]', function(){
$($(this).data("target")+' .modal-body').load($(this).data("remote"));
});
Solution 2
According to official documentation, we can do the follow(https://getbootstrap.com/docs/4.1/components/modal):
$('#exampleModal').on('show.bs.modal', function (event) {
var button = $(event.relatedTarget) // Button that triggered the modal
var recipient = button.data('whatever') // Extract info from data-* attributes
// If necessary, you could initiate an AJAX request here (and then do the updating in a callback).
// Update the modal's content. We'll use jQuery here, but you could use a data binding library or other methods instead.
var modal = $(this)
modal.find('.modal-title').text('New message to ' + recipient)
modal.find('.modal-body input').val(recipient)
})
So, I believe this is the best approach (works for BS 5 too):
<!-- Button trigger modal -->
<a data-bs-toggle="modal" data-bs-target="#modal_frame" href="/otherpage/goes-here">link</a>
<!-- Modal -->
<div class="modal fade" id="modal_frame" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
<!-- Completes the modal component here -->
</div>
<script>
$('#modal_frame').on('show.bs.modal', function (e) {
$(this).find('.modal-body').load(e.relatedTarget.href);
});
</script>
e.relatedTarget is the anchor() that triggers the modal.
Adapt to your needs
Solution 3
As some of the other answers and Bootstrap docs indicate, Bootstrap 4 requires handling the show.bs.modal
event to load content into the modal. This can be used to either load content from an HTML string, or from a remote url. Here's a working example...
$('#theModal').on('show.bs.modal', function (e) {
var button = $(e.relatedTarget);
var modal = $(this);
// load content from HTML string
//modal.find('.modal-body').html("Nice modal body baby...");
// or, load content from value of data-remote url
modal.find('.modal-body').load(button.data("remote"));
});
Another option is to open the modal once data is returned from an Ajax call...
$.ajax({
url: "http://someapiurl",
dataType: 'json',
success: function(res) {
// get the ajax response data
var data = res.body;
// update modal content
$('.modal-body').text(data.someval);
// show modal
$('#myModal').modal('show');
},
error:function(request, status, error) {
console.log("ajax call went wrong:" + request.responseText);
}
});
Bootstrap 4 Load Modal from Ajax Demo
Solution 4
In Asp.NET MVC, this works for me
html
<a href="#" onclick="Edit(1)">Edit item</a>
<div class="modal" id="modalPartialView" />
jquery
<script type="text/javascript">
function Edit(id)
{
$.ajax({
url: "@Url.Action("ActionName","ControllerName")",
type: 'GET',
cache: false,
data: {id: id},
}).done(function(result){
$('#modalPartialView').html(result)
$('#modalPartialView').modal('show') //part of bootstrap.min.js
});
}
<script>
Action
public PartialViewResult ActionName(int id)
{
// var model = ...
return PartialView("_Modal", model);
}
Zeeshan
Updated on December 16, 2020Comments
-
Zeeshan over 3 years
I can't make the Modal work in the remote mode with the new Twitter Bootstrap release : Bootstrap 4 alpha. It works perfectly fine with Bootstrap 3. With bootstrap 4 I am getting the popup window, but the model body is not getting loaded. There is no remote call being made to
myRemoteURL.do
to load the model body.Code:
<button type="button" data-toggle="modal" data-remote="myRemoteURL.do" data-target="#myModel">Open Model</button> <!-- Model --> <div class="modal fade" id="myModel" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-label="Close"> <span aria-hidden="true">×</span> </button> <h3 class="modal-title" id="myModalLabel">Model Title</h3> </div> <div class="modal-body"> <p> <img alt="loading" src="resources/img/ajax-loader.gif"> </p> </div> <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> <button type="button" class="btn btn-primary">Submit</button> </div> </div> </div> </div>
-
Aaron Gong almost 8 yearsUpvoted. It works, just to clarify, it will load from data-remote="your_own_url" and place it on "modal-body" of data-target="#myModel", you may need to change "model-body" to which even place you want to put the data, e.g. "modal-content"
-
Fred almost 8 yearsIn my case, I used
.load($(this).attr('href'))
. -
Fernando B about 7 yearsfor me since i had multiple modals i used
$('body').on('click.modal.data-api', '[data-toggle="modal"]', function(){ $($(this).data("target")+' .modal-content').load($(this).attr('href')); });
-
Farhan over 6 yearsthe best answer
-
distromob over 6 yearsI want to load a pop-up form that goes to another page example register.html after clicking "Register" gist.github.com/anonymous/5b4d764ad2edbe213344bdd7320754ef
-
Muflix almost 6 yearsHow to get custom data-attribute (data('whatever')) if it is not a button but anchor tag ? I have
$(event.relatedTarget).data('whatever')
undefined. -
Yves almost 6 years@Muflix - This worked for me:
$(event.relatedTarget).attr('data-whatever')
-
Alp Altunel over 5 yearsas you can see there are two data-remote codes. one is data-remote="remoteContent.html" and other is data-remote="true".
-
Václav Kužel about 5 yearsDoes not work for Bootstrap4, remote option has been removed. As it is mentioned in @Zeeshan 's example.
-
algorhythm almost 5 yearsI improve the modal selector to only select elements with
data-remote
attribute like following:$('body').on('click', '[data-toggle="modal"][data-remote]', function(){ /* ... */ });
-
Robert Saylor about 3 yearsThis worked perfectly on the same domain. Note if you are trying to link to external content using the modal you will most likely have CORS issues.