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">
×
</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?
javascript
jquery
html
bootstrap-modal
godheaper
sumber
sumber
Jawaban:
Anda memiliki masalah dalam urutan skrip. Muat mereka dalam urutan ini:
Kenapa ini? Karena Bootstrap JS bergantung pada jQuery :
sumber
$
adalah fungsi jQuery. Kemungkinan besar itu adalahquerySelector
fungsi (bernama$
) yang diekspos oleh Alat Pengembang Google Chrome.Peringatan ini juga dapat ditampilkan jika jQuery dideklarasikan lebih dari satu kali dalam kode Anda. Deklarasi jQuery kedua mencegah bootstrap.js bekerja dengan benar.
sumber
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.
sumber
jQuery harus menjadi yang pertama:
sumber
Penyebab TypeError: $ (…) .modal bukan fungsi:
Solusi:
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
Jika ada beberapa contoh jQuery, deklarasi jQuery kedua mencegah bootstrap.js bekerja dengan benar. jadi manfaatkan
jQuery.noConflict();
sebelum memanggil popup modalalias acara jQuery suka
.load
,.unload
atau.error
tidak digunakan lagi sejak jQuery 1.8.ATAU coba buka popup modal secara langsung
sumber
ubah urutan skrip
Karena bootstrap adalah plugin jquery sehingga membutuhkan Jquery untuk dieksekusi
sumber
Mengubah pernyataan impor berhasil. Dari
untuk:
sumber
Lari
dalam proyek untuk menambahkan jenis jquery di Proyek Angular Anda. Setelah itu masukkan
di app.module.ts Anda
Menambahkan
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.
sumber
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
jquery
danbootstrap
dengannpm
perintah.Kedua, Anda perlu menambahkan
declare var $ : any;
komponenDan gunakan bisa menggunakan
$('#myModal').modal('hide');
metode onSave ()Demo https://stackblitz.com/edit/angular-model-bootstrap-close?file=src/app/app.component.ts
sumber
Menggunakan:
sumber
Masalah terjadi pada saya hanya dalam produksi hanya karena saya mengimpor jquery dengan HTTP dan bukan HTTPS (dan produksi adalah HTTPS)
sumber
Saya agak terlambat ke pesta, namun ada catatan penting:
Skrip Anda mungkin dalam urutan yang benar tetapi hati-hati terhadap semua yang ada
async
di tag skrip Anda (seperti ini)<script type="text/javascript" src="js/bootstrap.js" async></script>
Ini mungkin penyebab masalahnya. Terutama jika Anda memiliki
async
set ini hanya untuk lingkungan Produksi, ini bisa sangat membuat frustrasi.sumber
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):
(setelah):
Temukan jawabannya di sini: https://github.com/ColorlibHQ/AdminLTE/issues/685
sumber
bootstrap.min.css
jquery.min.js
bootstrap.min.js
sumber