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

Question

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 1

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.

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

Question

1 answers

solution1
2 ACCPTED 2016-08-05 08:31:23

Edit:

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

Question

1 answers

solution1 2 ACCPTED 2016-08-05 08:31:23

Edit:

solution1
2 ACCPTED 2016-08-05 08:31:23