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

Question

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

Make sure you have included the jquery ui library. – Aditya Apr 28 '16 at 08:48 — Aditya, Apr 28 '16 at 08:48
@Aditya i have included but still its not working – Rajan Apr 28 '16 at 08:50 — Rajan, Apr 28 '16 at 08:50

Rory McCrossan · Answer 1 · 2016-04-28T09:03:06.640

2

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.

edited Apr 28 '16 at 09:03

answered Apr 28 '16 at 08:53

Rory McCrossan

331,213
40
305
339

I tried this but I am still getting that error @rory – Rajan Apr 28 '16 at 08:57
i have added an screen shot where the console shows error – Rajan Apr 28 '16 at 08:59
Is the script being loaded correctly? Are there any other errors above the one you've shown in the console? – Rory McCrossan Apr 28 '16 at 08:59
You should look at fixing those other errors first as they could be stopping script execution before jQueryUI can be loaded. – Rory McCrossan Apr 28 '16 at 09:01
i removed those from my code but still the same error and i was loading those scripts at last so maybe they were not causing problem – Rajan Apr 28 '16 at 09:05
after i removed all the scripts except the ajax and boostrap.min.js the error was gone and my screen also faded but i cant see the modal yet – Rajan Apr 28 '16 at 09:13
That's because you have the `hide` class on it. – Rory McCrossan Apr 28 '16 at 09:20

score 2 · Accepted Answer · answered Apr 28 '16 at 08:59

2

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

answered Apr 28 '16 at 08:59

rick

1,869
13
22

after i removed all the scripts except the ajax and boostrap.min.js the error was gone and my screen also faded but i cant see the modal yet – Rajan Apr 28 '16 at 09:14
Remove the hide form the class
;)
– rick Apr 28 '16 at 09:15
when i try to see the link, throw 404 not found – Cristian Budzicz Apr 12 '22 at 15:05

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

2 Answers2