Modal bootstrap: bukan sebuah fungsi

Saya memiliki modal di halaman saya. Ketika saya mencoba untuk memanggilnya ketika jendela dimuat, itu mencetak kesalahan ke konsol yang mengatakan:

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

Ini adalah Modal HTML saya:

<div class="modal fade" id="prizePopup" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
    <div class="modal-content">
        <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
                &times;
            </button>
            <h4 class="modal-title" id="myModalLabel">
                This Modal title
            </h4>
        </div>
        <div class="modal-body">
            Add some text here
        </div>
        <div class="modal-footer">
            <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
            <button type="button" class="btn btn-primary">
                Submit changes
            </button>
        </div>
    </div>
</div>

<script type="text/javascript" src="js/bootstrap.js"></script>
<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>

Dan ini adalah JavaScript saya untuk menjalankannya saat jendela dimuat:

<script type="text/javascript">
$(window).load(function() {
    $('#prizePopup').modal('show');
});
</script>

Bagaimana cara memperbaiki masalah ini?

Anda memiliki masalah dalam urutan skrip. Muat mereka dalam urutan ini:

<!-- jQuery -->
<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<!-- BS JavaScript -->
<script type="text/javascript" src="js/bootstrap.js"></script>
<!-- Have fun using Bootstrap JS -->
<script type="text/javascript">
$(window).load(function() {
    $('#prizePopup').modal('show');
});
</script>

Kenapa ini? Karena Bootstrap JS bergantung pada jQuery :

Ketergantungan plugin

Beberapa plugin dan komponen CSS bergantung pada plugin lain. Jika Anda menyertakan plugin satu per satu, pastikan untuk memeriksa dependensi ini di dokumen. Perhatikan juga bahwa semua plugin bergantung pada jQuery (ini berarti jQuery harus disertakan sebelum file plugin ).

Peringatan ini juga dapat ditampilkan jika jQuery dideklarasikan lebih dari satu kali dalam kode Anda. Deklarasi jQuery kedua mencegah bootstrap.js bekerja dengan benar.

<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<script type="text/javascript" src="js/bootstrap.js"></script>
...
<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>

Masalahnya adalah karena memiliki instance jQuery lebih dari satu kali. Berhati-hatilah jika Anda menggunakan banyak file dengan beberapa contoh jQuery. Biarkan saja 1 contoh jQuery dan kode Anda akan berfungsi.

<script type="text/javascript" src="https://code.jquery.com/jquery-2.1.4.min.js"></script>

jQuery harus menjadi yang pertama:

<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<script type="text/javascript" src="js/bootstrap.js"></script>

Penyebab TypeError: $ (…) .modal bukan fungsi:

1. Skrip dimuat dalam urutan yang salah.
2. Beberapa contoh jQuery

Solusi:

1. Dalam kasus, jika skrip mencoba mengakses elemen yang belum tercapai maka Anda akan mendapatkan kesalahan. Bootstrap bergantung pada jQuery, jadi jQuery harus direferensikan terlebih dahulu. Jadi, Anda harus dipanggil jquery.min.js dan kemudian bootstrap.min.js dan selanjutnya kesalahan Modal bootstrap sebenarnya adalah hasil dari Anda tidak memasukkan javascript bootstrap sebelum memanggil fungsi modal. Modal didefinisikan di bootstrap.js dan bukan di jQuery. Jadi skrip harus dimasukkan dengan cara ini

      <script src="//code.jquery.com/jquery-1.11.0.min.js"></script> 
      <script type="text/javascript" src="js/bootstrap.js"></script>

2. Jika ada beberapa contoh jQuery, deklarasi jQuery kedua mencegah bootstrap.js bekerja dengan benar. jadi manfaatkan jQuery.noConflict();sebelum memanggil popup modal

   jQuery.noConflict();
   $('#prizePopup').modal('show');

   alias acara jQuery suka .load, .unloadatau .errortidak digunakan lagi sejak jQuery 1.8.

   $(window).on('load', function(){ 
         $('#prizePopup').modal('show');
   });

   ATAU coba buka popup modal secara langsung

   $('#prizePopup').on('shown.bs.modal', function () {
         ...
   });

ubah urutan skrip

Karena bootstrap adalah plugin jquery sehingga membutuhkan Jquery untuk dieksekusi

Mengubah pernyataan impor berhasil. Dari

import * as $ from 'jquery';

untuk:

declare var $ : any;

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, masukkan " jquery " di kolom jenis file tsconfig.app.json.

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

Saya menemui kesalahan ini ketika mengintegrasikan modal bootstrap dalam sudut.

Ini adalah solusi saya untuk mengatasi masalah ini.

Saya berbagi untuk siapa perhatian.

Langkah pertama Anda perlu menginstal jquerydan bootstrapdengan npmperintah.

Kedua, Anda perlu menambahkan declare var $ : any;komponen

Dan gunakan bisa menggunakan $('#myModal').modal('hide');metode onSave ()

Demo https://stackblitz.com/edit/angular-model-bootstrap-close?file=src/app/app.component.ts

Menggunakan:

jQuery.noConflict();
$('#prizePopup').modal('toggle');

Masalah terjadi pada saya hanya dalam produksi hanya karena saya mengimpor jquery dengan HTTP dan bukan HTTPS (dan produksi adalah HTTPS)

Saya agak terlambat ke pesta, namun ada catatan penting:

Skrip Anda mungkin dalam urutan yang benar tetapi hati-hati terhadap semua yang ada asyncdi tag skrip Anda (seperti ini)

<script type="text/javascript" src="js/bootstrap.js" async></script>

Ini mungkin penyebab masalahnya. Terutama jika Anda memiliki asyncset ini hanya untuk lingkungan Produksi, ini bisa sangat membuat frustrasi.

Berjuang untuk menyelesaikan yang satu ini, memeriksa urutan pemuatan dan jika jQuery disertakan dua kali melalui bundling, tetapi tampaknya itu bukan penyebabnya.

Akhirnya perbaiki dengan melakukan perubahan berikut:

(sebelum):

$('#myModal').modal('hide');

(setelah):

window.$('#myModal').modal('hide');

Temukan jawabannya di sini: https://github.com/ColorlibHQ/AdminLTE/issues/685

Anda harus memasukkan:

bootstrap.min.css
jquery.min.js
bootstrap.min.js