बूटस्ट्रैप फेंकी गई त्रुटि: बूटस्ट्रैप के जावास्क्रिप्ट को jQuery की आवश्यकता है [बंद]

172

मैं एक प्रोग्राम के लिए एक इंटरफ़ेस बनाने के लिए बूटस्ट्रैप का उपयोग करने की कोशिश कर रहा हूं। मैंने jQuery 1.11.0 को <head>टैग में जोड़ा और सोचा कि यह वही था, लेकिन जब मैंने ब्राउज़र में वेब पेज लॉन्च किया तो jQuery ने एक त्रुटि रिपोर्ट की:

Uncaught Error: Bootstrap's JavaScript requires jQuery

मैंने jQuery 1.9.0 का उपयोग करने की कोशिश की है, मैंने कई सीडीएन पर होस्ट की गई प्रतियों के साथ कोशिश की है, लेकिन मुझे यह काम नहीं मिल सकता है। क्या कोई इंगित कर सकता है कि मैं क्या गलत कर रहा हूं?

jquery  html  css  twitter-bootstrap  twitter-bootstrap-3 
— मुनीम मुन्ना
स्रोत
28
बूटस्ट्रैप से पहले jQuery को शामिल करें ...
— Adriano Repetti
मेरे मामले में, मैंने बूटस्ट्रैप से पहले jquery स्थापित किया और फिर, यह ठीक काम किया। बस बूटस्ट्रैप से पहले त्रुटि को हल नहीं किया था।
— स्तुति वर्मा
मैं अपना मामला, पाद लेख में jquery जोड़ने के बजाय (बूटस्ट्रैप टेम्पलेट में); मैंने इसे हेडर में जोड़ा। समस्या का हल किया।
— अदील रज़ा अज़ीमी
1
बस <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.0/jquery.min.js" integrity="sha256-xNzN2a4ltkB44Mc/Jz3pT4iU1cmeR0FkXs4pru/JxaQ=" crossorigin="anonymous"></script>बूटस्ट्रैप आयात स्क्रिप्ट से पहले जोड़ें । नवीनतम CDN को यहां कॉपी करें: cdnjs.com/lbooks/jquery
— टीना ली

जवाबों:

373

इसे इस्तेमाल करे

फाइलों का क्रम बदलें यह नीचे की तरह होना चाहिए ..

<script src="js/jquery-1.11.0.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/wow.min.js"></script>
— श्रीधर आर
स्रोत
85
मेरे लिए काम नहीं करता है। मेरे पास बूटस्ट्रैप से पहले jQuery है और वैसे भी त्रुटि मिलती है!
— ग्रीन
2
काम किया, लेकिन तल पर एक क्षैतिज स्क्रॉलबार मिला
— हिमालयनकोडर
1
यदि यह इससे काम नहीं कर रहा है .. तो हो सकता है कि jQuery Bower के माध्यम से इंस्टॉल किया गया हो और इसलिए आपको bower_compitters / jquery / dist / jquery.js के तहत देखने की आवश्यकता हो सकती है .. जो कि मैंने अनदेखा कर दिया था, वह "dist" भाग है।
— जैक्स कैवलेरा
मेरे लिए एक Django- ऑस्कर परियोजना के लिए काम किया। यह त्रुटि नीला दिखाई देने लगी है। मुझे लगता है कि पूरी तरह से असंबंधित कोड के साथ खिलवाड़ करना प्रतिपादन अनुक्रम को बदल सकता है और इस त्रुटि को ट्रिगर कर सकता है।
— MadPhysicist
जाहिरा तौर पर मुझे ध्यान नहीं आया कि मेरे पास दो बार बूटस्ट्रैप है।जेएस शामिल हैं - पहली बार यह क्वेरी से पहले तरीका था
— जे जे रोमन
91

यदि आप ब्राउज़र-ओनली वातावरण में हैं , तो श्रीधर के समाधान का उपयोग करें ।

यदि आप एक नोड / कॉमनज + ब्राउज़र वातावरण (जैसे इलेक्ट्रॉन, नोड-वेबकिट, आदि ..) में हैं; इस त्रुटि का कारण यह है कि jQuery का निर्यात तर्क पहले जांचता है module, नहीं window:

if (typeof module === "object" && typeof module.exports === "object") {
    // CommonJS/Node
} else {
    // window
}

ध्यान दें कि यह module.exportsइस मामले में खुद के माध्यम से निर्यात करता है ; इसलिए jQueryऔर $उन्हें नहीं सौंपा गया है window।

तो इसका समाधान करने के बजाय <script src="path/to/jquery.js"></script>;

बस इसे अपने आप को एक requireकथन द्वारा निर्दिष्ट करें :

<script>
    window.jQuery = window.$ = require('jquery');
</script>

नोट: यदि आपके इलेक्ट्रॉन ऐप की आवश्यकता नहीं है nodeIntegration, falseतो इसे सेट करें ताकि आपको इस समाधान की आवश्यकता न हो।

— ओनुर येल्लादिरम
स्रोत
3
window.jQuery = window.$ = require('jquery');इसने मेरे लिए jQuery 2 और बूटस्ट्रैप 3 के साथ एक ब्रंच बिल्ड को इकट्ठा करने का प्रयास किया। 3. मुझे आपका उत्तर खोजने में केवल कई घंटे लगे :(?) क्या यह आवश्यकता jQuery के बाद के संस्करणों में बदल जाती है?
— rikkit
1
मुझे नहीं पता, लेकिन चूंकि यह बग नहीं है, इसलिए मुझे ऐसा नहीं लगता। यदि आपके इलेक्ट्रॉन ऐप की ज़रूरत नहीं है nodeIntegration, falseतो इसे सेट करें ताकि आपको इस समाधान की आवश्यकता न हो।
— ओनूर येल्ड्रिम्म
1
आपको npm install jqueryबोवर के साथ नहीं का उपयोग करके jquery स्थापित करना होगा ।
— सहोदय
1
यह देखने के लिए उपयोगी है कि इलेक्ट्रॉन एक विंडो आधारित ऐप की तुलना में पुस्तकालयों के साथ कैसे व्यवहार करते हैं
— jwknz
मुझे अभी भी यह समझ में नहीं आया है, लेकिन लारवेल उसी दृष्टिकोण का उपयोग करता है: github.com/laravel/laravel/blob/v5.7.0/resources/js/…
— Ryan
14

आपको पहले jquery लोड करना चाहिए क्योंकि बूटस्ट्रैप jquery सुविधाओं का उपयोग करता है। इस तरह:

<!doctype html>
<html>
    <head>
        <link type="text/css" rel="stylesheet" src="css/animate.css">
        <link type="text/css" rel="stylesheet" src="css/bootstrap-theme.min.css">
        <link type="text/css" rel="stylesheet" src="css/bootstrap.min.css">
        <link type="text/css" rel="stylesheet" href="css/custom.css">

<!--   Shuffle your scripts HERE  -->
        <script src="js/jquery-1.11.0.min.js"></script>
        <script src="js/bootstrap.min.js"></script>
        <script src="js/wow.min.js"></script>
<!--   End  -->   

        <title>pyMeLy Interface</title>
    </head>
    <body>
        <p class="title1"><strong>pyMeLy</strong></p>
        <p class="title2"><em> A stylish way to view your media</em></p>
        <div style="text-align:center;">
            <button type="button" class="btn btn-primary">Movies</button>
            <button type="button" class="btn btn-primary btn-lg">Large button</button>
        </div>
    </body>
</html>
— 124
स्रोत
7

बूटस्ट्रैप जोड़ने से पहले आपको JQuery को जोड़ना होगा-

<!-- JQuery Core JavaScript -->
<script src="lib/js/jquery.min.js"></script>

<!-- Bootstrap Core JavaScript -->
<script src="lib/js/bootstrap.min.js"></script>
— विवेक पांडे
स्रोत
4

आपने JAVASCRIPT और BOOTSTRAP के लिए गलत आदेश दिया है

कन्वेंशन बूटस्ट्रैप द्वारा jquery फ़ाइल परिभाषा का पालन करना चाहिए

<!-- JQuery Core JavaScript -->
<script src="lib/js/jquery.min.js"></script>
<script src="lib/js/jquery-ui.min.js"></script>
<!-- Bootstrap Core JavaScript -->
<script src="lib/js/bootstrap.min.js"></script>
— मोहित सिंह
स्रोत
1

मेरे मामले में समाधान वास्तव में मूर्खतापूर्ण है, और अजीब है।

नीचे दिया गया कोड _Layout.cshtml फ़ाइल से पूर्व-आबादी वाला था। (मेरे द्वारा नहीं लिखा गया)

<script src="~/Scripts/jquery-1.10.2.min.js"></script>
<script src="~/Scripts/bootstrap.min.js"></script>

लेकिन, जब मैंने लिपियों के फ़ोल्डर में सत्यापित किया, तो jquery-1.10.2.min.js भी उपलब्ध नहीं था। इसलिए, नीचे दिए गए कोड की तरह जहां jquery-1.9.1.min.js एक मौजूदा फ़ाइल है:

<script src="~/Scripts/jquery-1.9.1.min.js"></script>
<script src="~/Scripts/bootstrap.min.js"></script>
— अशोक कुमार
स्रोत
1

मैं NodeJS का उपयोग कर रहा हूं और मुझे वही त्रुटि मिली है। अन्य उत्तरों की तरह, समस्या यह भी थी क्योंकि JQuery को बूटस्ट्रैप से पहले लोड करने की आवश्यकता थी; हालाँकि, NodeJS विशेषताओं के कारण, इस परिवर्तन को पाइपलाइन में लागू किया गया था। js फ़ाइल ।

पाइपलाइन में परिवर्तन। जेएस इस तरह था:

var jsFilesToInject = [
  // Dependencies like jQuery, or Angular are brought in here
  'js/dependencies/angular.1.3.js',
  'js/dependencies/jquery.js',
  'js/dependencies/bootstrap.js',
  'js/dependencies/**/*.js',
];

मैं मदद करने के लिए ग्रन्ट का भी उपयोग कर रहा हूं, और यह स्वचालित रूप से मुख्य HTML पृष्ठ में क्रम बदल गया है:

<!--SCRIPTS-->
  <script src="/js/dependencies/angular.1.3.js"></script>
  <script src="/js/dependencies/jquery.js"></script>
  <script src="/js/dependencies/bootstrap.js"></script>
  <!-- other dependencies -->
<!--SCRIPTS END-->

आशा करता हूँ की ये काम करेगा! आपने यह नहीं बताया कि आपका वातावरण क्या था, इसलिए मैंने इस उत्तर को पोस्ट करने का निर्णय लिया।

— Ernani
स्रोत
1

यदि आप app.js में require.jsजोड़ने की आवश्यकता से उपयोग कर रहे हैंwindow.$ = window.jQuery = require('jquery')

या आप मूल फ़ाइल लोड होने के बाद आश्रित फ़ाइल लोड कर सकते हैं .. जैसे कि अवधारणा के नीचे 

require.config({
    baseUrl: "scripts/appScript",
    paths: {
        'jquery':'jQuery/jquery.min',
        'bootstrap':'bootstrap/bootstrap.min' 
    },
   shim
    shim: {
        'bootstrap':['jquery'],
        },

    // kick start application
    deps: ['app']
});

उपरोक्त कोड दिखाया गया है कि bootstrapइस पर निर्भर है Jqueryइसलिए मैंने इसे जोड़ा है shimऔर इसे निर्भर करता है

— SantoshK
स्रोत
0

यदि आपका कोड अच्छा लग रहा है, तो सत्यापित करें कि jQuery सफलतापूर्वक आपके सर्वर पर लोड है। मेरे मामले में, jQuery फाइलें मेरी आईडीई द्वारा सर्वर पर प्रकाशित की गई थीं, लेकिन वेब सर्वर में केवल 0 केबी फ़ाइल स्टब था। कोई सामग्री नहीं होने के कारण, सर्वर फ़ाइल को ब्राउज़र में सेवा देने में विफल रहा।

फ़ाइल को फिर से प्रकाशित करने और यह सत्यापित करने के बाद कि सर्वर ने वास्तव में पूरी फ़ाइल प्राप्त की है, फिर मेरे वेब पेज ने मुझे त्रुटि देना बंद कर दिया।

— Zarepheth
स्रोत
0

बूटस्ट्रैप js फ़ाइल जोड़ने से पहले आपको JQuery के js जोड़ने की आवश्यकता है, क्योंकि बूटस्ट्रैप jqueries फ़ंक्शन का उपयोग करता है। इसलिए पहले jquery js और फिर बूटस्टैप js फ़ाइल लोड करना सुनिश्चित करें।

<!-- JQuery Core JavaScript -->
<script src="app/js/jquery.min.js"></script>

<!-- Bootstrap Core JavaScript -->
<script src="app/js/bootstrap.min.js"></script>
— जानी देवांग
स्रोत
0

यदि यह केवल IE इंट्रानेट होता है, तो संगतता सेटिंग जांचें और "संगतता मोड में इंट्रानेट साइट प्रदर्शित करें" को अनचेक करें।

आईई -> सेटिंग्स -> अनुकूलता

यहां छवि विवरण दर्ज करें

— दावुत गार्बुज़
स्रोत
0

आधिकारिक डॉक्स पर: https://electronjs.org/docs/faq#i-can-not-use-jqueryrequirejsmeteorangularjs-in-electron

<head>
  <script>
  window.nodeRequire = require;
  delete window.require;
  delete window.exports;
  delete window.module;
  </script>
  <script type="text/javascript" src="jquery.js"></script>
</head>
— फैबियो सूजा
स्रोत
1
मैंने इसे "" स्क्रिप्ट्स "कोड के साथ angular.json पर तय किया: [" node_modules / jquery / dist / jquery.min.js "," node_modules / bootstrap / dist / js / bootstrap.min.js "]"
— AntWo
0

मैंने उपरोक्त सभी तरीकों की कोशिश की थी।

अंत में इसे शामिल करके तय किया 

script src="{%static 'App/js/jquery.js' %}"

{% load staticfiles %}आधारभूत में स्थैतिक यानी लोड करने के बाद

— कनिका
स्रोत
0

इस समस्या से जूझने के बाद मैंने तीन कदम उठाए:

  1. 1.9.0 और 3.0.0 के बीच कहीं भी jQuery के संस्करणों का उपयोग करें
  2. बूटस्ट्रैप फ़ाइल घोषित करने से पहले jQuery फ़ाइल की घोषणा करें
  3. इन दो स्क्रिप्ट फ़ाइलों को <body></body>टैग करने के बजाए नीचे टैग में घोषित करें <head></head>। ये मेरे लिए काम करते हैं लेकिन आपके द्वारा उपयोग किए जा रहे ब्राउज़र के आधार पर अलग-अलग व्यवहार हो सकते हैं।
— Karisno1
स्रोत
हमारी साइट का प्रयोग करके, आप स्वीकार करते हैं कि आपने हमारी Cookie Policy और निजता नीति को पढ़ और समझा लिया है।
Licensed under cc by-sa 3.0 with attribution required.