前提・実現したいこと
お世話になっております。いつも回答いただきとても助かってます。
「求められた操作が完了するまで親画面の操作ができない子画面」を抽象的に「モーダル」として表現します。
具体的にはJQueryUI_min.jsの関数dialog()を使った複層に渡ってサブウインドウを表示する機能を実装しようとしたところ、モーダルが思うように動作しないため、投稿しました。
ややこしい質問になるかとは思いますが、回答いただけたら嬉しいです。よろしくお願いします。
発生している問題・エラーメッセージ
現在、親画面左下の[新規登録]をクリックすると、子画面が現在表示されます。
しかし、この子画面はテキストボックスをクリックすると、さらに1層深いキーボードのモーダルを表示したいですが、そのjsファイル(jquery.keyboard.js)が反映されません。
https://github.com/Mottie/Keyboard/wiki
以上のように、反映されているjsファイルと反映されていないjsファイルがあるので質問を投稿しました。
該当のソースコード
View(Create.cshtml)
現在、動作していないのはおそらく次の1行だけです。
<script src="@Url.Content("~/Scripts/jquery.keyboard.js")"></script>
c#
1@section Header 2{ 3 <script src="@Url.Content("~/Scripts/js/jquery-3.3.1.min.js")"></script>@**@ 4 <script src="@Url.Content("~/Scripts/jquery-ui-1.12.1.min.js")"></script> 5 <script src="@Url.Content("~/Scripts/jquery.keyboard.js")"></script></script>@**@ 6 <script src="@Url.Content("~/Scripts/js/common.js")"></script>@**@ 7 <script src="@Url.Content("~/Scripts/js/respond.js")"></script>@**@ 8 <!--[if lt IE 9]--> 9 <script src="~/Scripts/js/html5shiv.min.js"></script> 10 <!--[endif]--> 11 12}
試したこと
該当のソースコードのようにして記述するのは、MVC3以前までのことだとわかったため、次のようにBundle機能を利用して記述し直しました。
すると、同様にBundle機能を用いて記述し直したCSSファイルは動作していることが確認できましたが、jsファイルは何一つ動作をせず、原因が掴めない次第です。
view (Create.cshtml)
c#
1@section Header 2{ 3 @Styles.Render("~/Content/themes/base/jquery-ui") 4 5 @Scripts.Render("~/Scripts/jquery") 6 @Scripts.Render("~/Scripts/jquery-ui") 7 @Scripts.Render("~/Scripts/keyboard") 8 @Scripts.Render("~/Scripts/js/common") 9 @Scripts.Render("~/Scripts/js/respond") 10 11}
c#
1 public class BundleConfig 2 { 3 public static void RegisterBundles(BundleCollection bundles) 4 { 5 // css 読込 6 // 初期化 7 bundles.Add(new StyleBundle("~/Content/Css/fonts").Include( 8 "~/Content/Css/fonts.css")); 9 10 bundles.Add(new StyleBundle("~/Content/Css/reset").Include( 11 "~/Content/Css/reset.css")); 12 13 bundles.Add(new StyleBundle("~/Content/Css/style").Include( 14 "~/Content/Css/style.css")); 15 16 bundles.Add(new StyleBundle("~/Content/Css/response").Include( 17 "~/Content/Css/response.css")); 18 19 // jQuery等導入 20 21 bundles.Add(new StyleBundle("~/Content/themes/base/jquery-ui").Include( 22 "~/Content/themes/base/jquery-ui.min.css")); 23 24 25 26 27 // jsファイル読み込み 28 // jQuery等導入 29 30 bundles.Add(new ScriptBundle("~/Scripts/jqueryval").Include( 31 "~/Scripts/jquery.unobtrusive*", 32 "~/Scripts/jquery.validate*")); 33 34 bundles.Add(new ScriptBundle("~/Scripts/jquery-ui").Include( 35 "~/Scripts/jquery-ui-{version}.js")); 36 37 bundles.Add(new StyleBundle("~/Content/jqueryui").Include( 38 "~/Content/themes/base/minified/jquery-ui.min.css")); 39 40 bundles.Add(new ScriptBundle("~/Scripts/js/html5shiv").Include( 41 "~/Scripts/js/html5shiv.min.js")); 42 43 bundles.Add(new ScriptBundle("~/Scripts/keyboard").Include( 44 "~/Scripts/jquery.keyboard.js")); 45 46 // 自作ファイルの読み込み 47 48 49 50 bundles.Add(new ScriptBundle("~/Scripts/js/common").Include( 51 "~/Scripts/js/common.js")); 52 53 bundles.Add(new ScriptBundle("~/Scripts/js/respond").Include( 54 "~/Scripts/js/respond.js")); 55 56
ちなみにこのようにBundleConfig.csにjsファイルの設定をかいても反応ありませんでした。
c#
1 bundles.Add(new ScriptBundle("~/bundles/Scripts/jquery").Include( 2 "~/Scripts/jquery-{version}.js"));
_Layout.cshtml
c#
1<head> 2 @Styles.Render("~/Content/css") 3 @Styles.Render("~/Content/jqueryui") 4 @Scripts.Render("~/bundles/modernizr") 5 @RenderSection("Header", false) 6</head> 7<body> 8 @Scripts.Render("~/bundles/jquery") 9 @Scripts.Render("~/bundles/jqueryui") 10 @Scripts.Render("~/bundles/bootstrap") 11 @RenderSection("scripts", required: false) 12</body> 13</html>
補足情報(FW/ツールのバージョンなど)
VS2017
Windows7
.Net Framework 4.6.1
MVC5
回答1件
あなたの回答
tips
プレビュー