TypeError: $ (…) .modal बूटस्ट्रैप मोडल के साथ एक फ़ंक्शन नहीं है

Question

मेरे पास बूटस्ट्रैप 2.32 मोडल है जिसे मैं गतिशील रूप से किसी अन्य दृश्य के HTML में सम्मिलित करने का प्रयास कर रहा हूं। मैं Codeigniter 2.1 के साथ काम कर रहा हूँ। डायनामिक रूप से बूटस्ट्रैप मोडल आंशिक दृश्य को एक दृश्य में सम्मिलित करने के बाद , मेरे पास है:

<div id="modal_target"></div>

प्रविष्टि के लिए लक्ष्य div के रूप में। मेरे विचार में एक बटन है जो दिखता है:

     <a href="#message" class="btn btn-large btn-info" data-action="Message" data-toggle="tab">Message</a>

मेरे जेएस है:

$.ajax({
    type    : 'POST', 
    url     : "AjaxUpdate/get_modal",
    cache   : false,
    success : function(data){ 
       if(data){
            $('#modal_target').html(data);

            //This shows the modal
            $('#form-content').modal();
       }
    }
});

मुख्य दृश्य का बटन है:

<div id="thanks"><p><a data-toggle="modal" href="#form-content" class="btn btn-primary btn-large">Modal powers, activate!</a></p></div>

यहाँ मैं एक आंशिक दृश्य के रूप में अलग से स्टोर करना चाहूंगा:

<div id="form-content" class="modal hide fade in" style="display: none;">
    <div class="modal-header">
        <a class="close" data-dismiss="modal">×</a>
        <h3>Send me a message</h3>
    </div>
    <div class="modal-body">
        <form class="contact" name="contact">
             <fieldset>

               <!-- Form Name -->

            <legend>modalForm</legend>

            <!-- Text input-->
            <div class="control-group">
              <label class="control-label" for="user">User</label>
              <div class="controls">
                <input id="user" name="user" type="text" placeholder="User" class="input-xlarge" required="">
                <p class="help-block">help</p>
              </div>
            </div>

            <!-- Text input-->
            <div class="control-group">
              <label class="control-label" for="old">Old password</label>
              <div class="controls">
                <input id="old" name="old" type="text" placeholder="placeholder" class="input-xlarge">
                <p class="help-block">help</p>
              </div>
            </div>

            <!-- Text input-->
            <div class="control-group">
              <label class="control-label" for="new">New password</label>
              <div class="controls">
                <input id="new" name="new" type="text" placeholder="placeholder" class="input-xlarge">
                <p class="help-block">help</p>
              </div>
            </div>

            <!-- Text input-->
            <div class="control-group">
              <label class="control-label" for="repeat">Repeat new password</label>
              <div class="controls">
                <input id="repeat" name="repeat" type="text" placeholder="placeholder" class="input-xlarge">
                <p class="help-block">help</p>
              </div>
            </div>



                </fieldset>
        </form>
    </div>


    <div class="modal-footer">
        <input class="btn btn-success" type="submit" value="Send!" id="submit">
        <a href="#" class="btn" data-dismiss="modal">Nah.</a>
    </div>
</div>

जब मैं बटन पर क्लिक करता हूं, तो मोडल सही तरीके से डाला जाता है, लेकिन मुझे निम्न त्रुटि मिलती है:

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

मैं इसे कैसे ठीक करूं?

Comments

जांचें कि क्या यह साथ काम करेगा jQuery(...).modal। आपका jQuery कंपेटिबिलिटी मोड में हो सकता है, यह भी जांच लें कि क्या jQuery को दो बार शामिल नहीं किया गया है।

— 15

वहाँ एक बड़ी संभावना bootstrap.js लोड नहीं है कि इससे पहले कि आप .modal () कॉल करने के लिए कोशिश है

— एल.जे. Wadowski

mwebber - मैं js के साथ अनुभवी नहीं हूं, मैं कैसे "जांचता हूं कि क्या यह jQuery (...)? मोडल के साथ काम करेगा।" मैं किसी तरह सांत्वना में मान? Etsitra, bootstrap.js यह सब होने से पहले हेडर में लोड किया जाता है।

— 15:15 बजे user1592380

इसका मतलब है: कोशिश करेंjQuery('#form-content').modal();

— vp_arth

$ के बजाय ('# फॉर्म-कंटेंट'); मोडल (); jQuery ('# फॉर्म-कंटेंट') का उपयोग करें।

— हिमान सिंह

Answer 1

मैं केवल इस बात पर जोर देना चाहता हूं कि mwebber ने टिप्पणी में क्या कहा है:

यह भी जांचें कि क्या jQuery को दो बार शामिल नहीं किया गया है

:)

यह मेरे लिए मुद्दा था

Comments

याद रखें: jQuery के लिए ajax नामक फाइलों को भी अवश्य देखें।

— व्लादिमिर

यह भी हुआ जब मैंने एक सशर्त में jquery के निचले संस्करण को रखा, जिसमें ie8 भी शामिल था। <! - [अगर लेट IE 9]>

— जेनिफर मिशेल

यह भी सुनिश्चित करें कि कोई अन्य लाइब्रेरीज़ बंडल jQuery को अपनी स्वयं की

— मिनी

आयात की जाँच करना न भूलें, जैसे: आयात '../jquery-3.3.1.js';

— रेजा

... और उस घटना में कोई क्या करता है? @gillytech

— निवारण

Answer 2

यह त्रुटि वास्तव में modalफ़ंक्शन को कॉल करने से पहले बूटस्ट्रैप की जावास्क्रिप्ट को शामिल नहीं करने का परिणाम है । मोडल को बूटस्ट्रैप में परिभाषित किया गया है। यह भी ध्यान रखना महत्वपूर्ण है कि बूटस्ट्रैप को वास्तव में modalफ़ंक्शन को परिभाषित करने के लिए jQuery की आवश्यकता होती है, इसलिए यह महत्वपूर्ण है कि बूटस्ट्रैप की जावास्क्रिप्ट को शामिल करने से पहले आप jQuery को शामिल करें। त्रुटि से बचने के लिए सिर्फ jQuery शामिल करना सुनिश्चित करें इससे पहले कि आप modalफ़ंक्शन को कॉल करें बूटस्ट्रैप की जावास्क्रिप्ट । मैं आमतौर पर अपने हेडर टैग में निम्नलिखित कार्य करता हूं:

<header>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    <script src="/path/to/bootstrap/js/bootstrap.min.js"></script>
</header>

Comments

धन्यवाद @ davetw12, इसने बहुत मदद की

— वीशरथ

सही उत्तर। :-)

— मिस्टर परफेक्शनिस्ट

Answer 3

अपने jquery और बूटस्ट्रैप को जोड़ने के बाद, jquery और बूटस्ट्रैप के स्क्रिप्ट टैग के ठीक नीचे अपना कोड लिखें।

$(document).ready(function($) {
  $("#div").on("click", "a", function(event) {
    event.preventDefault();
    jQuery.noConflict();
    $('#myModal').modal('show');

  });
});

<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

<!-- Latest compiled JavaScript -->
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

Answer 4

जाँच करें कि jqueryपुस्तकालय html में शामिल नहीं है जो आपके द्वारा Ajax.remove के माध्यम से लोड <script src="~/Scripts/jquery[ver].js"></script>करता हैAjaxUpdate/get_modal

Answer 5

एक और संभावना यह है कि आपके द्वारा बनाई गई अन्य लिपियों में से एक समस्या भी पैदा कर रही है जिसमें JQuery या $ के साथ विरोध भी शामिल है। अपने अन्य शामिल स्क्रिप्ट को हटाने का प्रयास करें और देखें कि क्या यह समस्या को ठीक करता है। मेरे मामले में, अनावश्यक रूप से अपना एक कोड सर्च करने के घंटों के बाद, मैंने बाइनरी सर्च पैटर्न में स्क्रिप्ट्स को हटा दिया और एकदम से आपत्तिजनक स्क्रिप्ट की खोज की।

Answer 6

मैंने इस तरह से इसका उपयोग करके प्रतिक्रिया में इस मुद्दे को हल किया है।

window.$('#modal-id').modal();

Answer 7

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 8

मेरे अनुभव में, सबसे अधिक संभवतया इसके jquery संस्करण (कई संस्करण का उपयोग करके) संघर्ष के साथ हुआ, इस समस्या को हल करने के लिए हम नीचे की तरह नो-संघर्ष विधि का उपयोग कर सकते हैं।

jQuery.noConflict();
(function( $ ) {
  $(function() {
    // More code using $ as alias to jQuery
    $('button').click(function(){
        $('#modalID').modal('show');
    });
  });
})(jQuery);

Answer 9

मैंने नीचे की लाइन को संशोधित करके लारवेल में इस मुद्दे को हल किया resources\assets\js\bootstrap.js

window.$ = window.jQuery = require('jquery/dist/jquery.slim');

सेवा

window.$ = window.jQuery = require('jquery/dist/jquery');

Comments

jQuery स्लिम मोडल () को शामिल नहीं करता है।

— रयान ग्रिग्स

Answer 10

मेरे मामले में, मैं रेल ढांचे का उपयोग करता हूं और दो बार jQuery की आवश्यकता होती है। मुझे लगता है कि यह एक संभावित कारण है।

आप पहले ऐप / एसेट्स / एप्लिकेशन.जेएस फ़ाइल की जांच कर सकते हैं। यदि जक्वेरी और बूटस्ट्रैप-स्प्रोकेट दिखाई देते हैं, तो दूसरी लाइब्रेरी की आवश्यकता नहीं है। फ़ाइल इस के समान होनी चाहिए:

//= require jquery
//= require jquery_ujs
//= require turbolinks
//= require bootstrap-sprockets
//= require_tree .

फिर ऐप / विचार / लेआउट / application.html.erb की जांच करें, और jquery की आवश्यकता के लिए स्क्रिप्ट निकालें। उदाहरण के लिए:

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>

मुझे लगता है कि कभी-कभी जब newbies कई ट्यूटोरियल कोड उदाहरणों का उपयोग करते हैं तो यह समस्या पैदा करेगा।

Answer 11

मेरे लिए, मेरे //= require jqueryबाद था //= require bootstrap। एक बार जब मैंने बूटस्ट्रैप से पहले jquery स्थानांतरित की, तो सब कुछ काम कर गया।

Answer 12

मेरी भी यही समस्या थी। बदलना

$.ajax(...)

सेवा

jQuery.ajax(...)

काम नहीं किया। लेकिन फिर मैंने पाया कि jQuery को दो बार शामिल किया गया था और उनमें से एक को हटाने से समस्या ठीक हो गई।

Answer 13

अन्य उत्तर मेरे रिएक्शन.जेएस एप्लिकेशन में मेरे लिए काम नहीं करेंगे, इसलिए मैंने इसके लिए सादे जावास्क्रिप्ट का उपयोग किया है।

नीचे दिए गए समाधान ने काम किया:

1. नीचे दिए गए उदाहरण के लिए मोडल / डायलॉग ("myModalClose") को बंद करें

<span>
   className="close cursor-pointer"
   data-dismiss="modal"
   aria-label="Close"
                     id="myModalClose"
>
...

2. उस आईडी का उपयोग करके उपरोक्त क्लोज बटन पर एक क्लिक ईवेंट बनाएं।

   document.getElementById("myModalClose").click();

संभवतः आप jQuery का उपयोग करते हुए, क्लोज़ बटन पर एक ही क्लिक उत्पन्न कर सकते हैं।

उम्मीद है की वो मदद करदे।

Answer 14

मुझे लगता है कि आपको अपने बटन में उपयोग करना चाहिए

<a data-toggle="modal" href="#form-content"    

href के बजाय डेटा-टारगेट होना चाहिए

<a data-toggle="modal" data-target="#form-content"    

बस सुनिश्चित करें, कि मोडल सामग्री पहले से ही भरी हुई है

मुझे लगता है कि समस्या यह है कि मोडल दिखाने को दो बार कहा जाता है, एक अजाक्स कॉल में, जो ठीक काम करता है, आपने कहा कि मोडल सही ढंग से दिखाया गया है, लेकिन त्रुटि शायद उस बटन पर init कार्रवाई के साथ आती है, जिसे मोडल को संभालना चाहिए, इस क्रिया को निष्पादित नहीं किया जाना चाहिए, क्योंकि उस समय मोडल लोड नहीं होता है।