Uncaught TypeError: $(…).modal is not a function in Codeigniter

by

Hi I am trying to load bootstrap modal on page load.

I have referred this links:

Modal error – Uncaught TypeError: undefined is not a function modal

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

TypeError: $(…).modal is not a function with bootstrap Modal

So As per them I arranged my scripts as:

   <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>    
<script src="<?php echo site_url('js/bootstrap.min.js'); ?>"></script>      
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<script type="text/javascript" src="https://code.jquery.com/jquery-1.12.0.min.js"></script>
<script src="<?php echo site_url('assets/js/jquery-1.11.1.min.js');?>"></script>
<script src="<?php echo site_url('assets/js/jquery.backstretch.min.js');?>"></script>
<script src="<?php echo site_url('assets/js/retina-1.1.0.min.js');?>"></script>
<script src="<?php echo site_url('assets/js/scripts.js');?>"></script>

And My Modal code like this:

<div class="modal hide fade" id="myModal">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                <h4 class="modal-title">Subscribe our Newsletter</h4>
            </div>
            <div class="modal-body">
        <p>Subscribe to our mailing list to get the latest updates straight in your inbox.</p>
                <form>
                    <div class="form-group">
                        <input type="text" class="form-control" placeholder="Name">
                    </div>
                    <div class="form-group">
                        <input type="email" class="form-control" placeholder="Email Address">
                    </div>
                    <button type="submit" class="btn btn-primary">Subscribe</button>
                </form>
            </div>
        </div>
    </div>
</div>


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

But I am still getting the error on my modal is not being loaded. What can be the possible solution to this? How should be my scripts called in correct way

error

Console error

33 thoughts on “Uncaught TypeError: $(…).modal is not a function in Codeigniter”

Leave a Comment