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:

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:

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:

$.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});
       }
    }
});