CODEWITHSUNDEEP
javascriptjqueryajaxtwitter-bootstrap
user3495363
user3495363

Reputation: 419

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>

Upvotes: 0

Views: 999

Answers (1)

Terrance00
Terrance00

Reputation: 1678

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.

Upvotes: 2

Related Questions