[ajax] Bootstrap 3 - How to load content in modal body via AJAX?

As you can see here, I have a button that launches a modal. Setting an href url for the button this url is automatically loaded into modal by Bootstrap 3. The fact is this page is loaded into modal root (as said in the bootstrap 3 documentation for modals usage). I want to load it into the modal-body instead.

Is there a way to do it via attributes (not javascript)? Or what is the most automatic way to do it?

P.S. I remember in Bootstrap 2 the content was loaded in the body, not the root.

The answer is


This is actually super simple with just a little bit of added javascript. The link's href is used as the ajax content source. Note that for Bootstrap 3.* we set data-remote="false" to disable the deprecated Bootstrap load function.

JavaScript:

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

Html (based on the official example):

<!-- Link trigger modal -->
<a href="remoteContent.html" data-remote="false" data-toggle="modal" data-target="#myModal" class="btn btn-default">
    Launch Modal
</a>

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

Try it yourself: https://jsfiddle.net/ednon5d1/


I guess you're searching for this custom function. It takes a data-toggle attribute and creates dynamically the necessary div to place the remote content. Just place the data-toggle="ajaxModal" on any link you want to load via AJAX.

The JS part:

$('[data-toggle="ajaxModal"]').on('click',
              function(e) {
                $('#ajaxModal').remove();
                e.preventDefault();
                var $this = $(this)
                  , $remote = $this.data('remote') || $this.attr('href')
                  , $modal = $('<div class="modal" id="ajaxModal"><div class="modal-body"></div></div>');
                $('body').append($modal);
                $modal.modal({backdrop: 'static', keyboard: false});
                $modal.load($remote);
              }
            );

Finally, in the remote content, you need to put the entire structure to work.

<div class="modal-dialog">
    <div class="modal-content">
        <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal">&times;</button>
            <h4 class="modal-title"></h4>
        </div>
        <div class="modal-body">
        </div>
        <div class="modal-footer">
            <a href="#" class="btn btn-white" data-dismiss="modal">Close</a>
            <a href="#" class="btn btn-primary">Button</a>
            <a href="#" class="btn btn-primary">Another button...</a>
        </div>
    </div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->

In the case where you need to update the same modal with content from different Ajax / API calls here's a working solution.

$('.btn-action').click(function(){
    var url = $(this).data("url"); 
    $.ajax({
        url: url,
        dataType: 'json',
        success: function(res) {

            // get the ajax response data
            var data = res.body;

            // update modal content here
            // you may want to format data or 
            // update other modal elements here too
            $('.modal-body').text(data);

            // show modal
            $('#myModal').modal('show');

        },
        error:function(request, status, error) {
            console.log("ajax call went wrong:" + request.responseText);
        }
    });
});

Bootstrap 3 Demo
Bootstrap 4 Demo


A simple way to use modals is with eModal!

Ex from github:

  1. Link to eModal.js <script src="//rawgit.com/saribe/eModal/master/dist/eModal.min.js"></script>
  2. use eModal to display a modal for alert, ajax, prompt or confirm

    // Display an alert modal with default title (Attention)
    eModal.ajax('your/url.html');
    

_x000D_
_x000D_
$(document).ready(function () {/* activate scroll spy menu */_x000D_
_x000D_
    var iconPrefix = '.glyphicon-';_x000D_
_x000D_
_x000D_
    $(iconPrefix + 'cloud').click(ajaxDemo);_x000D_
    $(iconPrefix + 'comment').click(alertDemo);_x000D_
    $(iconPrefix + 'ok').click(confirmDemo);_x000D_
    $(iconPrefix + 'pencil').click(promptDemo);_x000D_
    $(iconPrefix + 'screenshot').click(iframeDemo);_x000D_
    ///////////////////* Implementation *///////////////////_x000D_
_x000D_
    // Demos_x000D_
    function ajaxDemo() {_x000D_
        var title = 'Ajax modal';_x000D_
        var params = {_x000D_
            buttons: [_x000D_
               { text: 'Close', close: true, style: 'danger' },_x000D_
               { text: 'New content', close: false, style: 'success', click: ajaxDemo }_x000D_
            ],_x000D_
            size: eModal.size.lg,_x000D_
            title: title,_x000D_
            url: 'http://maispc.com/app/proxy.php?url=http://loripsum.net/api/' + Math.floor((Math.random() * 7) + 1) + '/short/ul/bq/prude/code/decorete'_x000D_
        };_x000D_
_x000D_
        return eModal_x000D_
            .ajax(params)_x000D_
            .then(function () { alert('Ajax Request complete!!!!', title) });_x000D_
    }_x000D_
_x000D_
    function alertDemo() {_x000D_
        var title = 'Alert modal';_x000D_
        return eModal_x000D_
            .alert('You welcome! Want clean code ?', title)_x000D_
            .then(function () { alert('Alert modal is visible.', title); });_x000D_
    }_x000D_
_x000D_
    function confirmDemo() {_x000D_
        var title = 'Confirm modal callback feedback';_x000D_
        return eModal_x000D_
            .confirm('It is simple enough?', 'Confirm modal')_x000D_
            .then(function (/* DOM */) { alert('Thank you for your OK pressed!', title); })_x000D_
            .fail(function (/*null*/) { alert('Thank you for your Cancel pressed!', title) });_x000D_
    }_x000D_
_x000D_
    function iframeDemo() {_x000D_
        var title = 'Insiders';_x000D_
        return eModal_x000D_
            .iframe('https://www.youtube.com/embed/VTkvN51OPfI', title)_x000D_
            .then(function () { alert('iFrame loaded!!!!', title) });_x000D_
    }_x000D_
_x000D_
    function promptDemo() {_x000D_
        var title = 'Prompt modal callback feedback';_x000D_
        return eModal_x000D_
            .prompt({ size: eModal.size.sm, message: 'What\'s your name?', title: title })_x000D_
            .then(function (input) { alert({ message: 'Hi ' + input + '!', title: title, imgURI: 'https://avatars0.githubusercontent.com/u/4276775?v=3&s=89' }) })_x000D_
            .fail(function (/**/) { alert('Why don\'t you tell me your name?', title); });_x000D_
    }_x000D_
_x000D_
    //#endregion_x000D_
});
_x000D_
.fa{_x000D_
  cursor:pointer;_x000D_
 }
_x000D_
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>_x000D_
<script src="http://rawgit.com/saribe/eModal/master/dist/eModal.min.js"></script>_x000D_
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>_x000D_
_x000D_
_x000D_
<link href="https://maxcdn.bootstrapcdn.com/bootswatch/3.3.5/united/bootstrap.min.css" rel="stylesheet" >_x000D_
<link href="http//cdnjs.cloudflare.com/ajax/libs/font-awesome/4.3.0/css/font-awesome.min.css" rel="stylesheet">_x000D_
_x000D_
<div class="row" itemprop="about">_x000D_
 <div class="col-sm-1 text-center"></div>_x000D_
 <div class="col-sm-2 text-center">_x000D_
  <div class="row">_x000D_
   <div class="col-sm-10 text-center">_x000D_
    <h3>Ajax</h3>_x000D_
    <p>You must get the message from a remote server? No problem!</p>_x000D_
    <i class="glyphicon glyphicon-cloud fa-5x pointer" title="Try me!"></i>_x000D_
   </div>_x000D_
  </div>_x000D_
 </div>_x000D_
 <div class="col-sm-2 text-center">_x000D_
  <div class="row">_x000D_
   <div class="col-sm-10 text-center">_x000D_
    <h3>Alert</h3>_x000D_
    <p>Traditional alert box. Using only text or a lot of magic!?</p>_x000D_
    <i class="glyphicon glyphicon-comment fa-5x pointer" title="Try me!"></i>_x000D_
   </div>_x000D_
  </div>_x000D_
 </div>_x000D_
_x000D_
 <div class="col-sm-2 text-center">_x000D_
  <div class="row">_x000D_
   <div class="col-sm-10 text-center">_x000D_
    <h3>Confirm</h3>_x000D_
    <p>Get an okay from user, has never been so simple and clean!</p>_x000D_
    <i class="glyphicon glyphicon-ok fa-5x pointer" title="Try me!"></i>_x000D_
   </div>_x000D_
  </div>_x000D_
 </div>_x000D_
 <div class="col-sm-2 text-center">_x000D_
  <div class="row">_x000D_
   <div class="col-sm-10  text-center">_x000D_
    <h3>Prompt</h3>_x000D_
    <p>Do you have a question for the user? We take care of it...</p>_x000D_
    <i class="glyphicon glyphicon-pencil fa-5x pointer" title="Try me!"></i>_x000D_
   </div>_x000D_
  </div>_x000D_
 </div>_x000D_
 <div class="col-sm-2 text-center">_x000D_
  <div class="row">_x000D_
   <div class="col-sm-10  text-center">_x000D_
    <h3>iFrame</h3>_x000D_
    <p>IFrames are hard to deal with it? We don't think so!</p>_x000D_
    <i class="glyphicon glyphicon-screenshot fa-5x pointer" title="Try me!"></i>_x000D_
   </div>_x000D_
  </div>_x000D_
 </div>_x000D_
 <div class="col-sm-1 text-center"></div>_x000D_
</div>
_x000D_
_x000D_
_x000D_


create an empty modal box on the current page and below is the ajax call you can see how to fetch the content in result from another html page.

 $.ajax({url: "registration.html", success: function(result){
            //alert("success"+result);
              $("#contentBody").html(result);
            $("#myModal").modal('show'); 

        }});

once the call is done you will get the content of the page by the result to then you can insert the code in you modal's content id using.

You can call controller and get the page content and you can show that in your modal.

below is the example of Bootstrap 3 modal in that we are loading content from registration.html page...

index.html
------------------------------------------------
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<script type="text/javascript">
function loadme(){
    //alert("loadig");

    $.ajax({url: "registration.html", success: function(result){
        //alert("success"+result);
          $("#contentBody").html(result);
        $("#myModal").modal('show'); 

    }});
}
</script>
</head>
<body>

<!-- Trigger the modal with a button -->
<button type="button" class="btn btn-info btn-lg" onclick="loadme()">Load me</button>


<!-- Modal -->
<div id="myModal" class="modal fade" role="dialog">
  <div class="modal-dialog">

    <!-- Modal content-->
    <div class="modal-content" >
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal">&times;</button>
        <h4 class="modal-title">Modal Header</h4>
      </div>
      <div class="modal-body" id="contentBody">

      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
      </div>
    </div>

  </div>
</div>

</body>
</html>

registration.html
-------------------- 
<!DOCTYPE html>
<html>
<style>
body {font-family: Arial, Helvetica, sans-serif;}

form {
    border: 3px solid #f1f1f1;
    font-family: Arial;
}

.container {
    padding: 20px;
    background-color: #f1f1f1;
    width: 560px;
}

input[type=text], input[type=submit] {
    width: 100%;
    padding: 12px;
    margin: 8px 0;
    display: inline-block;
    border: 1px solid #ccc;
    box-sizing: border-box;
}

input[type=checkbox] {
    margin-top: 16px;
}

input[type=submit] {
    background-color: #4CAF50;
    color: white;
    border: none;
}

input[type=submit]:hover {
    opacity: 0.8;
}
</style>
<body>

<h2>CSS Newsletter</h2>

<form action="/action_page.php">
  <div class="container">
    <h2>Subscribe to our Newsletter</h2>
    <p>Lorem ipsum text about why you should subscribe to our newsletter blabla. Lorem ipsum text about why you should subscribe to our newsletter blabla.</p>
  </div>

  <div class="container" style="background-color:white">
    <input type="text" placeholder="Name" name="name" required>
    <input type="text" placeholder="Email address" name="mail" required>
    <label>
      <input type="checkbox" checked="checked" name="subscribe"> Daily Newsletter
    </label>
  </div>

  <div class="container">
    <input type="submit" value="Subscribe">
  </div>
</form>

</body>
</html>

Questions with ajax tag:

Getting all files in directory with ajax Cross-Origin Read Blocking (CORB) Jquery AJAX: No 'Access-Control-Allow-Origin' header is present on the requested resource Fetch API request timeout? How do I post form data with fetch api? Ajax LARAVEL 419 POST error Laravel 5.5 ajax call 419 (unknown status) How to allow CORS in react.js? Angular 2: How to access an HTTP response body? How to post a file from a form with Axios console.log(result) returns [object Object]. How do I get result.name? $http.get(...).success is not a function What is difference between Axios and Fetch? Make XmlHttpRequest POST using JSON React Js: Uncaught (in promise) SyntaxError: Unexpected token < in JSON at position 0 Response to preflight request doesn't pass access control check How can I send an Ajax Request on button click from a form with 2 buttons? API Gateway CORS: no 'Access-Control-Allow-Origin' header Download pdf file using jquery ajax Getting request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource AngularJS POST Fails: Response for preflight has invalid HTTP status code 404 Why my $.ajax showing "preflight is invalid redirect error"? "Mixed content blocked" when running an HTTP AJAX operation in an HTTPS page Jquery in React is not defined Laravel csrf token mismatch for ajax POST Request How to write data to a JSON file using Javascript loading json data from local file into React JS Load More Posts Ajax Button in WordPress jQuery ajax request being block because Cross-Origin CORS header 'Access-Control-Allow-Origin' missing How do I cancel an HTTP fetch() request? Send form data with jquery ajax json How to refresh table contents in div using jquery/ajax Ajax post request in laravel 5 return error 500 (Internal Server Error) React JS - Uncaught TypeError: this.props.data.map is not a function Uncaught TypeError: Cannot read property 'appendChild' of null Required request body content is missing: org.springframework.web.method.HandlerMethod$HandlerMethodParameter No 'Access-Control-Allow-Origin' header is present on the requested resource error Synchronous XMLHttpRequest warning and <script> React.js create loop through Array Reinitialize Slick js after successful ajax call jQuery has deprecated synchronous XMLHTTPRequest How to call a php script/function on a html button click jQuery Refresh/Reload Page if Ajax Success after time Solve Cross Origin Resource Sharing with Flask Stupid error: Failed to load resource: net::ERR_CACHE_MISS SyntaxError: JSON.parse: unexpected character at line 1 column 1 of the JSON data Windows.history.back() + location.reload() jquery AJAX jQuery refresh div every 5 seconds Dynamically add item to jQuery Select2 control that uses AJAX

Questions with twitter-bootstrap tag:

Bootstrap 4: responsive sidebar menu to top navbar CSS class for pointer cursor How to install popper.js with Bootstrap 4? Change arrow colors in Bootstraps carousel Search input with an icon Bootstrap 4 bootstrap 4 responsive utilities visible / hidden xs sm lg not working bootstrap.min.js:6 Uncaught Error: Bootstrap dropdown require Popper.js Bootstrap 4 - Inline List? Bootstrap 4, how to make a col have a height of 100%? Bootstrap 4: Multilevel Dropdown Inside Navigation Align the form to the center in Bootstrap 4 Customize Bootstrap checkboxes Angular 4: How to include Bootstrap? bootstrap 4 row height Bootstrap 4 File Input How can I center an image in Bootstrap? Bootstrap 4 Change Hamburger Toggler Color How can I make Bootstrap 4 columns all the same height? Center the content inside a column in Bootstrap 4 col align right How to hide collapsible Bootstrap 4 navbar on click Bootstrap 4 Center Vertical and Horizontal Alignment Vertical Align Center in Bootstrap 4 How to implement a Navbar Dropdown Hover in Bootstrap v4? `col-xs-*` not working in Bootstrap 4 Using media breakpoints in Bootstrap 4-alpha Bootstrap 4, How do I center-align a button? What is class="mb-0" in Bootstrap 4? Bootstrap 4 align navbar items to the right Bootstrap fullscreen layout with 100% height Bootstrap 4 img-circle class not working Bootstrap footer at the bottom of the page How to create a fixed sidebar layout with Bootstrap 4? How to include bootstrap css and js in reactjs app? Bootstrap date time picker How to change the bootstrap primary color? What is the '.well' equivalent class in Bootstrap 4 Bootstrap col-md-offset-* not working $(...).datepicker is not a function - JQuery - Bootstrap Failed to load resource 404 (Not Found) - file location error? Table column sizing How to add bootstrap to an angular-cli project How to get images in Bootstrap's card to be the same height/width? Stretch image to fit full container width bootstrap Bootstrap 4 card-deck with number of columns based on viewport Removing padding gutter from grid columns in Bootstrap 4 How to use Bootstrap in an Angular project? How to put a link on a button with bootstrap? Bootstrap get div to align in the center How to make Bootstrap 4 cards the same height in card-columns?

Questions with twitter-bootstrap-3 tag:

bootstrap 4 responsive utilities visible / hidden xs sm lg not working How to change the bootstrap primary color? What is the '.well' equivalent class in Bootstrap 4 How to use Bootstrap in an Angular project? Bootstrap get div to align in the center Jquery to open Bootstrap v3 modal of remote url How to increase Bootstrap Modal Width? Bootstrap datetimepicker is not a function How can I increase the size of a bootstrap button? Bootstrap : TypeError: $(...).modal is not a function Using a Glyphicon as an LI bullet point (Bootstrap 3) React Js conditionally applying class attributes twitter bootstrap text-center when in xs mode Disable a link in Bootstrap How to change the button color when it is active using bootstrap? How to change Bootstrap's global default font size? How to change btn color in Bootstrap Bootstrap Navbar toggle button not working Display two fields side by side in a Bootstrap Form Choosing bootstrap vs material design Bootstrap collapse animation not smooth Bootstrap 3 Horizontal Divider (not in a dropdown) Bootstrap 3 - Responsive mp4-video Change hover color on a button with Bootstrap customization Make Bootstrap 3 Tabs Responsive Bootstrap how to get text to vertical align in a div container Bootstrap 3, 4 and 5 .container-fluid with grid adding unwanted padding How to set the size of a column in a Bootstrap responsive table How to show Bootstrap table with sort icon Alternating Row Colors in Bootstrap 3 - No Table Avoid dropdown menu close on click inside Background image jumps when address bar hides iOS/Android/Mobile Chrome Shrinking navigation bar when scrolling down (bootstrap3) Put search icon near textbox using bootstrap Bootstrap 3 Align Text To Bottom of Div Bootstrap navbar Active State not working How to make Bootstrap Panel body with fixed height In Bootstrap 3,How to change the distance between rows in vertical? Meaning of numbers in "col-md-4"," col-xs-1", "col-lg-2" in Bootstrap Creating Accordion Table with Bootstrap Change bootstrap navbar background color and font color How to create a 100% screen width div inside a container in bootstrap? Bootstrap 3 modal responsive Bootstrap full responsive navbar with logo or brand name text Bootstrap 3 dropdown select bootstrap 3 wrap text content within div for horizontal alignment Bootstrap 3 - disable navbar collapse Bootstrap 3 truncate long text inside rows of a table in a responsive way Centering brand logo in Bootstrap Navbar Bootstrap row class contains margin-left and margin-right which creates problems Read input from a JOptionPane.showInputDialog box Disable click outside of angular material dialog area to close the dialog (With Angular Version 4.0+) How can I display a modal dialog in Redux that performs asynchronous actions? Angular 2.0 and Modal Dialog How to use Bootstrap modal using the anchor tag for Register? Bootstrap modal opening on page load Trying to make bootstrap modal wider How to present a modal atop the current view in Swift Send parameter to Bootstrap modal window? Set bootstrap modal body height by percentage Bootstrap Modal before form Submit Disable click outside of bootstrap modal area to close modal Bootstrap Modal sitting behind backdrop Display Bootstrap Modal using javascript onClick Bootstrap 3 - How to load content in modal body via AJAX? Closing Bootstrap modal onclick Bootstrap: Open Another Modal in Modal How to check if bootstrap modal is open, so I can use jquery validate? Multiple modals overlay bootstrap jquery show.bs.modal event won't fire How to prevent background scrolling when Bootstrap 3 modal open on mobile browsers? Auto-click button element on page load using jQuery Bootstrap 3 modal vertical position center Bootstrap 3 with remote Modal Calling a function on bootstrap modal open Close Bootstrap Modal Invoking modal window in AngularJS Bootstrap UI using JavaScript Twitter Bootstrap Modal Form Submit Prevent Bootstrap Modal from disappearing when clicking outside or pressing escape? Bootstrap modal not displaying Open Bootstrap Modal from code-behind Load content with ajax in bootstrap modal How to add an event after close the modal window? How to deal with ModalDialog using selenium webdriver? Bootstrap Modal immediately disappearing how to destroy bootstrap modal window completely? make bootstrap twitter dialog modal draggable How to hide Bootstrap previous modal when you opening new one? How to handle the modal closing event in Twitter Bootstrap? Twitter bootstrap remote modal shows same content every time How to set the focus for a particular field in a Bootstrap modal, once it appears Twitter Bootstrap: Print content of modal window Twitter bootstrap modal-backdrop doesn't disappear Using Bootstrap Modal window as PartialView jQuery dialog popup Bootstrap modal appearing under background Can not get a simple bootstrap modal to work How to get twitter bootstrap modal to close (after initial launch) How to hide Bootstrap modal with javascript? How to pass values arguments to modal.show() function in Bootstrap