TypeError: $ (…) .modal no es una función con bootstrap Modal

Tengo un modal de bootstrap 2.32 que estoy tratando de insertar dinámicamente en el HTML de otra vista. Estoy trabajando con Codeigniter 2.1. Después de insertar dinámicamente una vista parcial modal de arranque en una vista , tengo:

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

como div de destino para la inserción. Tengo un botón en mi vista que se parece a:

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

Mi JS tiene:

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

El botón de la vista principal es:

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

Esto es lo que me gustaría almacenar por separado como una vista 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>

Cuando hago clic en el botón, el modal se inserta correctamente, pero aparece el siguiente error:

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

¿Cómo puedo arreglar esto?

Solo quiero enfatizar lo que dijo mwebber en el comentario:

también verifique si jQuery no se incluye dos veces

:)

fue el problema para mi

Este error es en realidad el resultado de que no incluyó el javascript de bootstrap antes de llamar a la modalfunción. Modal se define en bootstrap.js, no en jQuery. También es importante tener en cuenta que bootstrap realmente necesita jQuery para definir la modalfunción, por lo que es vital que incluya jQuery antes de incluir el javascript de bootstrap. Para evitar el error, asegúrese de incluir jQuery y luego el javascript de bootstrap antes de llamar almodal función. Normalmente hago lo siguiente en mi etiqueta de encabezado:

<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>

Después de vincular su jquery y bootstrap, escriba su código justo debajo de las etiquetas de script de jquery y 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 esa jquerybiblioteca no incluida en html que se carga a través de Ajax.remove <script src="~/Scripts/jquery[ver].js"></script>en suAjaxUpdate/get_modal

Otra posibilidad es que uno de los otros scripts que incluye esté causando el problema al incluir también JQuery o entrar en conflicto con $. Intente eliminar sus otros scripts incluidos y vea si soluciona el problema. En mi caso, después de horas de buscar innecesariamente mi único código, eliminé los scripts en un patrón de búsqueda binaria y descubrí el script ofensivo de inmediato.

He resuelto este problema en reaccionar usándolo así.

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

correr

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

en el proyecto para agregar los tipos de jquery en su Proyecto Angular. Después de eso incluye

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

en su app.module.ts

Añadir

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

en su index.html justo antes de la etiqueta de cierre del cuerpo.

Y si está ejecutando Angular 2-7, incluya "jquery" en el campo de tipos del archivo tsconfig.app.json.

Esto eliminará todos los errores de 'modal' y '$' en su proyecto Angular.

En mi experiencia, lo más probable es que haya sucedido con los conflictos de la versión jquery (usando múltiples versiones), para solucionar el problema, podemos usar un método sin conflictos como el siguiente.

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

Resolví este problema en Laravel modificando la línea a continuación en resources\assets\js\bootstrap.js

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

a

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

En mi caso, uso el framework rails y requiero jQuery dos veces. Creo que esa es una posible razón.

Primero puede verificar el archivo app / assets / application.js. Si aparecen jquery y bootstrap-sprockets, entonces no es necesario que se requiera una segunda biblioteca. El archivo debería ser similar a esto:

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

Luego verifique app / views / layouts / application.html.erb y elimine el script para requerir jquery. Por ejemplo:

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

Creo que a veces, cuando los novatos usan varios ejemplos de código de tutorial, esto causa este problema.

Para mí, tuve //= require jquerydespués //= require bootstrap. Una vez que moví jquery antes de bootstrap, todo funcionó.

Tuve el mismo problema. Cambiando

$.ajax(...)

a

jQuery.ajax(...)

no funcionó. Pero luego descubrí que jQuery se incluyó dos veces y eliminar uno de ellos solucionó el problema.

Otras respuestas no me funcionan en mi aplicación react.js, por lo que he usado JavaScript simple para esto.

La siguiente solución funcionó:

1. Dar una identificación para la parte cercana del modal / diálogo ("myModalClose" en el siguiente ejemplo)

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

2. Genere un evento de clic en el botón de cierre anterior, usando esa identificación:

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

Posiblemente podría generar el mismo clic en el botón de cierre, usando jQuery también.

Espero que ayude.

Supongo que deberías usar en tu botón

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

en lugar de href debería haber data-target

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

solo asegúrate de que el contenido modal ya esté cargado

Creo que el problema es que mostrar modal se llama dos veces, una en la llamada ajax, que funciona bien, dijiste que modal se muestra correctamente, pero el error probablemente viene con la acción init en ese botón, que debería manejar modal, esta acción no se puede ejecutar, porque modal no está cargado en ese momento.