Advertisement
Advertisement


Bootstrap modal: is not a function


Question

I have a modal in my page. When I try to call it when the windows load, it prints an error to the console that says :

$(...).modal is not a function

This is my Modal HTML :

<div class="modal fade" id="prizePopup" 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">
                This Modal title
            </h4>
        </div>
        <div class="modal-body">
            Add some text here
        </div>
        <div class="modal-footer">
            <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
            <button type="button" class="btn btn-primary">
                Submit changes
            </button>
        </div>
    </div>
</div>

<script type="text/javascript" src="js/bootstrap.js"></script>
<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>

And this is my JavaScript to run it with when a window is loaded :

<script type="text/javascript">
$(window).load(function() {
    $('#prizePopup').modal('show');
});
</script>

How can I fix this problem?

2016/06/05
1
111
6/5/2016 1:05:49 AM

Accepted Answer

You have an issue in scripts order. Load them in this order:

<!-- jQuery -->
<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<!-- BS JavaScript -->
<script type="text/javascript" src="js/bootstrap.js"></script>
<!-- Have fun using Bootstrap JS -->
<script type="text/javascript">
$(window).load(function() {
    $('#prizePopup').modal('show');
});
</script>

Why this? Because Bootstrap JS depends on jQuery:

Plugin dependencies

Some plugins and CSS components depend on other plugins. If you include plugins individually, make sure to check for these dependencies in the docs. Also note that all plugins depend on jQuery (this means jQuery must be included before the plugin files).

2014/09/10
171
9/10/2014 5:37:00 AM


The problem is due to having jQuery instances more than one time. Take care if you are using many files with multiples instance of jQuery. Just leave 1 instance of jQuery and your code will work.

<script type="text/javascript" src="https://code.jquery.com/jquery-2.1.4.min.js"></script>

jQuery should be the first:

<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<script type="text/javascript" src="js/bootstrap.js"></script>
2014/09/10

Causes for TypeError: $(…).modal is not a function:

  1. Scripts are loaded in the wrong order.
  2. Multiple jQuery instances

Solutions:

  1. In case, if a script attempt to access an element that hasn't been reached yet then you will get an error. Bootstrap depends on jQuery, so jQuery must be referenced first. So, you must be called the jquery.min.js and then bootstrap.min.js and further the bootstrap Modal error is actually the result of you not including bootstrap's javascript before calling the modal function. Modal is defined in bootstrap.js and not in jQuery. So the script should be included in this manner

       <script src="//code.jquery.com/jquery-1.11.0.min.js"></script> 
       <script type="text/javascript" src="js/bootstrap.js"></script>
    
  2. In case if there are multiple instances of jQuery, the second jQuery declaration prevents bootstrap.js from working correctly. so make use of jQuery.noConflict(); before calling the modal popup

    jQuery.noConflict();
    $('#prizePopup').modal('show');
    

    jQuery event aliases like .load, .unload or .error deprecated since jQuery 1.8.

    $(window).on('load', function(){ 
          $('#prizePopup').modal('show');
    });
    

    OR try opening the modal popup directly

    $('#prizePopup').on('shown.bs.modal', function () {
          ...
    });
    

change the order of the script

Because bootstrap is a jquery plugin so it require Jquery to execute

2014/09/10

Changing import statement worked. From

import * as $ from 'jquery';

to:

declare var $ : any;
2018/12/06