TypeError: $ (…) .modal ไม่ใช่ฟังก์ชันที่มี bootstrap Modal

ฉันมีโมดอล bootstrap 2.32 ซึ่งฉันพยายามแทรกลงใน HTML ของมุมมองอื่นแบบไดนามิก ฉันกำลังทำงานกับ Codeigniter 2.1 ต่อไปนี้การแทรกมุมมองบางส่วนของโมดอล bootstrap แบบไดนามิกลงในมุมมองฉันมี:

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

เป็น div เป้าหมายสำหรับการแทรก ฉันมีปุ่มในมุมมองของฉันที่ดูเหมือน:

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

JS ของฉันมี:

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

ฉันจะแก้ไขปัญหานี้ได้อย่างไร?

ฉันแค่ต้องการเน้นย้ำสิ่งที่mwebberพูดในความคิดเห็น:

ตรวจสอบด้วยว่า jQuery ไม่รวมสองครั้งหรือไม่

:)

มันเป็นปัญหาสำหรับฉัน

ข้อผิดพลาดนี้เป็นผลมาจากการที่คุณไม่รวมจาวาสคริปต์ของ bootstrap ก่อนเรียกใช้modalฟังก์ชัน Modal ถูกกำหนดไว้ใน bootstrap.js ไม่ใช่ jQuery สิ่งสำคัญคือต้องทราบว่าจริงๆแล้ว bootstrap ต้องการ jQuery เพื่อกำหนดmodalฟังก์ชันดังนั้นจึงจำเป็นอย่างยิ่งที่คุณต้องรวม jQuery ก่อนที่จะรวม javascript ของ bootstrap เพื่อหลีกเลี่ยงข้อผิดพลาดเพียงตรวจสอบให้แน่ใจว่าได้รวม jQuery แล้วจากนั้น bootstrap ของ javascript ก่อนที่คุณจะเรียกใช้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>

หลังจากเชื่อมโยง jquery และ bootstrap ของคุณแล้วให้เขียนโค้ดของคุณที่ด้านล่างแท็กสคริปต์ของ jquery และ bootstrap

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

ฉันได้แก้ไขปัญหานี้ในการตอบสนองโดยใช้สิ่งนี้

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

ตรวจสอบว่าjqueryไลบรารีไม่รวมอยู่ใน html ที่โหลดผ่านAjax. ลบ<script src="~/Scripts/jquery[ver].js"></script>ในไฟล์AjaxUpdate/get_modal

ความเป็นไปได้อีกประการหนึ่งคือหนึ่งในสคริปต์อื่น ๆ ของคุณรวมถึงทำให้เกิดปัญหาโดยการรวม JQuery หรือขัดแย้งกับ $ ลองลบสคริปต์อื่น ๆ ของคุณและดูว่าสามารถแก้ปัญหาได้หรือไม่ ในกรณีของฉันหลังจากใช้เวลาค้นหารหัสเดียวโดยไม่จำเป็นหลายชั่วโมงฉันก็ลบสคริปต์ในรูปแบบการค้นหาไบนารีและค้นพบสคริปต์ที่ละเมิดทันที

วิ่ง

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 ก่อนแท็กปิดเนื้อหา

และหากคุณกำลังเรียกใช้ Angular 2-7 ให้รวม "jquery" ในฟิลด์ types ของไฟล์ tsconfig.app.json

สิ่งนี้จะลบข้อผิดพลาดทั้งหมดของ 'modal' และ '$' ในโครงการ Angular ของคุณ

จากประสบการณ์ของฉันส่วนใหญ่อาจเกิดขึ้นกับความขัดแย้งของเวอร์ชัน jquery (ใช้หลายเวอร์ชัน) สำหรับการแยกแยะปัญหาเราสามารถใช้วิธีการที่ไม่มีข้อขัดแย้งดังต่อไปนี้

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

ฉันแก้ไขปัญหานี้ใน Laravel โดยแก้ไขบรรทัดด้านล่างใน resources\assets\js\bootstrap.js

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

ถึง

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

ในกรณีของฉันฉันใช้กรอบรางและต้องใช้ jQuery สองครั้ง ผมคิดว่าเป็นเหตุผลที่เป็นไปได้

ก่อนอื่นคุณสามารถตรวจสอบไฟล์ app / assets / application.js หาก jquery และ bootstrap-sprockets ปรากฏขึ้นแสดงว่าไม่จำเป็นต้องมีไลบรารีที่สอง ไฟล์ควรคล้ายกับสิ่งนี้:

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

จากนั้นตรวจสอบ app / views / layouts / application.html.erb และลบสคริปต์ที่ต้องการ jquery ตัวอย่างเช่น:

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

ฉันคิดว่าบางครั้งเมื่อมือใหม่ใช้ตัวอย่างโค้ดการสอนหลายตัวจะทำให้เกิดปัญหานี้

สำหรับฉันฉันมีหลัง//= require jquery //= require bootstrapเมื่อฉันย้าย jquery ก่อน bootstrap ทุกอย่างก็ใช้ได้

ฉันมีปัญหาเดียวกัน กำลังเปลี่ยน

$.ajax(...)

ถึง

jQuery.ajax(...)

ไม่ทำงาน. แต่แล้วฉันพบว่าjQuery ถูกรวมสองครั้งและการลบหนึ่งในนั้นช่วยแก้ปัญหาได้

คำตอบอื่น ๆ ไม่ได้ผลสำหรับฉันในแอปพลิเคชัน react.js ของฉันดังนั้นฉันจึงใช้ JavaScript ธรรมดาสำหรับสิ่งนี้

วิธีแก้ปัญหาด้านล่างใช้งานได้:

1. ให้รหัสสำหรับส่วนปิดของโมดอล / กล่องโต้ตอบ ("myModalClose" ในตัวอย่างด้านล่าง)

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

2. สร้างเหตุการณ์การคลิกไปที่ปุ่มปิดด้านบนโดยใช้รหัสนั้น:

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

เป็นไปได้ว่าคุณสามารถสร้างการคลิกเดียวกันบนปุ่มปิดโดยใช้ jQuery ด้วย

หวังว่าจะช่วยได้

ฉันเดาว่าคุณควรใช้ในปุ่มของคุณ

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

แทนที่จะเป็น href ควรมีdata-target

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

ต้องแน่ใจว่าเนื้อหาโมดอลนั้นโหลดแล้ว

ฉันคิดว่าปัญหาคือการแสดงโมดอลถูกเรียกสองครั้งหนึ่งในการโทร ajax ซึ่งใช้งานได้ดีคุณบอกว่าโมดอลแสดงอย่างถูกต้อง แต่ข้อผิดพลาดอาจมาพร้อมกับการดำเนินการเริ่มต้นบนปุ่มนั้นซึ่งควรจัดการโมดอลการกระทำนี้ไม่สามารถดำเนินการได้ เนื่องจากไม่ได้โหลดโมดอลในเวลานั้น