TypeError: $ (…) .modal não é uma função com bootstrap Modal

Eu tenho um modal bootstrap 2.32 que estou tentando inserir dinamicamente no HTML de outro modo de exibição. Estou trabalhando com Codeigniter 2.1. Depois de inserir dinamicamente uma visualização parcial modal de bootstrap em uma visualização , eu tenho:

<div id="modal_target"></div>

como o div de destino para inserção. Tenho um botão em minha visualização que se parece com:

     <a href="#message" class="btn btn-large btn-info" data-action="Message" data-toggle="tab">Message</a>

Meu JS tem:

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

O botão da visualização principal é:

<div id="thanks"><p><a data-toggle="modal" href="#form-content" class="btn btn-primary btn-large">Modal powers, activate!</a></p></div>

Aqui está o que eu gostaria de armazenar separadamente como uma visualização parcial:

<div id="form-content" class="modal hide fade in" style="display: none;">
    <div class="modal-header">
        <a class="close" data-dismiss="modal">×</a>
        <h3>Send me a message</h3>
    </div>
    <div class="modal-body">
        <form class="contact" name="contact">
             <fieldset>

               <!-- Form Name -->

            <legend>modalForm</legend>

            <!-- Text input-->
            <div class="control-group">
              <label class="control-label" for="user">User</label>
              <div class="controls">
                <input id="user" name="user" type="text" placeholder="User" class="input-xlarge" required="">
                <p class="help-block">help</p>
              </div>
            </div>

            <!-- Text input-->
            <div class="control-group">
              <label class="control-label" for="old">Old password</label>
              <div class="controls">
                <input id="old" name="old" type="text" placeholder="placeholder" class="input-xlarge">
                <p class="help-block">help</p>
              </div>
            </div>

            <!-- Text input-->
            <div class="control-group">
              <label class="control-label" for="new">New password</label>
              <div class="controls">
                <input id="new" name="new" type="text" placeholder="placeholder" class="input-xlarge">
                <p class="help-block">help</p>
              </div>
            </div>

            <!-- Text input-->
            <div class="control-group">
              <label class="control-label" for="repeat">Repeat new password</label>
              <div class="controls">
                <input id="repeat" name="repeat" type="text" placeholder="placeholder" class="input-xlarge">
                <p class="help-block">help</p>
              </div>
            </div>



                </fieldset>
        </form>
    </div>


    <div class="modal-footer">
        <input class="btn btn-success" type="submit" value="Send!" id="submit">
        <a href="#" class="btn" data-dismiss="modal">Nah.</a>
    </div>
</div>

Quando clico no botão, o modal é inserido corretamente, mas recebo o seguinte erro:

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

Como posso consertar isso?

eu só quero enfatizar o que mwebber disse no comentário:

também verifique se jQuery não está incluído duas vezes

:)

foi o problema para mim

Este erro é realmente o resultado de você não incluir o javascript do bootstrap antes de chamar a modalfunção. Modal é definido em bootstrap.js, não em jQuery. Também é importante notar que o bootstrap realmente precisa do jQuery para definir a modalfunção, portanto, é vital que você inclua o jQuery antes de incluir o javascript do bootstrap. Para evitar o erro, certifique-se de incluir o jQuery e o javascript do bootstrap antes de chamar a modalfunção. Normalmente faço o seguinte na minha tag de cabeçalho:

<header>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    <script src="/path/to/bootstrap/js/bootstrap.min.js"></script>
</header>

Depois de vincular seu jquery e bootstrap, escreva seu código logo abaixo das tags Script de jquery e bootstrap.

$(document).ready(function($) {
  $("#div").on("click", "a", function(event) {
    event.preventDefault();
    jQuery.noConflict();
    $('#myModal').modal('show');

  });
});

<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

<!-- Latest compiled JavaScript -->
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

Verifique se a jquerybiblioteca não incluída no html que carrega via Ajax.remove <script src="~/Scripts/jquery[ver].js"></script>noAjaxUpdate/get_modal

Outra possibilidade é que um dos outros scripts incluídos por você esteja causando o problema por também incluir JQuery ou entrar em conflito com $. Tente remover os outros scripts incluídos e veja se isso corrige o problema. No meu caso, depois de horas de pesquisa desnecessária em meu único código, removi scripts em um padrão de pesquisa binária e descobri o script ofensivo imediatamente.

Resolvi esse problema em reagir usando-o assim.

window.$('#modal-id').modal();

Corre

npm i @types/jquery
npm install -D @types/bootstrap

no projeto para adicionar os tipos jquery em seu projeto Angular. Depois disso, inclua

import * as $ from "jquery";
import * as bootstrap from "bootstrap";

em seu app.module.ts

Adicionar

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>

em seu index.html logo antes da tag de fechamento do corpo.

E se você estiver executando o Angular 2-7, inclua "jquery" no campo de tipos do arquivo tsconfig.app.json.

Isso removerá todos os erros de 'modal' e '$' em seu projeto Angular.

Na minha experiência, provavelmente isso aconteceu com conflitos de versão do jquery (usando várias versões), para resolver o problema, podemos usar um método sem conflito como abaixo.

jQuery.noConflict();
(function( $ ) {
  $(function() {
    // More code using $ as alias to jQuery
    $('button').click(function(){
        $('#modalID').modal('show');
    });
  });
})(jQuery);

Resolvi esse problema no Laravel modificando a linha abaixo em resources\assets\js\bootstrap.js

window.$ = window.jQuery = require('jquery/dist/jquery.slim');

para

window.$ = window.jQuery = require('jquery/dist/jquery');

No meu caso, eu uso o framework Rails e exijo o jQuery duas vezes. Acho que é uma razão possível.

Você pode primeiro verificar o arquivo app / assets / application.js. Se jquery e bootstrap-sprockets forem exibidos, não há necessidade de uma segunda biblioteca. O arquivo deve ser semelhante a este:

//= require jquery
//= require jquery_ujs
//= require turbolinks
//= require bootstrap-sprockets
//= require_tree .

Em seguida, verifique app / views / layouts / application.html.erb e remova o script para exigir jquery. Por exemplo:

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>

Acho que às vezes, quando os novatos usam vários exemplos de código do tutorial, isso pode causar esse problema.

Para mim, eu tinha //= require jquerydepois //= require bootstrap. Depois que movi o jquery antes do bootstrap, tudo funcionou.

Eu tive o mesmo problema. Mudando

$.ajax(...)

para

jQuery.ajax(...)

não funcionou. Mas então descobri que o jQuery foi incluído duas vezes e a remoção de um deles resolveu o problema.

Outras respostas não funcionam para mim em meu aplicativo react.js, então usei JavaScript simples para isso.

A solução abaixo funcionou:

1. Forneça um id para fechar parte do modal / diálogo ("myModalClose" no exemplo abaixo)

<span>
   className="close cursor-pointer"
   data-dismiss="modal"
   aria-label="Close"
                     id="myModalClose"
>
...

2. Gere um evento de clique para o botão fechar acima, usando esse id:

   document.getElementById("myModalClose").click();

Possivelmente você pode gerar o mesmo clique no botão Fechar, usando também o jQuery.

Espero que ajude.

Eu acho que você deveria usar no seu botão

<a data-toggle="modal" href="#form-content"    

em vez de href deve haver data-target

<a data-toggle="modal" data-target="#form-content"    

apenas certifique-se de que o conteúdo modal já está carregado

Acho que o problema é que mostrar modal é chamado duas vezes, uma na chamada ajax, funciona bem, você disse que o modal é mostrado corretamente, mas o erro provavelmente vem com a ação init nesse botão, que deve lidar com modal, essa ação não pode ser executada, porque modal não está carregado naquele momento.