Using Bootstrap 4 to create a modal that is triggered remotely

Question

Using Bootstrap 4 to create a modal that is triggered remotely

I am facing an issue with the Modal in remote mode after updating to the latest version of Twitter Bootstrap, which is Bootstrap 4 alpha. While it was working perfectly fine with Bootstrap 3, I now encounter a problem where the popup window appears but the modal body fails to load. It seems like there is no remote call being made to myRemoteURL.do to fetch the content for the modal body.

Here's the code snippet:

<button type="button" data-toggle="modal" data-remote="myRemoteURL.do" data-target="#myModel">Open Model</button>

<!-- Modal -->
<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>

jquery css twitter-bootstrap bootstrap-4

Answer 1

Answer №1

Identified the issue: Bootstrap 4 no longer supports the remote option

remote : This option has been deprecated starting from version 3.3.0 and will be completely removed in version 4. It is now recommended to use client-side templating or a data binding framework, or handle it using jQuery.load.

I utilized JQuery to replicate this deprecated functionality.

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

Answer 2

Identified the issue: Bootstrap 4 no longer supports the remote option

remote : This option has been deprecated starting from version 3.3.0 and will be completely removed in version 4. It is now recommended to use client-side templating or a data binding framework, or handle it using jQuery.load.

I utilized JQuery to replicate this deprecated functionality.

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

Answer 3

Answer №2

As per the official documentation, it is suggested to follow the instructions provided on this page:

$('#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)
})

Hence, based on my understanding, the most effective approach (which also works for Bootstrap 5) would be:

<!-- 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">
  <!-- Complete the modal component definition here -->
</div>

<script>
  $('#modal_frame').on('show.bs.modal', function (e) {
    $(this).find('.modal-body').load(e.relatedTarget.href);
  });
</script>

e.relatedTarget represents the anchor element triggering the modal.

Customize as needed

Answer 4

As per the official documentation, it is suggested to follow the instructions provided on this page:

$('#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)
})

Hence, based on my understanding, the most effective approach (which also works for Bootstrap 5) would be:

<!-- 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">
  <!-- Complete the modal component definition here -->
</div>

<script>
  $('#modal_frame').on('show.bs.modal', function (e) {
    $(this).find('.modal-body').load(e.relatedTarget.href);
  });
</script>

e.relatedTarget represents the anchor element triggering the modal.

Customize as needed

Answer 5

Answer №3

As mentioned in various answers and the Bootstrap documentation, implementing Bootstrap 4 requires handling the show.bs.modal event to dynamically load content into the modal. This functionality allows for loading content from either an HTML string or a remote URL. Here is an example of how this can be achieved...

$('#theModal').on('show.bs.modal', function (e) {

    var triggerButton = $(e.relatedTarget);
    var targetModal = $(this);

    // Load content from HTML string
    //targetModal.find('.modal-body').html("Custom modal content...");

    // Alternatively, load content from the value of data-remote URL
    targetModal.find('.modal-body').load(triggerButton.data("remote"));

});

See Bootstrap 4 Remote URL Demo here

An alternative approach is to display the modal once data is received from an AJAX request...

$.ajax({
    url: "http://api.example.com/data",
    dataType: 'json',
    success: function(response) {
    
        // Extract data from the AJAX response
        var responseData = response.body;
        // Update modal content with the retrieved data
        $('.modal-body').text(responseData.value);
        // Show the modal
        $('#myModal').modal('show');
    
    },
    error: function(request, status, error) {
        console.log("Something went wrong with the AJAX call: " + request.responseText);
    }
});

Check out the Bootstrap 4 Modal Loading from AJAX Demo

Answer 6

As mentioned in various answers and the Bootstrap documentation, implementing Bootstrap 4 requires handling the show.bs.modal event to dynamically load content into the modal. This functionality allows for loading content from either an HTML string or a remote URL. Here is an example of how this can be achieved...

$('#theModal').on('show.bs.modal', function (e) {

    var triggerButton = $(e.relatedTarget);
    var targetModal = $(this);

    // Load content from HTML string
    //targetModal.find('.modal-body').html("Custom modal content...");

    // Alternatively, load content from the value of data-remote URL
    targetModal.find('.modal-body').load(triggerButton.data("remote"));

});

See Bootstrap 4 Remote URL Demo here

An alternative approach is to display the modal once data is received from an AJAX request...

$.ajax({
    url: "http://api.example.com/data",
    dataType: 'json',
    success: function(response) {
    
        // Extract data from the AJAX response
        var responseData = response.body;
        // Update modal content with the retrieved data
        $('.modal-body').text(responseData.value);
        // Show the modal
        $('#myModal').modal('show');
    
    },
    error: function(request, status, error) {
        console.log("Something went wrong with the AJAX call: " + request.responseText);
    }
});

Check out the Bootstrap 4 Modal Loading from AJAX Demo

Answer 7

Answer №4

When working with Asp.NET MVC, I found this solution to be effective

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

Answer 8

When working with Asp.NET MVC, I found this solution to be effective

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

Answer 9

Answer №5

Using the slim version of Jquery (as recommended in Bootstrap 4 documentation and examples) will cause the load function to fail.

To resolve this issue, it is necessary to utilize the full version of Jquery.

Answer 10

Using the slim version of Jquery (as recommended in Bootstrap 4 documentation and examples) will cause the load function to fail.

To resolve this issue, it is necessary to utilize the full version of Jquery.

Answer 11

Answer №6

This procedure loads the current dynamic data remotely from "remoteContent.html"

<!-- Link to 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 clever technique: data-remote="remoteContent.html"
<!-- Bootstrap default 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>

Answer 12

This procedure loads the current dynamic data remotely from "remoteContent.html"

<!-- Link to 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 clever technique: data-remote="remoteContent.html"
<!-- Bootstrap default 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>

Using Bootstrap 4 to create a modal that is triggered remotely

Answer №1

Answer №2

Answer №3

Answer №4

Answer №5

Answer №6

Similar questions

What is preventing the JavaScript "onblur" function from being triggered?

The attachment with Ajax is not displaying any file data

The anchor element does not trigger the activation process within a flexbox item

What is the correct method for integrating jQuery libraries into an Angular project version 10 or higher?

Tips for resolving issues with the carousel container in bootstrap?

Ways to convert a jQuery object into HTML that can be utilized?

Alter the font color upon clicking the menu using jQuery

I noticed that on my checkout sections, the toggle feature causes them to fold up and then immediately fold back down. This behavior should only happen

Utilizing recursive AJAX requests and halting execution at a specified condition

I aim to showcase JSON data within a div element

Using JQuery, Ajax, and PHP for a secure login system

The JQuery TextNTags plugin eliminates tag formatting once the trigger syntax has been modified

Tips for keeping Sub Menu visible at all times

When Flexigrid is loaded using $(document).Ready(), it will not load again if called by another function outside of $(document).Ready()

Tips for displaying or concealing table rows with form fields on a php site by utilizing jquery/ajax and a drop-down menu selection

The functionality of Ajax requests varies across various web browsers

Failing to retain hyperlinks with ajax

Is it possible to resize an inline SVG element without modifying the <svg> tag?

Execute a self-invoking JavaScript function with dynamic code

Is it possible to detect inline elements that have been wrapped?