Bootstrap modal: bir işlev değildir

Sayfamda bir modal var. Windows yüklendiğinde aramaya çalıştığımda, konsola şunu yazan bir hata yazdırıyor:

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

Bu benim Modal HTML'im:

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

Ve bu, bir pencere yüklendiğinde çalıştıracağım JavaScript'im:

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

Bu sorunu nasıl çözebilirim?

Komut dosyası sıralamasında bir sorununuz var. Bunları şu sırayla yükleyin:

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

Neden bu? Bootstrap JS jQuery'ye bağlı olduğundan :

Eklenti bağımlılıkları

Bazı eklentiler ve CSS bileşenleri diğer eklentilere bağlıdır. Eklentileri tek tek eklerseniz, bu bağımlılıkları dokümanlarda kontrol ettiğinizden emin olun. Ayrıca tüm eklentilerin jQuery'ye bağlı olduğunu unutmayın (bu, jQuery'nin eklenti dosyalarından önce dahil edilmesi gerektiği anlamına gelir ).

Bu uyarı, jQuery kodunuzda birden çok kez bildirilmişse de gösterilebilir. İkinci jQuery bildirimi, bootstrap.js'nin düzgün çalışmasını engeller.

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

Sorun, jQuery örneklerine birden fazla kez sahip olmasından kaynaklanmaktadır. Birden çok jQuery örneğine sahip çok sayıda dosya kullanıyorsanız dikkatli olun. Sadece 1 jQuery örneği bırakın ve kodunuz çalışacaktır.

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

jQuery ilk olmalıdır:

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

TypeError hatası nedenleri: $ (…) .modal bir işlev değildir:

1. Komut dosyaları yanlış sırada yükleniyor.
2. Birden çok jQuery örneği

Çözümler:

1. Bu durumda, bir komut dosyası henüz ulaşılmamış bir öğeye erişmeye çalışırsa bir hata alırsınız. Bootstrap jQuery'ye bağlıdır, bu nedenle önce jQuery'ye başvurulmalıdır. Bu nedenle, jquery.min.js ve ardından bootstrap.min.js olarak adlandırılmanız gerekir ve ayrıca bootstrap Modal hatası aslında modal işlevi çağırmadan önce bootstrap'ın javascript'i dahil etmemenizin sonucudur. Modal, jQuery'de değil, bootstrap.js'de tanımlanmıştır. Yani komut dosyası bu şekilde dahil edilmelidir

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

2. Birden fazla jQuery örneği olması durumunda, ikinci jQuery bildirimi bootstrap.js'nin düzgün çalışmasını engeller. bu yüzden jQuery.noConflict();kalıcı pop-up'ı çağırmadan önce kullanın

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

   jQuery olay adlar gibi .load, .unloadya .errorjQuery 1.8 beri kaldırılmış.

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

   VEYA kalıcı pop-up'ı doğrudan açmayı deneyin

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

komut dosyasının sırasını değiştir

Bootstrap bir jquery eklentisi olduğundan, Jquery'nin yürütülmesini gerektirir

İthalat ifadesinin değiştirilmesi işe yaradı. itibaren

import * as $ from 'jquery';

için:

declare var $ : any;

Çalıştırmak

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

Angular Projenize jquery türlerini eklemek için projede. Bundan sonra şunları içerir

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

app.module.ts içinde

Ekle

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

index.html dosyanızda, gövde kapanış etiketinin hemen öncesinde.

Ve Angular 2-7 çalıştırıyorsanız " jquery " , tsconfig.app.json dosyasının türler alanına " .

Bu, Angular projenizdeki tüm 'modal' ve '$' hatasını kaldıracaktır.

Modal önyüklemeyi açısal olarak entegre ederken bu hatayla karşılaşıyorum.

Bu sorunu çözmek için benim çözümüm bu.

Kimin için endişesini paylaşıyorum.

Yüklemek gereken ilk adım jqueryve bootstraptarafındannpm komuta.

İkincisi eklemeniz gerekiyor declare var $ : any; olarak bileşen

Ve kullanabilirsin $('#myModal').modal('hide'); onSave () yönteminde kullanabilirsiniz

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

kullanın:

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

Sorun sadece üretimde başıma geldi çünkü jquery'yi HTTPS ile değil, HTTP ile içe aktardım (ve üretim HTTPS)

Partiye biraz geç kaldım, ancak önemli bir not var:

Komut dosyalarınız doğru sırada olabilir, ancak asynckomut dosyası etiketinizdeki herhangi bir URL'ye dikkat edin (bunun gibi)

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

Bu, soruna neden olabilir. Özellikle bu asyncseti yalnızca Üretim ortamları için kullanıyorsanız, bu konuda mantık yürütmek gerçekten sinir bozucu olabilir.

Bunu çözmek için mücadele etti, yükleme sırasını kontrol etti ve jQuery, paketlemeyle iki kez dahil edilip edilmediğini kontrol etti, ancak neden bu değildi.

Sonunda aşağıdaki değişikliği yaparak sorunu düzeltti:

(önce):

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

(sonra):

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

Cevabı burada buldum : https://github.com/ColorlibHQ/AdminLTE/issues/685

Dahil etmelisiniz:

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