CODEWITHSUNDEEP
jquerytwitter-bootstrapmodal-dialog
macmiller
macmiller

Reputation: 324

bootstrap jquery load sequence

I have this line of code in a page to trigger a modal:

<?php if($modal_show){?>
<script>$('#modalContactForm').modal('show');</script>
<?php } ?>

the loads of jQuery etc are at the end of the script before the , as is the recommended method. For testing $modal_show is set to true upon page load. If I move the loads up to the top the modal is shown as anticipated, but when they are at the end it is not shown. I have read other solutions, using a javascript window onload or using defer statement. Can someone show me the actual code I need to put in there to keep the loads at the end and have the script trigger the modal.

Upvotes: 0

Views: 240

Answers (1)

jerome
jerome

Reputation: 715

You need to load the jquery/bootstrap-jquery library first then your script in order for your script to work.

You can use $(document).ready()

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
 <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> //LOAD THE LIBRARY FIRST
 <script> //THEN YOUR SCRIPT
 $(document).ready(function(){
       $('#modalContactForm').modal('show');
 }); // TRIGGERS UPON THE PAGE IS COMPLETELY LOADED
 </script>

Or the shorthand

 <script>
 $(function() {
    $('#modalContactForm').modal('show');
 });
 </script>

Upvotes: 1

Related Questions