TypeError : $ (…) .modal은 부트 스트랩 Modal이있는 함수가 아닙니다.

TypeError : $ (…) .modal은 부트 스트랩 Modal이있는 함수가 아닙니다.

---

다른 뷰의 HTML에 동적으로 삽입하려는 부트 스트랩 2.32 모달이 있습니다. 저는 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>

내 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가 두 번 포함되지 않았는지 확인하십시오.

:)

그것은 나에게 문제였다

---

This error is actually the result of you not including bootstrap's javascript before calling the modal function. Modal is defined in bootstrap.js not jQuery. It's also important to note that bootstrap actually needs jQuery to define the modal function, so it's vital that you include jQuery before including bootstrap's javascript. To avoid the error just be sure to include jQuery then bootstrap's javascript before you call the modal function. I usually do the following in my header tag:

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

---

After linking up your jquery and bootstrap write your code just below the Script tags of jquery and 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>

---

Check that jquery library not included in html that load via Ajax .remove <script src="~/Scripts/jquery[ver].js"></script> in your AjaxUpdate/get_modal

---

Another possibility is that one of the other scripts your including is causing the problem by also including JQuery or conflicting with $. Try removing your other included scripts and see if it fixes the issue. In my case, after hours of needlessly searching my one code, I removed scripts in a binary search pattern and discovered the offending script right away.

---

In my case, I use rails framework and require jQuery twice. I think that is a possible reason.

You can first check app/assets/application.js file. If the jquery and bootstrap-sprockets appears, then there is not need for a second library require. The file should be similar to this:

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

Then check app/views/layouts/application.html.erb, and remove the script for requiring jquery. For example:

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

I think sometimes when newbies use multiple tutorial code examples will cause this issue.

---

In my experience, most probably its happened with jquery version(using multiple version) conflicts, for sort out the issue we can use a no-conflict method like below.

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

---

I resolved this issue in Laravel by modifing the line below in resources\assets\js\bootstrap.js

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

to

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

---

Run

npm i @types/jquery
npm install -D @types/bootstrap

in the project to add the jquery types in your Angular Project. After that include

import * as $ from "jquery";
import * as bootstrap from "bootstrap";

in your app.module.ts

Add

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>

in your index.html just before the body closing tag.

And if you are running Angular 2-7 include "jquery" in the types field of tsconfig.app.json file.

This will remove all error of 'modal' and '$' in your Angular project.

---

I had the same issue. Changing

$.ajax(...)

to

jQuery.ajax(...)

did not work. But then I found that jQuery was included twice and removing one of them fixed the problem.

---

I have resolved this issue in react by using it like this.

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

---

For me, I had //= require jquery after //= require bootstrap. Once I moved jquery before bootstrap, everything worked.

---

I guess you should use in your button

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

instead of href there should be data-target

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

just be sure, that modal content is already loaded

I think problem is, that showing modal is called twice, one in ajax call, that works fine, you said modal is shown correctly, but error probably comes with init action on that button, that should handle modal, this action cant be executed, because modal is not loaded at that time.

참고URL : https://stackoverflow.com/questions/27064176/typeerror-modal-is-not-a-function-with-bootstrap-modal