web-dev-qa-db-ja.com

TypeError：$（...）。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

どうすればこれを修正できますか？

javascriptjquerycsstwitter-bootstraptwitter-bootstrap-2
78
user61629

コメントで強調したいのはmwebber：

jQueryが2回含まれていないかどうかも確認する

:)

それは私にとって問題でした

138
adsurbum

このエラーは、実際にはmodal関数を呼び出す前にブートストラップのjavascriptを含めないことが原因です。モーダルは、jQueryではなくbootstrap.jsで定義されています。ブートストラップは実際にはmodal関数を定義するためにjQueryを必要とするので、ブートストラップのjavascriptをインクルードする前にjQueryをインクルードすることが重要です。このエラーを回避するには、modal関数を呼び出す前に、必ずjQuery、次にブートストラップのjavascriptを含めてください。私は通常、私のヘッダタグで以下のことを行います：

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

Jqueryとブートストラップをリンクしたら、jqueryとブートストラップのScriptタグのすぐ下にコードを書きます。

$(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>
27
Rahul Mehra

あなたの<script src="~/Scripts/jquery[ver].js"></script>のjquery .remove AjaxUpdate/get_modalを介してロードされるAjaxライブラリがhtmlに含まれていないことを確認してください。

5
Moslem7026

他の可能性としては、あなたが含む他のスクリプトの一つがJQueryを含むか$と衝突することによって問題を引き起こしているということです。他の含まれているスクリプトを削除して、問題が解決するかどうかを確認してください。私の場合は、不必要に1つのコードを何時間も検索した後、バイナリ検索パターンでスクリプトを削除し、すぐに問題のあるスクリプトを発見しました。

5
brad12s

resources\assets\js\bootstrap.jsの下の行を修正することで、Laravelでこの問題を解決しました

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

に

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

私にとっては、//= require jqueryの後に//= require bootstrapがありました。ブートストラップの前にjqueryを移動すると、すべてが機能しました。

1
Micah Rothenbuhler

私の場合は、Railsフレームワークを使用し、jQueryを2回必要とします。それが理由だと思います。

まずapp/assets/application.jsファイルを確認してください。 jqueryとbootstrap-sprocketsが表示される場合は、2番目のライブラリrequireは必要ありません。ファイルは次のようになります。

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

初心者が複数のチュートリアルコード例を使用すると、この問題が発生することがあると思います。

1
B Liu

実行する

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

プロジェクト内でAngularプロジェクトに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>

bodyの終了タグの直前のindex.html内。

また、Angular 2-7を実行している場合は、tsconfig.app.jsonファイルのtypesフィールドに "jquery"を含めます。

これにより、Angularプロジェクト内の 'modal'と '$'のすべてのエラーが削除されます。

0
cyperpunk

私は同じ問題を抱えていました。変化

$.ajax(...)

に

jQuery.ajax(...)

動作しませんでした。しかし、私はjQueryが2回含まれていたを見つけ、それらのうちの1つを削除することで問題が解決しました。

0
Cristian Merli

私はこのように使うことで反応してこの問題を解決しました。

window.$('#modal-id').modal();
0
Zaman Afzal

私の経験では、たぶんそれはjqueryバージョン（複数のバージョンを使用して）の衝突で起こりました。

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