বুটস্ট্র্যাপ মডেল: কোনও ফাংশন নয়

Question

আমার পৃষ্ঠায় একটি মডেল আছে। উইন্ডোজ লোড হওয়ার সময় আমি যখন এটি কল করার চেষ্টা করি তখন এটি কনসোলে একটি ত্রুটি প্রিন্ট করে যা বলে:

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

এটি আমার মডেল এইচটিএমএল:

<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

"$ (উইন্ডো) .লোড (ফাংশন () {" আমাকে বাঁচিয়েছে

— খালেদ_উবদেব

দুবার JQuery উদাহরণটি সংজ্ঞায়িত করে সমস্যা দেখা দেবে। <লিপি src = "// কোড.jquery.com/jquery-1.11.0.min.js"> </script>

— প্রগাদেশ

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 এর উপর নির্ভর করে (এর অর্থ প্লাগইন ফাইলগুলির আগে জিকুয়েরি অবশ্যই অন্তর্ভুক্ত করা উচিত )।

Comments

আমি যখন গুগল ডেভ সরঞ্জামগুলি ব্যবহার করে মডেল চালানোর চেষ্টা করি তখনও আমার এই সমস্যাটি রয়েছে।

— কোডেড কনটেইনার

@ কোডেড কনটেনারটি নিশ্চিত করুন যে $jQuery ফাংশন। সম্ভবত এটি querySelectorফাংশন (নামযুক্ত $) যা গুগল ক্রোম দেব সরঞ্জামগুলি দ্বারা প্রকাশ করা হয়েছিল।

— আয়নিক বিজাউ

Answer 2

আপনার কোডটিতে jQuery একাধিকবার ঘোষিত হলে এই সতর্কতাটিও প্রদর্শিত হতে পারে। দ্বিতীয় jQuery ঘোষণাটি বুটস্ট্র্যাপ.জেএসকে সঠিকভাবে কাজ করা থেকে বিরত করে।

<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

এই পয়েন্টটির জন্য ধন্যবাদ, আমি এই সমস্যাটির সাথে দেখা করেছি এবং দেখতে পেয়েছি যে আমার নিজস্ব ডেটাট্যাব.মিন.জেসগুলি এতে jquery লাইব্রেরিগুলি আমদানি করেছিল, তবে আমার পৃষ্ঠাটি এটি আবার আমদানি করে, এটিই মূল সমস্যা caused

— হু

খুব ভাল ইঙ্গিত, আমার কাছে জেরি এনপিএম অরেলিয়ায় ইনস্টল ছিল এবং এছাড়াও ম্যানুয়ালি সূচক। Html এ লোড করা হয়েছিল। ধন্যবাদ!

— ইনগোবি

ভয়ানক সেটআপ সহ আমি যে বিশাল কাঠামোয় ইম কাজ করছি, জিক্যুরি কিছু পৃষ্ঠায় লোড করেছে তবে অন্যগুলিতে: কয়েকবার আমার মাথা ঘাটিয়ে যাওয়ার পরে, এখানে গিয়ে @ নুরপ উত্তরটি পড়েন। আমার দিন বাঁচিয়েছে

— নাইনোক্লিক

সমস্যাটি হ'ল আমি এমন অ্যাপ্লিকেশনটি ব্যবহার করছি যা পুরানো jquery সংস্করণের উপর নির্ভরশীলতা রয়েছে এবং আমাকে পরিবর্তন করার অনুমতি নেই এবং এটি কিছু পর্যায়ে পরে আমদানি করা হচ্ছে! আমি jquery এর সর্বশেষ সংস্করণ এবং তারপরে বুটস্ট্র্যাপ জেএস ব্যবহার করেছি, যা সমস্ত সমস্যার সৃষ্টি করে!

— heman123

এটাও আমার সমস্যা ছিল। আমি কৌণিক.জেএস এর স্ক্রিপ্ট বিভাগ থেকে jquery অপসারণ করেছি এবং টাইপস্ক্রিপ্ট এবং সমস্ত কিছু থেকে "jquery" থেকে "আমদানি *" মুছে ফেলেছি।

— জেনস মন্দার 0

Answer 3

JQuery উদাহরণ একাধিকবার থাকার কারণে সমস্যা is আপনি যদি 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 এর কারণগুলি: $ (…) .মডাল কোনও ফাংশন নয়:

1. স্ক্রিপ্টগুলি ভুল ক্রমে লোড হয়।
2. একাধিক jQuery দৃষ্টান্ত

সলিউশন:

1. যদি কোনও স্ক্রিপ্ট যদি এমন কোনও উপাদান অ্যাক্সেস করার চেষ্টা করে যা এখনও পৌঁছায় না তবে আপনি একটি ত্রুটি পাবেন। বুটস্ট্র্যাপ jQuery উপর নির্ভর করে, তাই jQuery প্রথমে উল্লেখ করা উচিত। সুতরাং, আপনাকে অবশ্যই jquery.min.js এবং তারপরে bootstrap.min.js বলা হবে এবং আরও বুটস্ট্র্যাপ মডেল ত্রুটি আসলে মোডাল ফাংশনটি কল করার আগে বুটস্ট্র্যাপের জাভাস্ক্রিপ্ট না অন্তর্ভুক্ত করার ফলস্বরূপ। মডেলটি বুটস্ট্র্যাপ.জেএসে সংজ্ঞায়িত করা হয়েছে এবং জিকুয়েরিতে নয়। সুতরাং স্ক্রিপ্টটি এই পদ্ধতিতে অন্তর্ভুক্ত করা উচিত

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

2. যদি jQuery এর একাধিক উদাহরণ থাকে তবে দ্বিতীয় jQuery ঘোষণাটি বুটস্ট্র্যাপ.জেগুলি সঠিকভাবে কাজ করতে বাধা দেয়। সুতরাং jQuery.noConflict();মডেল পপআপ কল করার আগে ব্যবহার করুন

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

   jQuery ইভেন্টের উপকরণ যেমন jQuery 1.8 থেকে অবৈধ .load, .unloadবা .errorহ্রাস করা হয়েছে।

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

চালান

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 9

কৌণিকরে মডেল বুটস্ট্র্যাপ সংহত করার সময় আমি এই ত্রুটিটি পূরণ করি।

এই সমস্যাটি সমাধান করার জন্য এটি আমার সমাধান।

আমি যার জন্য উদ্বেগ শেয়ার করি।

প্রথম পদক্ষেপ আপনার ইনস্টল jqueryএবং কমান্ড bootstrapদ্বারা প্রয়োজন npm।

দ্বিতীয় আপনি declare var $ : any;উপাদান যোগ করতে হবে

এবং ব্যবহার $('#myModal').modal('hide');অন-সেভ () পদ্ধতিতে ব্যবহার করতে পারে

ডেমো https://stackblitz.com/edit/angular-model-bootstrap-close?file=src/app/app.component.ts

Answer 10

ব্যবহার করুন:

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

Answer 11

সমস্যাটি কেবলমাত্র উত্পাদনে ঘটেছিল কারণ আমি এইচটিটিপি দিয়ে জ্যাকোয়ারি আমদানি করেছি এবং এইচটিটিপিএস নয় (এবং উত্পাদনটি এইচটিটিপিএস)

Answer 12

আমি পার্টিতে কিছুটা দেরি করেছি, তবে একটি গুরুত্বপূর্ণ নোট রয়েছে:

আপনার স্ক্রিপ্টগুলি সঠিক ক্রমে থাকতে পারে তবে asyncআপনার স্ক্রিপ্ট ট্যাগের যে কোনও সন্ধান করুন (এই জাতীয়)

<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