web-dev-qa-db-ja.com

エラー：TypeError：$（...）。dialogは関数ではありません

ダイアログが基本機能として動作するのに問題があります。これが私のjQueryソースのインポートです。

<script type="text/javascript" src="scripts/jquery-1.9.1.js"></script>
<script type="text/javascript" src="scripts/jquery-ui-1.11.1.js"></script>
<script type="text/javascript" src="scripts/json.debug.js"></script>

HTML：

<button id="opener">open the dialog</button>
<div id="dialog1" title="Dialog Title" hidden="hidden">I'm a dialog</div>

<script type="text/javascript">
    $("#opener").click(function() {
            $("#dialog1").dialog('open');
    });
</script>

周りの投稿からは、ライブラリのインポートの問題のように思えます。 JQuery UIコア、ウィジェット、マウス、および位置の依存関係をダウンロードしました。

何か案は？

javascriptjqueryjquery-ui-dialog
49
mzereba

必ずjQuery UIのフルバージョンを挿入してください。また、最初にダイアログを初期化する必要があります。

$(function () {
  $( "#dialog1" ).dialog({
    autoOpen: false
  });
  
  $("#opener").click(function() {
    $("#dialog1").dialog('open');
  });
});
<script src="https://code.jquery.com/jquery-1.11.1.min.js"></script>
 
<script src="https://code.jquery.com/ui/1.11.1/jquery-ui.min.js"></script>

<link rel="stylesheet" href="https://code.jquery.com/ui/1.11.1/themes/smoothness/jquery-ui.css" />

<button id="opener">open the dialog</button>
<div id="dialog1" title="Dialog Title" hidden="hidden">I'm a dialog</div>
80
dashtinejad

_Layout.cshtmlページから次のコードをコメントアウトすると、モーダルポップアップが機能し始めます。

    </footer>

    @*@Scripts.Render("~/bundles/jquery")*@
    @RenderSection("scripts", required: false)
    </body>
</html>
8
Rocky Royalson

何らかの理由でjQueryの2つのバージョンがロードされた場合（推奨されません）、2番目のバージョンから$.noConflict(true)を呼び出すと、グローバルスコープのjQuery変数が最初のバージョンに返されます。

JQueryファイルの古いバージョン（または安定していないバージョン）で問題になる場合があります

ソリューションの使用$.noConflict();

<script src="other_lib.js"></script>
<script src="jquery.js"></script>
<script>
$.noConflict();
jQuery( document ).ready(function( $ ) {
   $("#opener").click(function() {
            $("#dialog1").dialog('open');
    });
});
// Code that uses other library's $ can follow here.
</script>
7
Manoj Patil

JQueryUIをバージョン1.11.4に変更し、jQueryが2回追加されないようにします。

1
crazysj

同様の問題があり、私の場合、問題は異なっていました（Djangoテンプレートを使用しています）。

JSの順序は間違っていました（最初に確認するのはそれがわかっていますが、そうではないことはほぼ確実でしたが、そうでした）。ダイアログを呼び出すjsは、jqueryUIライブラリが呼び出される前に呼び出されました。

私はDjangoを使用しているため、テンプレートを継承し、{{super.block}}を使用してブロックからテンプレートにコードを継承していました。問題を解決したブロックの最後に{{super.block}}を移動する必要がありました。ダイアログを呼び出すjsは、Djangoのadmin.pyのMediaクラスで宣言されました。私はそれを理解するために1時間以上を費やしました。これが誰かを助けることを願っています。

0
Anupam

この問題を取り除くために必要なスクリプトの完全なリストを以下に示します。 （指定されたファイルパスにファイルが存在することを確認してください）

   <script src="@Url.Content("~/Scripts/jquery-1.8.2.js")" type="text/javascript">
    </script>
    <script src="@Url.Content("~/Scripts/jquery-ui-1.8.24.js")" type="text/javascript">
    </script>
    <script src="@Url.Content("~/Scripts/jquery.validate.js")" type="text/javascript">
    </script>
    <script src="@Url.Content("~/Scripts/jquery.validate.unobtrusive.js")" type="text/javascript">
    </script>
    <script src="@Url.Content("~/Scripts/jquery.unobtrusive-ajax.js")" type="text/javascript">
    </script>

また、_Layout.cshtmlに以下のcssリンクを含めると、スタイリッシュなポップアップが表示されます。

<link rel="stylesheet" type="text/css" href="../../Content/themes/base/jquery-ui.css" />
0
josepainumkal

私はラインでこれを経験しました：

$('<div id="editor" />').dialogelfinder({

新しいバージョンがロードされた後に別のコンポーネントが古いバージョンのJQuery（1.7.2）をロードするための呼び出しを挿入しているため、「dialogelfinder is a function」というエラーが表示されました。

2番目のロードをコメントアウトするとすぐに、エラーはなくなりました。

0
Bob Ray