TypeError: $ (…) .মোডাল বুটস্ট্র্যাপ মডেল সহ কোনও ফাংশন নয়

Question

আমার কাছে একটি বুটস্ট্র্যাপ ২.৩২ মডেল রয়েছে যা আমি অন্য দৃশ্যের এইচটিএমএলকে গতিশীলভাবে toোকানোর চেষ্টা করছি। আমি কোডইনিটার ২.১ এর সাথে কাজ করছি। অনুসরণ করছেন পরিবর্তনশীল একটি দৃশ্য মধ্যে একটি বুটস্ট্র্যাপ মোডাল আংশিক দৃশ্য ঢোকাতে , আমি আছে:

<div id="modal_target"></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 দুইবার অন্তর্ভুক্ত করা হয়েছে কিনা তাও পরীক্ষা করে দেখুন।

— mwebber

একটি বড় সম্ভাবনা রয়েছে যে বুটস্ট্র্যাপ.জেএস লোড করা হয় না আপনি কল করার চেষ্টা করার আগে। মডেল ()

— এলজে ওয়াদোভস্কি

mwebber - আমি জেএস নিয়ে অভিজ্ঞ নই, আমি কীভাবে "এটি jQuery (...)। মডেল দিয়ে কাজ করবে কিনা তা যাচাই করব" " আমি কোনওভাবে কনসোল ধরে নিলাম? Etsitra, bootstrap.js এই সমস্ত ঘটনার আগে শিরোনামে লোড হয়।

— ব্যবহারকারী 1592380

এর অর্থ: চেষ্টা করুনjQuery('#form-content').modal();

— vp_arth

পরিবর্তে $ ('# ফর্ম-সামগ্রী') 'মোডাল (); jQuery ('# ফর্ম-সামগ্রী') ব্যবহার করুন mod মডেল ();

— হিমান সিং

Answer 1

আমি কেবল জবাব দিতে চাই মন্তব্যটিতে ময়েবার কী বলেছেন:

jQuery দুইবার অন্তর্ভুক্ত করা হয়েছে কিনা তাও পরীক্ষা করে দেখুন

:)

এটা আমার জন্য সমস্যা ছিল

Comments

মনে রাখবেন: jQuery এর জন্য ফাইলগুলি অজ্যাক্সও পরীক্ষা করে দেখুন।

— ভ্লাদিমির ভারিগলে

আমি যখন jquery এর নিম্ন সংস্করণটি শর্তসাপেক্ষে অন্তর্ভুক্ত করি তখনও ঘটে 8। <! - [যদি তা আইটি 9 হয়]>

— জেনিফার মিশেল

এছাড়াও নিশ্চিত করুন যে অন্য কোনও গ্রন্থাগার তাদের নিজস্ব ন্যূনতম ফাইলগুলিতে jQuery বান্ডিল করে না (

— ডেটা টেবিলগুলি

আমদানি পরীক্ষা করতে ভুলবেন না, যেমন: আমদানি '../jquery-3.3.1.js';

— রেজা

... এবং এই ইভেন্টে কেউ কী করবে? @gillytech

— প্রতিকার

Answer 2

এই ত্রুটিটি আসলে modalফাংশনটি বলার আগে বুটস্ট্র্যাপের জাভাস্ক্রিপ্ট না অন্তর্ভুক্ত করার ফলাফল । মোডাল jQuery নয় বুটস্ট্র্যাপ jj এ সংজ্ঞায়িত করা হয়। 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

আপনাকে @ ডেভিটডব্লিউ 12 ধন্যবাদ, এটি অনেক সাহায্য করেছিল

— ওয়েস্টারথ

সঠিক উত্তর. :-)

— মিস্টার পারফেকশনিস্ট

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

আমি এই বিষয়টি এটির মতো ব্যবহার করে প্রতিক্রিয়ার সমাধান করেছি।

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

Answer 5

যে পরীক্ষা করুন jqueryHTML এ অন্তর্ভুক্ত করা হয় না গ্রন্থাগার যে মাধ্যমে লোড Ajax.remove <script src="~/Scripts/jquery[ver].js"></script>আপনারAjaxUpdate/get_modal

Answer 6

আর একটি সম্ভাবনা হ'ল আপনার অন্তর্ভুক্ত অন্যান্য স্ক্রিপ্টগুলির মধ্যে একটিতে JQuery অন্তর্ভুক্ত করে বা ting এর সাথে বিরোধের কারণে সমস্যা তৈরি করছে $ আপনার অন্যান্য অন্তর্ভুক্ত স্ক্রিপ্টগুলি সরানোর চেষ্টা করুন এবং দেখুন এটি সমস্যার সমাধান করে কিনা। আমার ক্ষেত্রে, কয়েক ঘন্টা অযথা আমার একটি কোড অনুসন্ধান করার পরে, আমি একটি বাইনারি অনুসন্ধানের প্যাটার্নে স্ক্রিপ্টগুলি সরিয়ে নিয়েছি এবং এখনই আপত্তিজনক স্ক্রিপ্টটি আবিষ্কার করেছি।

Answer 7

চালান

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>

বডি ক্লোজিং ট্যাগের ঠিক আগে আপনার সূচক। 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 প্রয়োজন। আমি মনে করি এটি একটি সম্ভাব্য কারণ।

আপনি প্রথমে অ্যাপ্লিকেশন / সম্পদ / application.js ফাইলটি পরীক্ষা করতে পারেন। যদি jquery এবং বুটস্ট্র্যাপ-স্প্রোককেট উপস্থিত হয়, তবে দ্বিতীয় লাইব্রেরির প্রয়োজন নেই। ফাইলটি এর অনুরূপ হওয়া উচিত:

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

তারপরে অ্যাপ্লিকেশন / ভিউ / লেআউটগুলি / অ্যাপ্লিকেশন 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. মডেল / কথোপকথনের ঘনিষ্ঠ অংশের জন্য একটি আইডি দিন (নীচের উদাহরণে "মাইমডালক্লোজ")

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

ঠিক নিশ্চিত হোন যে মডেল সামগ্রীটি ইতিমধ্যে লোড হয়েছে

আমি মনে করি সমস্যাটি হচ্ছে, মডেল দেখানোকে দু'বার বলা হয়, এজ্যাক্স কলটিতে একটি ঠিকঠাক কাজ করে, আপনি বলেছিলেন মডেলটি সঠিকভাবে দেখানো হয়েছে, তবে ত্রুটিটি সম্ভবত সেই বোতামটিতে টিআইডি অ্যাকশন নিয়ে আসে, যেটি মডেলটি পরিচালনা করতে পারে, এই ক্রিয়াটি কার্যকর করা যায় না, কারণ মডেলগুলি তখন লোড হয় না।