Bootstrap 4 with remote Modal

Question

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">&times;</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>

Zeeshan · Accepted Answer · 2019-11-08T14:08:43.317

66

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"));
    });

edited Nov 08 '19 at 14:08

answered Jan 13 '16 at 09:47

Zeeshan

11,851
21
73
98

2

Upvoted. 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" – Aaron Gong Jul 11 '16 at 01:59
10

In my case, I used `.load($(this).attr('href'))`. – Fred Aug 15 '16 at 13:07
2

for 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')); });` – Fernando B May 16 '17 at 16:49
1

the best answer – Farhan Oct 16 '17 at 12:30
I improve the modal selector to only select elements with `data-remote` attribute like following: `$('body').on('click', '[data-toggle="modal"][data-remote]', function(){ /* ... */ });` – algorhythm Sep 16 '19 at 12:56

Marcelo Bonus · Answer 2 · 2020-12-16T00:02:52.593

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

How to get custom data-attribute (data('whatever')) if it is not a button but anchor tag ? I have `$(event.relatedTarget).data('whatever')` undefined. — Muflix, Aug 09 '18 at 08:32
@Muflix - This worked for me: `$(event.relatedTarget).attr('data-whatever')` — Yves, Aug 30 '18 at 05:24

Carol Skelly · Answer 3 · 2018-04-26T11:17:30.993

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"));

});

Bootstrap 4 Remote URL Demo

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

I want to load a pop-up form that goes to another page example register.html after clicking "Register" https://gist.github.com/anonymous/5b4d764ad2edbe213344bdd7320754ef — distromob, Mar 07 '18 at 15:28
This 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. — Robert Saylor, Apr 11 '21 at 12:53

score 1 · Answer 4 · answered Aug 09 '18 at 09:00

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);
}

score 0 · Answer 5 · edited Jul 26 '18 at 12:43

0

If you use the Jquery slim version (as in all the Bootstrap 4 docs and examples) the load function will fail

You need to use the full version of Jquery

edited Jul 26 '18 at 12:43

Yule

9,668
3
51
72

answered May 15 '18 at 09:00

David Sims

21
3

score -3 · Answer 6 · answered Dec 06 '18 at 13:51

This process is loading the current dynamic. data remote = "remoteContent.html"

<!-- Link trigger modal -->
<a href="javascript:void(0);" data-remote="remoteContent.html" data-toggle="modal" data-target="#myModal" data-remote="true" class="btn btn-default">
    Launch Modal
</a>
This trick :  data-remote="remoteContent.html"
<!-- Default bootstrap modal example -->
<div class="modal fade" id="myModal" 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">&times;</span></button>
        <h4 class="modal-title" id="myModalLabel">Modal title</h4>
      </div>
      <div class="modal-body">
        ...
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>

as you can see there are two data-remote codes. one is data-remote="remoteContent.html" and other is data-remote="true". — Alp Altunel, Mar 29 '19 at 13:08
Does not work for Bootstrap4, remote option has been removed. As it is mentioned in @Zeeshan 's example. — Václav Kužel, May 05 '19 at 07:05

Bootstrap 4 with remote Modal

6 Answers6

Linked

Related