TypeError: $ (…) .modal bukan fungsi dengan Modal bootstrap

Saya memiliki modal bootstrap 2.32 yang saya coba masukkan secara dinamis ke HTML tampilan lain. Saya bekerja dengan Codeigniter 2.1. Mengikuti secara dinamis memasukkan tampilan parsial modal bootstrap ke dalam tampilan , saya punya:

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

sebagai div target untuk penyisipan. Saya memiliki tombol dalam tampilan saya yang terlihat seperti:

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

JS saya memiliki:

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

Tombol tampilan utama adalah:

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

Inilah yang ingin saya simpan secara terpisah sebagai tampilan parsial:

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

Ketika saya mengklik tombol, modal dimasukkan dengan benar, tetapi saya mendapatkan kesalahan berikut:

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

Bagaimana cara memperbaikinya?

saya hanya ingin menekankan apa yang dikatakan mwebber di komentar:

periksa juga apakah jQuery tidak disertakan dua kali

:)

itu masalah bagi saya

Kesalahan ini sebenarnya karena Anda tidak memasukkan javascript bootstrap sebelum memanggil modalfungsi tersebut. Modal didefinisikan di bootstrap.js bukan jQuery. Penting juga untuk dicatat bahwa bootstrap sebenarnya membutuhkan jQuery untuk menentukan modalfungsinya, jadi penting bagi Anda untuk menyertakan jQuery sebelum memasukkan javascript bootstrap. Untuk menghindari kesalahan, pastikan untuk menyertakan jQuery lalu javascript bootstrap sebelum Anda memanggil modalfungsinya. Saya biasanya melakukan hal berikut di tag header saya:

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

Setelah menghubungkan jquery dan bootstrap Anda, tulis kode Anda tepat di bawah tag Script jquery dan 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>

Periksa bahwa jqueryperpustakaan tidak termasuk dalam html yang dimuat melalui Ajax.remove <script src="~/Scripts/jquery[ver].js"></script>di fileAjaxUpdate/get_modal

Kemungkinan lain adalah bahwa salah satu skrip lain yang Anda sertakan menyebabkan masalah dengan juga menyertakan JQuery atau berkonflik dengan $. Coba hapus skrip lain yang disertakan dan lihat apakah itu memperbaiki masalah. Dalam kasus saya, setelah berjam-jam mencari satu kode saya tanpa perlu, saya menghapus skrip dalam pola pencarian biner dan langsung menemukan skrip yang menyinggung.

Saya telah menyelesaikan masalah ini dalam bereaksi dengan menggunakannya seperti ini.

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

Lari

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

dalam proyek untuk menambahkan jenis jquery di Proyek Angular Anda. Setelah itu masukkan

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

di app.module.ts Anda

Menambahkan

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

di index.html Anda tepat sebelum tag penutup badan.

Dan jika Anda menjalankan Angular 2-7, sertakan "jquery" di kolom jenis file tsconfig.app.json.

Ini akan menghapus semua kesalahan 'modal' dan '$' dalam proyek Angular Anda.

Menurut pengalaman saya, kemungkinan besar itu terjadi dengan konflik versi jquery (menggunakan beberapa versi), untuk menyelesaikan masalah kita dapat menggunakan metode tanpa konflik seperti di bawah ini.

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

Saya menyelesaikan masalah ini di Laravel dengan memodifikasi baris di bawah ini resources\assets\js\bootstrap.js

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

untuk

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

Dalam kasus saya, saya menggunakan framework rel dan memerlukan jQuery dua kali. Saya pikir itu adalah alasan yang mungkin.

Anda dapat memeriksa file app / assets / application.js terlebih dahulu. Jika jquery dan bootstrap-sprockets muncul, maka tidak diperlukan library kedua. File tersebut harus seperti ini:

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

Kemudian periksa app / views / layouts / application.html.erb, dan hapus skrip karena membutuhkan jquery. Sebagai contoh:

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

Saya pikir terkadang ketika pemula menggunakan beberapa contoh kode tutorial akan menyebabkan masalah ini.

Bagi saya, saya punya //= require jquerysetelah //= require bootstrap. Setelah saya memindahkan jquery sebelum bootstrap, semuanya berfungsi.

Saya memiliki masalah yang sama. Berubah

$.ajax(...)

untuk

jQuery.ajax(...)

tidak bekerja. Tetapi kemudian saya menemukan bahwa jQuery disertakan dua kali dan menghapus salah satunya memperbaiki masalah.

Jawaban lain tidak berfungsi untuk saya di aplikasi react.js saya, jadi saya telah menggunakan JavaScript biasa untuk ini.

Solusi di bawah ini berhasil:

1. Berikan id untuk menutup bagian dari modal / dialog ("myModalClose" pada contoh di bawah)

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

2. Hasilkan peristiwa klik ke tombol tutup di atas, menggunakan id itu:

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

Mungkin Anda bisa menghasilkan klik yang sama pada tombol tutup, menggunakan jQuery juga.

Semoga membantu.

Saya kira Anda harus menggunakan tombol Anda

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

alih-alih href harus ada target data

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

pastikan saja, bahwa konten modal sudah dimuat

Saya pikir masalahnya adalah, menunjukkan modal dipanggil dua kali, satu dalam panggilan ajax, itu berfungsi dengan baik, Anda mengatakan modal ditampilkan dengan benar, tetapi kesalahan mungkin datang dengan tindakan init pada tombol itu, yang seharusnya menangani modal, tindakan ini tidak dapat dijalankan, karena modal tidak dimuat pada saat itu.