Bootstrap 3 - How to load content in modal body via AJAX

Question

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

User · Answer

A simple way to use modals is with eModal!

Ex from github:

Link to eModal.js <script src="//rawgit.com/saribe/eModal/master/dist/eModal.min.js"></script>

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_

$(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_

User · Answer

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       lt div class  modal  id  ajaxModal  gt  lt div class  modal-body  gt  lt  div gt  lt  div gt                        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    lt div class  modal-dialog  gt       lt div class  modal-content  gt           lt div class  modal-header  gt               lt button type  button  class  close  data-dismiss  modal  gt  amp times  lt  button gt               lt h4 class  modal-title  gt  lt  h4 gt           lt  div gt           lt div class  modal-body  gt           lt  div gt           lt div class  modal-footer  gt               lt a href     class  btn btn-white  data-dismiss  modal  gt Close lt  a gt               lt a href     class  btn btn-primary  gt Button lt  a gt               lt a href     class  btn btn-primary  gt Another button    lt  a gt           lt  div gt       lt  div gt  lt  --   modal-content -- gt   lt  div gt  lt  --   modal-dialog -- gt

User · Answer

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

User · Answer

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  quot false quot  to disable the deprecated Bootstrap load function  JavaScript     Fill modal with content from link href    quot  myModal quot   on  quot show bs modal quot   function e        var link     e relatedTarget         this  find  quot  modal-body quot   load link attr  quot href quot          Html  based on the official example    lt  -- Link trigger modal -- gt   lt a href  quot remoteContent html quot  data-remote  quot false quot  data-toggle  quot modal quot  data-target  quot  myModal quot  class  quot btn btn-default quot  gt      Launch Modal  lt  a gt    lt  -- Default bootstrap modal example -- gt   lt div class  quot modal fade quot  id  quot myModal quot  tabindex  quot -1 quot  role  quot dialog quot  aria-labelledby  quot myModalLabel quot  aria-hidden  quot true quot  gt     lt div class  quot modal-dialog quot  gt       lt div class  quot modal-content quot  gt         lt div class  quot modal-header quot  gt           lt button type  quot button quot  class  quot close quot  data-dismiss  quot modal quot  aria-label  quot Close quot  gt  lt span aria-hidden  quot true quot  gt  amp times  lt  span gt  lt  button gt           lt h4 class  quot modal-title quot  id  quot myModalLabel quot  gt Modal title lt  h4 gt         lt  div gt         lt div class  quot modal-body quot  gt                     lt  div gt         lt div class  quot modal-footer quot  gt           lt button type  quot button quot  class  quot btn btn-default quot  data-dismiss  quot modal quot  gt Close lt  button gt           lt button type  quot button quot  class  quot btn btn-primary quot  gt Save changes lt  button gt         lt  div gt       lt  div gt     lt  div gt   lt  div gt   Try it yourself  https   jsfiddle net ednon5d1

User · Answer

Check this SO answer out   It looks like the only way is to provide the whole modal structure with your ajax response   As you can check from the bootstrap source code  the load function is binded to the root element   In case you can t modify the ajax response  a simple workaround could be an explicit call of the       modal     plugin on your body element  even though it will probably break the show hide functions of the root element

User · Answer

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 ------------------------------------------------  lt  DOCTYPE html gt   lt html gt   lt head gt     lt meta charset  utf-8  gt     lt meta name  viewport  content  width device-width  initial-scale 1  gt     lt link rel  stylesheet  href  https   maxcdn bootstrapcdn com bootstrap 3 3 7 css bootstrap min css  gt     lt script src  https   ajax googleapis com ajax libs jquery 3 3 1 jquery min js  gt  lt  script gt     lt script src  https   maxcdn bootstrapcdn com bootstrap 3 3 7 js bootstrap min js  gt  lt  script gt    lt script type  text javascript  gt  function loadme          alert  loadig           ajax  url   registration html   success  function result             alert  success  result                 contentBody   html result               myModal   modal  show                  lt  script gt   lt  head gt   lt body gt    lt  -- Trigger the modal with a button -- gt   lt button type  button  class  btn btn-info btn-lg  onclick  loadme    gt Load me lt  button gt     lt  -- Modal -- gt   lt div id  myModal  class  modal fade  role  dialog  gt     lt div class  modal-dialog  gt        lt  -- Modal content-- gt       lt div class  modal-content   gt         lt div class  modal-header  gt           lt button type  button  class  close  data-dismiss  modal  gt  amp times  lt  button gt           lt h4 class  modal-title  gt Modal Header lt  h4 gt         lt  div gt         lt div class  modal-body  id  contentBody  gt          lt  div gt         lt div class  modal-footer  gt           lt button type  button  class  btn btn-default  data-dismiss  modal  gt Close lt  button gt         lt  div gt       lt  div gt      lt  div gt   lt  div gt    lt  body gt   lt  html gt   registration html --------------------   lt  DOCTYPE html gt   lt html gt   lt style gt  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     lt  style gt   lt body gt    lt h2 gt CSS Newsletter lt  h2 gt    lt form action   action page php  gt     lt div class  container  gt       lt h2 gt Subscribe to our Newsletter lt  h2 gt       lt p gt Lorem ipsum text about why you should subscribe to our newsletter blabla  Lorem ipsum text about why you should subscribe to our newsletter blabla  lt  p gt     lt  div gt      lt div class  container  style  background-color white  gt       lt input type  text  placeholder  Name  name  name  required gt       lt input type  text  placeholder  Email address  name  mail  required gt       lt label gt         lt input type  checkbox  checked  checked  name  subscribe  gt  Daily Newsletter      lt  label gt     lt  div gt      lt div class  container  gt       lt input type  submit  value  Subscribe  gt     lt  div gt   lt  form gt    lt  body gt   lt  html gt

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

Examples related to ajax

Examples related to twitter-bootstrap

Examples related to twitter-bootstrap-3

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

Examples related to ajax

Examples related to twitter-bootstrap

Examples related to twitter-bootstrap-3

Examples related to modal-dialog