user3495363 user3495363 - 4 months ago 32
Ajax Question

load ajax page with bootstrap modal in it, and auto launch that modal, all at once

I am trying to make a button on my main page to call a modal from another page.

and I need this modal to be launched automatically after it is loaded.

I didn't find anything about it. (Or did I miss it?!)

my code:

I'm calling this js function:

<script>
function startb(plc)
{
$.ajax({
url: "gb.php?plc="+plc
}).done(function( data ) {
$("#large-div").html(data);
});

//the id of the modal in the gb.php code is: "inside-modal"
$('#inside-modal').modal('show');

}
</script>

<body>

<div id="large-div" name="large-div">

</div>

<button onclick="startb('28')">start plc</button>



</body>

Answer

You need to place the $().modal() function call within the callback function of the ajax request

AJAX, by definition is asynchronous, so the

.modal()
call happens before the div is actually populated with your new HTML content.

Solution:

$.ajax({
        url: "gb.php?plc="+plc
      }).done(function( data ) {
        $("#large-div").html(data);
        $('#inside-modal').modal('show');
      });   

Hope it helps

Edit:

@ Dimitris Nastos, did not see your comment - exactly the same as this answer. Will upvote comment.