Geek Answers Handbook

Bootstrap 4 with remote module

I cannot get Modal to work remotely with the new Bootstrap Twitter release: Bootstrap 4 alpha. It works fine with Bootstrap 3. With bootstrap 4, I get a popup, but the model body does not load. Remote myRemoteURL.do not required 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>
+16
source share
6 answers

Problem detected: They removed the remote option in bootstrap 4

remote . This option has been deprecated since version v.3.3.0 and will be removed in version 4. We recommend using client-side templates or a data binding structure instead, or calling jQuery.load yourself.

I used jQuery to implement this remote function.

 $('body').on('click', '[data-toggle="modal"]', function(){ $($(this).data("target")+' .modal-body').load($(this).data("remote")); });
+34
source

According to the official documentation, we can do the following ( 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 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) })

Therefore, I believe this is the best approach:

 $('#modal_frame').on('show.bs.modal', function (e) { $(this).find('.modal-content').load(e.relatedTarget.href); });

Adapt your needs

+17
source

As some other Bootstrap answers and documents show, Bootstrap 4 requires the handling of the show.bs.modal event to load content into a modal one. You can use this to load content from an HTML string or from a remote URL. Here is 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 as soon as the data is returned from the 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 Download Modal from Ajax Demo

+2
source

If you use a thin version of jQuery (as with all documents and Bootstrap 4 examples), the download function will not work

You need to use the full version of jQuery

0
source

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>

act

 public PartialViewResult ActionName(int id) { // var model = ... return PartialView("_Modal", model); }
0
source

This process loads the current dynamics. 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>
0
source

More articles:


All Articles