TypeError: $ (…) .modal non è una funzione con bootstrap Modal

Ho un modale bootstrap 2.32 che sto cercando di inserire dinamicamente nell'HTML di un'altra vista. Sto lavorando con Codeigniter 2.1. Dopo aver inserito dinamicamente una vista parziale modale bootstrap in una vista , ho:

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

come div di destinazione per l'inserimento. Ho un pulsante nella mia vista che assomiglia a:

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

Il mio JS ha:

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

Il pulsante della vista principale è:

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

Ecco cosa vorrei memorizzare separatamente come visualizzazione parziale:

<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 faccio clic sul pulsante, il modale è inserito correttamente, ma ottengo il seguente errore:

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

Come posso risolvere questo problema?

Voglio solo sottolineare ciò che ha detto mwebber nel commento:

controlla anche se jQuery non è incluso due volte

:)

era il problema per me

Questo errore è in realtà il risultato della mancata inclusione del javascript di bootstrap prima di chiamare la modalfunzione. Modal è definito in bootstrap.js non jQuery. È anche importante notare che bootstrap ha effettivamente bisogno di jQuery per definire la modalfunzione, quindi è fondamentale includere jQuery prima di includere javascript di bootstrap. Per evitare l'errore, assicurati di includere jQuery quindi il javascript di bootstrap prima di chiamare la modalfunzione. Di solito faccio quanto segue nel mio tag di intestazione:

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

Dopo aver collegato jquery e bootstrap scrivi il tuo codice appena sotto i tag Script di 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>

Controlla quella jquerylibreria non inclusa in html che si carica tramite Ajax.remove <script src="~/Scripts/jquery[ver].js"></script>nel tuo fileAjaxUpdate/get_modal

Un'altra possibilità è che uno degli altri script che includi stia causando il problema includendo anche JQuery o in conflitto con $. Prova a rimuovere gli altri script inclusi e vedi se risolve il problema. Nel mio caso, dopo ore di inutili ricerche nel mio unico codice, ho rimosso gli script in un modello di ricerca binario e ho scoperto subito lo script offensivo.

Ho risolto questo problema in React usandolo in questo modo.

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

Correre

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

nel progetto per aggiungere i tipi di jquery nel tuo progetto angolare. Dopo di che includi

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

nella tua app.module.ts

Inserisci

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

nel tuo index.html appena prima del tag di chiusura del corpo.

E se stai eseguendo Angular 2-7 includi "jquery" nel campo dei tipi del file tsconfig.app.json.

Questo rimuoverà tutti gli errori di "modal" e "$" nel tuo progetto Angular.

Nella mia esperienza, molto probabilmente è successo con conflitti di versione jquery (utilizzando più versioni), per risolvere il problema possiamo utilizzare un metodo senza conflitti come di seguito.

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

Ho risolto questo problema in Laravel modificando la riga sottostante in resources\assets\js\bootstrap.js

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

per

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

Nel mio caso, utilizzo il framework rails e richiedo due volte jQuery. Penso che sia una possibile ragione.

Puoi prima controllare il file app / assets / application.js. Se vengono visualizzati jquery e bootstrap-sprockets, non è necessario richiedere una seconda libreria. Il file dovrebbe essere simile a questo:

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

Quindi controlla app / views / layouts / application.html.erb e rimuovi lo script per richiedere jquery. Per esempio:

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

Penso che a volte quando i principianti utilizzano più esempi di codice tutorial causerà questo problema.

Per me, ho avuto //= require jquerydopo //= require bootstrap. Una volta spostato jquery prima del bootstrap, tutto ha funzionato.

Ho avuto lo stesso problema. Mutevole

$.ajax(...)

per

jQuery.ajax(...)

non ha funzionato. Ma poi ho scoperto che jQuery è stato incluso due volte e la rimozione di uno di essi ha risolto il problema.

Altre risposte non funzionano per me nella mia applicazione react.js, quindi ho usato JavaScript semplice per questo.

La soluzione sotto ha funzionato:

1. Fornisci un ID per chiudere la parte della finestra di dialogo / modale ("myModalClose" nell'esempio sotto)

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

2. Genera un evento clic sul pulsante di chiusura sopra, utilizzando quell'ID:

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

Forse potresti generare lo stesso clic sul pulsante di chiusura, usando anche jQuery.

Spero che aiuti.

Immagino che dovresti usare nel tuo pulsante

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

invece di href dovrebbe esserci data-target

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

assicurati solo che il contenuto modale sia già caricato

Penso che il problema sia che mostrare modal viene chiamato due volte, uno in una chiamata ajax, che funziona bene, hai detto che modal è mostrato correttamente, ma l'errore probabilmente arriva con l'azione init su quel pulsante, che dovrebbe gestire modal, questa azione non può essere eseguita, perché modale non è caricato in quel momento.