Loading file and deploying bootstrap modal from Javascript

Question

I am having quite a hard time in solving this problem. Seemed so simple but it is not for me.

PAGE1: HTML

<!-- where to land the external page, but not necessary -->
<div id='feito'></div>

//Javascript calling the page:
$(document).ready(function(){ 
  $.get("page_with_modal.html", function(data) {
    $("#feito").html(data);
  });
}); 

//Javascript showing the Modal with ID doneModal:
$(document).on('ready', function(){
    $('#doneModal').modal('show');
});

PAGE2: page called from JS (page_with_modal.html):

<html>
<head>
</head>
<body>
        <div class="modal fade" id="doneModal" 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-hidden="true">&times;</button>
                <h4 class="modal-title" id="myModalLabel">Modal title</h4>
              </div>
              <div class="modal-body">
                ... MODAL TEXT
              </div>
              <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
               </div>
            </div>
          </div>
        </div>
<script src="../bootstrap/js/bootstrap.min.js"></script>
</body>
</html>

PROBLEM: From what I can understand, The page is called but the Modal is not appearing.

-I tried to put bootstrap.js at the bottom of PAGE1, JS code before or after the landing DIV. Nothing -I tried to eliminate all HTML - Body, etc tags and rename it .php (with all the correct sintax). Nothing. - PAGE2 can be called from PHP using require(). Working ok, no problem. - I didnt explore the ajax call because the final result (this is an easy/standard mockup) it's already inside and Ajax call, I am trying to make things work from the root up.

What am I doing wrong? Can somebody help me? Roberto

UPDATE 1: that call to bootstrap (<script src="../bootstrap/js/bootstrap.min.js"></script>) is not really necessary. It was part of the tests I did and slipped in the final post. — Roberto Delpiano
– Roberto Delpiano, Commented Jan 22, 2018 at 16:24

beaver · Accepted Answer · 2018-01-23 10:39:56Z

1

Simply you have to show the modal after loading and not in document ready event:

$(document).ready(function () {
    loadAjax();
});

function loadAjax() {
    $.get("page2.html", function (data) {
        $("#feito").html(data);
        // after loading open modal
        $("#doneModal").modal('show');
    });
}

answered Jan 23, 2018 at 10:39

beaver

17.8k2 gold badges43 silver badges70 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Roberto Delpiano Over a year ago

Can't get it to work. I made a JSFIDDLE here with your code, no modal showing up ----- jsfiddle.net/RobDelp/7cL5jgg9

beaver Over a year ago

It can't work on jsfiddle. You have to deploy on a web server. I did and it works

Roberto Delpiano Over a year ago

Beaver, thanks for your help. I am testing on my Local Apache server, and really going crazy about something that should be so straightforward. I tried it on my server and it is working ok. How come is not working locally? Everything else works just fine!

Roberto Delpiano Over a year ago

But I have been using Ajax calls locally and they work great. I'm using it for doing a login search on a database and report data from it and no problem, how can I not open a stupid modal? I admit I am not a JS expert, quite the opposite, but there are logics behind any kind of programming that I have quite clear, or at least I hope ... Thanks anyway, you've really been helpful.

Roberto Delpiano Over a year ago

UPDATE 2: I tested your solution offline and it works ok. The culprit may be, IMHO, in the sequence in which Bootstrap CSS, JS and JQuery are laid on the page. So Jquery + BS.js + BS.css is working so far, all in the page head.

Collectives™ on Stack Overflow

Loading file and deploying bootstrap modal from Javascript

1 Answer 1

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related