CODEWITHSUNDEEP
javascriptjquerytwitter-bootstrapbootstrap-modal
Rajan
Rajan

Reputation: 2425

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

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

Upvotes: 1

Views: 19770

Answers (2)

Rory McCrossan
Rory McCrossan

Reputation: 337610

Note that although you include jQuery and jQueryUI, you then add another two versions of jQuery after jQueryUI (4 in total) which then supercedes the jQueryUI methods. You only need a single reference to jQuery, so remove those extra ones. Try this:

<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="//code.jquery.com/ui/1.11.4/jquery-ui.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>

Also note that both jQueryUI and Bootstrap have methods named modal() and could be conflicting with each other. I would strongly recommend you use only one of those libraries. Personally I would suggest Bootstrap over jQueryUI.

Upvotes: 2

rick
rick

Reputation: 1895

If you import bootstrap.min.js correctly you don't need jquery-ui.

In this fiddle you can found a functionin version of your modal with only bootsrap dependencies

Upvotes: 2

Related Questions