Why is My Bootstrap Modal Not Working? ($(...).modal is not a function)

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

You're encountering this error while trying to dynamically insert a Bootstrap modal into your HTML and triggering it using jQuery. Let's delve into the issue:

The error indicates that the "$().modal" function is not recognised by jQuery. This typically occurs when the Bootstrap JavaScript file (bootstrap.js) is not correctly included or loaded.

To resolve this, ensure that you have properly referenced the Bootstrap JavaScript file in your HTML:

<code class="html"><script src="path/to/bootstrap.js"></script></code>

Ensure jQuery Inclusion

Another potential cause is the absence of jQuery itself. Make sure that you have included the jQuery library and it's loaded before the Bootstrap JavaScript file:

<code class="html"><script src="path/to/jquery.js"></script>
<script src="path/to/bootstrap.js"></script></code>

Check for Duplicate jQuery Inclusion

It's also worth verifying that jQuery is not being included twice in your application. Having multiple instances of jQuery can lead to conflicts and this type of error.

Code Snippet

Here's a revised version of your jQuery code that includes a proper callback function for the modal:

<code class="javascript">$.ajax({
    type    : 'POST', 
    url     : "AjaxUpdate/get_modal",
    cache   : false,
    success : function(data){ 
       if(data){
            $('#modal_target').html(data);

            //This shows the modal
            $('#form-content').modal({show: true});
       }
    }
});</code>

The above is the detailed content of Why is My Bootstrap Modal Not Working? ($(...).modal is not a function). For more information, please follow other related articles on the PHP Chinese website!