बूटस्ट्रैप मोडल: एक फ़ंक्शन नहीं है

Question

मेरे पेज में एक मॉडल है। जब मैं इसे लोड करने की कोशिश करता हूं जब विंडोज़ लोड होती है, तो यह कंसोल के लिए एक त्रुटि प्रिंट करता है जो कहता है:

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

यह मेरा मोडल HTML है:

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

और यह मेरा जावास्क्रिप्ट है जब एक खिड़की लोड होने के साथ इसे चलाने के लिए:

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

मैं इस समस्या को कैसे ठीक करुं?

Comments

विंडो तैयार समारोह में अपना मोडल ट्रिगर कोड लिखें

— yugi

"$ (खिड़की) .लोड (फ़ंक्शन () {" मुझे बचाया

— khaled_webdev

JQuery के उदाहरण को दो बार परिभाषित करने से समस्या उत्पन्न हो जाएगी। <script src = "// code.jquery.com/jquery-1.11.0.min.js"> </ script>

— pragadeesh

Answer 1

आपके पास स्क्रिप्ट ऑर्डर में कोई समस्या है। उन्हें इस क्रम में लोड करें:

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

यही कारण है? क्योंकि बूटस्ट्रैप जेएस jQuery पर निर्भर करता है :

प्लगिन निर्भरता

कुछ प्लगइन्स और सीएसएस घटक अन्य प्लगइन्स पर निर्भर करते हैं। यदि आप व्यक्तिगत रूप से प्लगइन्स को शामिल करते हैं, तो डॉक्स में इन निर्भरताओं की जांच करना सुनिश्चित करें। यह भी ध्यान दें कि सभी प्लगइन्स jQuery पर निर्भर करते हैं (इसका मतलब है कि jQuery को प्लगइन फ़ाइलों से पहले शामिल किया जाना चाहिए )।

Comments

मेरे पास अभी भी यह समस्या है जब मैं Google dev टूल का उपयोग करके मोडल को चलाने का प्रयास करता हूं।

— कोडेड कंटेनर

@CodedContainer सुनिश्चित करें कि $jQuery फ़ंक्शन है। सबसे शायद यह querySelectorफ़ंक्शन (नाम $) है जो Google क्रोम देव टूल्स द्वारा उजागर किया गया है।

— Ionică Bizău

Answer 2

यदि आपके कोड में jQuery एक से अधिक बार घोषित किया गया है तो यह चेतावनी भी दिखाई जा सकती है। दूसरी jQuery की घोषणा बूटस्ट्रैप.js को सही तरीके से काम करने से रोकती है।

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

Comments

इस बिंदु के लिए धन्यवाद, मैं इस मुद्दे से मिला और पाया कि मेरे अपने DataTable.min.js ने इसमें jquery पुस्तकालयों को आयात किया था, लेकिन मेरा पृष्ठ इसे फिर से आयात करता है, यह मूल मुद्दा है।

— ऑल्टर हू

बहुत अच्छा संकेत है, मैं aurelia में jquery npm स्थापित किया गया था और मैन्युअल रूप से index.html में लोड किया गया था। धन्यवाद!

— इंगो बी

एक बड़े ढांचे में, जिस पर Im काम कर रहा है, भयानक सेटअप के साथ, jQuery के कुछ पृष्ठों में लोड किया गया है, लेकिन दूसरों में: मेरे सिर को एक-दो बार पीटने के बाद, यहाँ गया और @Nurp उत्तर पढ़ा। मेरा दिन बचाया।

— नाइनोकलिक

समस्या यह है कि मैं ऐसे अनुप्रयोग का उपयोग कर रहा हूं जिसमें पुराने jquery संस्करण पर निर्भरताएं हैं और मुझे बदलने की अनुमति नहीं है और इसे बाद में किसी चरण में आयात किया जा रहा है! मैंने jquery के नवीनतम संस्करण का उपयोग किया है और फिर बूटस्ट्रैप js, जिससे सभी समस्याएँ पैदा हुई हैं!

— heman123

यही मेरी समस्या भी थी। मैंने angular.js में स्क्रिप्ट अनुभाग से jquery को हटा दिया और टाइपस्क्रिप्ट और सब कुछ से "jquery" से $ "के रूप में" आयात * भी हटा दिया।

— जेन्स मंडर

Answer 3

एक से अधिक बार jQuery इंस्टेंसेस होने के कारण समस्या है। ध्यान रखें कि आप jQuery के गुणक उदाहरण के साथ कई फ़ाइलों का उपयोग कर रहे हैं। बस jQuery के 1 उदाहरण छोड़ दें और आपका कोड काम करेगा।

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

Answer 4

jQuery पहले होना चाहिए:

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

Answer 5

TypeError के कारण: $ (…) .modal एक फ़ंक्शन नहीं है:

1. गलत आदेश में लिपियां भरी हुई हैं।
2. एकाधिक jQuery के उदाहरण

समाधान:

1. मामले में, यदि कोई स्क्रिप्ट ऐसे तत्व तक पहुंचने का प्रयास करती है जो अभी तक नहीं पहुंचा है तो आपको एक त्रुटि मिलेगी। बूटस्ट्रैप jQuery पर निर्भर करता है, इसलिए jQuery को पहले संदर्भित किया जाना चाहिए। इसलिए, आपको jquery.min.js और उसके बाद bootstrap.min.js कहा जाना चाहिए और आगे बूटस्ट्रैप मोडल त्रुटि वास्तव में आप मॉडल्स फ़ंक्शन को कॉल करने से पहले बूटस्ट्रैप की जावास्क्रिप्ट को शामिल नहीं करने का परिणाम है। मोडल को bootstrap.js में परिभाषित किया गया है न कि jQuery में। तो स्क्रिप्ट को इस तरीके से शामिल किया जाना चाहिए

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

2. यदि jQuery के कई उदाहरण हैं, तो दूसरी jQuery घोषणा बूटस्ट्रैप। Js को सही तरीके से काम करने से रोकती है। इसलिए jQuery.noConflict();मोडल पॉपअप को कॉल करने से पहले उपयोग करें

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

   jQuery की घटना उपनाम की तरह .load, .unloadया .errorjQuery 1.8 के बाद से पदावनत।

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

   या सीधे मोडल पॉपअप को खोलने का प्रयास करें

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

Comments

धन्यवाद, मेरे मामले में मैं jQuery के दो उदाहरण लोड कर रहा था।

— संजय आचार

Answer 6

स्क्रिप्ट का क्रम बदलें

क्योंकि बूटस्ट्रैप एक jquery प्लगइन है, इसलिए इसे निष्पादित करने के लिए Jquery की आवश्यकता होती है

Answer 7

आयात विवरण बदलना काम किया। से

import * as $ from 'jquery';

सेवा:

declare var $ : any;

Answer 8

Daud

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

परियोजना में अपने कोणीय परियोजना में jquery प्रकार जोड़ने के लिए। उसके बाद शामिल करें

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

अपने app.module.ts में

जोड़ना

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

आपके index.html में बॉडी क्लोजिंग टैग से ठीक पहले।

और अगर आप कोणीय 2-7 चला रहे हैं तो tsconfig.app.json फ़ाइल के प्रकार क्षेत्र में " jquery " शामिल करें ।

यह आपके कोणीय प्रोजेक्ट में 'मोडल' और '$' की सभी त्रुटि को दूर करेगा।

Answer 9

मैं इस त्रुटि को पूरा करता हूं जब कोणीय में मोडल बूटस्ट्रैप को एकीकृत करता हूं।

इस मुद्दे को हल करने के लिए यह मेरा समाधान है।

मैं किसकी चिंता के लिए साझा करता हूं।

पहला चरण जिसे आपको इंस्टॉल jqueryऔर कमांड bootstrapद्वारा करना होगा npm।

दूसरा आपको declare var $ : any;घटक में जोड़ने की आवश्यकता है

और उपयोग $('#myModal').modal('hide');onSave () विधि पर उपयोग कर सकते हैं

डेमो https://stackblitz.com/edit/angular-model-bootstrap-close?file=src/app/app.component.ts

Answer 10

उपयोग:

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

Answer 11

समस्या सिर्फ उत्पादन में मेरे साथ हुई क्योंकि मैंने HTTP के साथ jquery को आयात किया और HTTPS को नहीं (और उत्पादन HTTPS है)

Answer 12

मैं पार्टी के लिए थोड़ा लेट हूँ, हालाँकि एक महत्वपूर्ण नोट है:

आपकी स्क्रिप्ट सही क्रम में हो सकती है लेकिन asyncअपने स्क्रिप्ट टैग में किसी भी s के लिए देखें (जैसे यह)

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

यह समस्या का कारण हो सकता है। विशेष रूप से यदि आपके पास asyncकेवल उत्पादन वातावरण के लिए यह सेट है, तो यह वास्तव में निराशा का कारण बन सकता है।

Comments

प्रश्न में कोड स्पष्ट रूप से दिखाता है कि (ए) वे सही क्रम में नहीं हैं और (बी) वे एसिंक्स विशेषता का उपयोग नहीं कर रहे हैं

— क्वेंटिन

मैं अपना जवाब दे रहा हूँ क्योंकि यह एक बार-बार गुगला हुआ सवाल है और किसी को इससे फायदा हो सकता है

— मार्टिन शिशकोव

Answer 13

इसे हल करने के लिए संघर्ष किया, लोड ऑर्डर की जांच की और अगर दो बार jQuery को बंडल के माध्यम से शामिल किया गया था, लेकिन इसका कारण नहीं था।

अंत में निम्नलिखित परिवर्तन करके इसे ठीक किया:

(इससे पहले):

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

(उपरांत):

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

यहाँ उत्तर मिला: https://github.com/ColorlibHQ/AdminLTE/issues/685

Answer 14

आपको शामिल करना चाहिए:

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