jQuery UIを用いて複層のモーダルを実装したい

前提・実現したいこと

お世話になっております。いつも回答いただきとても助かってます。

「求められた操作が完了するまで親画面の操作ができない子画面」を抽象的に「モーダル」として表現します。
具体的にはJQueryUI_min.jsの関数dialog()を使った複層に渡ってサブウインドウを表示する機能を実装しようとしたところ、モーダルが思うように動作しないため、投稿しました。

ややこしい質問になるかとは思いますが、回答いただけたら嬉しいです。よろしくお願いします。

発生している問題・エラーメッセージ

現在、親画面左下の[新規登録]をクリックすると、子画面が現在表示されます。
しかし、この子画面はテキストボックスをクリックすると、さらに1層深いキーボードのモーダルを表示したいですが、そのjsファイル(jquery.keyboard.js)が反映されません。
https://github.com/Mottie/Keyboard/wiki
以上のように、反映されているjsファイルと反映されていないjsファイルがあるので質問を投稿しました。

該当のソースコード

View(Create.cshtml)
現在、動作していないのはおそらく次の１行だけです。
<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

退会済みユーザー

2018/09/27 14:22

<compilation debug="true" ... /> で html ソースを見て外部 .css, .js ファイルへの参照はどうなってますか？　必要な .css, .js ファイルをダウンロードするための <link ... タグや <script ... タグはレンダリングされてますか？

退会済みユーザー

2018/09/28 01:58 編集

jQuery UI の Dialog と書いてありますが、2 つめの画像のキーボードは違いますよね。その他、Albatross, js, SetUp フォルダ等に多々ある .js ファイルなどがどう絡んでいるのか自分は分かりません。最低限どれをダウンロードできるようにすればいいか書いてください。

退会済みユーザー

2018/09/28 01:23

Visual Studio のテンプレートで生成したプロジェクトにはもともと含まれてない（少なくとも VS2015 には）.js ファイルが多々ありますが、それらは質問者さんが自分の目的を果たすため自分の意思で追加したのではないのですか？なのに前のスレッドで「質門者さんの言うモーダルとは何？」と聞かれて分からなかったのが解せません。質問者さんはどういう立場の人なのですか？　他人の作ったものを保守とかで手を加えている？

x_x

2018/09/28 03:25

「そのjsファイル(jquery.keyboard.js)が反映されません」というのは何で判断したのでしょうか？　画像は実際のスクリーンショットではなく加工したものですか？

退会済みユーザー

2018/09/28 04:14

keyboard.js でググってみると https://webkaru.net/jquery-plugin/keyboard/ という記事があって、それによると必要な .js ファイルは jquery.js, jquery-ui.js, jquery.keyboard.js の 3 つ、.css ファイルは jquery-ui.css, keyboard.css の 2 つでよさそうに見えます。確認してください。それ以外に必要なものがあれば書いてください。

pomu.pomupomu

2018/09/28 04:47

すみません。私用が立て込んでて返信が遅れます。申し訳ありません。

pomu.pomupomu

2018/09/28 04:55

>>SurferOnWwwさんモーダルについてはモーダルという単語の定義(親画面をロックする子画面)のことを聞かれているのだと錯乱して答えました。申し訳ありません。自分の目的を果たすために友人に手伝ってもらいながら入れました。jQueryについては友人に手伝ってもらい書いてもらいました。訳あって、指南をここ以外に頼る場所がどこにもなく0からASPを独学で作成している、という立場です。誰かの何かの保守等ではなく、自分で今までの質問投稿全部0からやっています。

pomu.pomupomu

2018/09/28 04:57

また、何故追加したファイルがあるのか、ということですが、jQueryのバージョンの差異によって動かなかった、ということがないようにHTMLで動いたものを入れました。(jQueryのバージョンによる動作差異がブラウザ環境以外にもあるかもしれないと未熟ゆえ考えました。)

pomu.pomupomu

2018/09/28 04:59

keyboard.js についてこちらでも読み、調査してみてます。記事をわざわざありがとうございます。

pomu.pomupomu

2018/09/28 05:06

>> x_x さん現在スクショを挙げているCreate.cshtmlファイルはスキャフォールディングした時の出来合いのコードに自作したHTMLファイルと同じ見かけになるようにコードを書き直す作業をしたものです。HTMLの時は、郵便番号や作業時間等の数字を入力するテキストボックスをクリックするとキーボードがモーダルとして出現するのですが、<script src="@Url.Content("~/Scripts/jquery.keyboard.js")"></script>の書き方の時点では、(jquery.keyboard.js)で出現するキーボードのみが動作していなかったため、「そのjsファイル(jquery.keyboard.js)が反映されません」という判断をしました。

pomu.pomupomu

2018/09/28 05:08

>> SurferOnWwwさん　申し訳ありません。最初の質問2件を読み落としていました。返信します。

x_x

2018/09/28 05:09

開発者ツールのコンソールに何かエラーは出ていないでしょうか？

退会済みユーザー

2018/09/28 05:26 編集

> 自分の目的を果たすために友人に手伝ってもらいながら入れました。jQueryについては友人に手伝ってもらい書いてもらいました。 ← 質問者さん自身も何がどうなっているか分からないという状況のようですが、それではここに書いてあること以外は知り得ない第三者にはもっと分かりません。なので話は通じません。一度、Visual Studio のテンプレートを利用してまっさらなプロジェクトを作って、それに jQuery UI Dialog や Keyboard だけを組み込むことをお勧めします。そうしてもらえないと既存のコードは何も知らない回答者・閲覧者はフォローしていけません。

pomu.pomupomu

2018/09/28 05:34

>> x_xさん VS2017のコンソールであっているでしょうか？エラーは<script>を用いてjsファイルを参照した場合も、BundleConfigを利用した場合も出てないです。一方、Chromeのディべロッパーツールのエラーを参照した場合、<script>を用いてjsファイルを参照した場合は追記した画像のようなエラーとなっているものの何故かjsが効いています。BundleConfigを利用した場合は全てのjsファイルについてReferenceErrorが起きています。

pomu.pomupomu

2018/09/30 05:17 編集

>> SurferOnWwwさんレンダリングの是非について調べられる方法があることを知りませんでした。やってみます。しばらくお時間をください。 2つ目の画像のキーボードは、①***.js ②jQuery.keyboard.js ③jquery-ui-1.12.1.min.js ④jquery-3.3.1.min.js ⑤***.js がダウンロードできれば良いです。

pomu.pomupomu

2018/09/28 05:45 編集

私が知らないだけで、他の人は知っている簡単なことがBundleConfig等にあるのではないか、等と考え安易な質問投稿には知ってしまい申し訳ありません。より単純な状態のもので同様の手順を踏まえ簡単なものを試して差異を考察してみようと思います。

x_x

2018/09/28 05:46

addTypingでエラーになっていますが、これはVirtual Keyboardの拡張jquery.keyboard.extension-typing.min.jsを読んでいない時に起こっていたと思います。Virtual Keyboardに同梱されているのでちゃんと読ませてみてください。

pomu.pomupomu

2018/09/28 05:48

わかりました。ダウンロードして読み込ませてみます。(申し訳ありません、次の返信は夕方ないし夜か日をまたぐことになるかもしれません。)

退会済みユーザー

2018/09/28 05:49

そうしてください。質問に書かれたエラーメッセージを見る限りですが、メチャクチャになっていてそれを解決するのは対症療法は止めた方がよさそうです。MVC5 のやり方で、基本に忠実に、.js, .css 関係の設定をすべて見直すことをお勧めします。対症療法で今回の問題だけは解決できても、また同じような問題で悩むことになると思いますので。

退会済みユーザー

2018/09/29 07:47

> 2つ目の画像のキーボードは、①Albatross.js ②jQuery.keyboard.js ③jquery-ui-1.12.1.min.js ④jquery-3.3.1.min.js ⑤setup.js がダウンロードできれば良いです。 ← Albatross.js, setup.js とは何ですか？　試してみましたが、先に紹介した記事 https://webkaru.net/jquery-plugin/keyboard/ の通り、.js ファイルは jquery.js, jquery-ui.js, jquery.keyboard.js の 3 つ、.css ファイルは jquery-ui.css, keyboard.css の 2 つで質問の 2 つめの画像の通り表示できますけど？　余計なものを入れるとそれが衝突してトラブルということはよくあることですよ。

pomu.pomupomu

2018/09/29 09:22

>> x_x さん　addTyping行は消しても良いものか、拡張機能は使わないから挿さないのか、使わなくても挿入すべきなのか、わからなかったので助言、とても助かりました。ありがとうございます！とても対症療法な話になってしまう気がするんですが、何故か、addTyping()についてちゃんとやってみると、計算機のキーボードがちゃんと表示されました！ありがとうございました！！

pomu.pomupomu

2018/09/30 03:37 編集

>>SurferOnWwwさん他の方の開発状況等を見たことないので普通なのかと思ってましたが、メチャクチャなのですね・・・。いったんフォルダ周りの整理等に尽力します。 Albatross.js, setup.jsは「ここのHTMLのタグの部分にキーボードが反映されるようにしてほしい。」といったHTML側のid等のの指定をしているjsファイルのため、必要としていました。余計なものを入れると干渉するというのはよくあるとは知りませんでした。今後、いらないものは入れないしできるだけ減らせるファイルは減らすようにします。

退会済みユーザー

2018/10/01 23:49

質問、コメントを後から書き換えましたね？それは止めてください。後から検索などでここにたどり着いて初めて読む人にとって話が繋がらなくなります。ここは質問者さん専用のQ&Aサイトではありません。

pomu.pomupomu

2018/10/10 05:30 編集

はい。以降気をつけます。

行動規範の内容に同意します

回答1件

ベストアンサー

上の質問に対する私のコメントで、

試してみましたが、先に紹介した記事 https://webkaru.net/jquery-plugin/keyboard/ の通り、.js ファイルは jquery.js, jquery-ui.js, jquery.keyboard.js の 3 つ、.css ファイルは jquery-ui.css, keyboard.css の 2 つで質問の 2 つめの画像の通り表示できますけど？

と書きましたが、どのようにしたかを書いておきます。

(1) jQuery UI は NuGet を使って、Keyboard 関係はダウンロードしてプロジェクトのフォルダにコピー。

(2) それをベースに BundelConfig.cs に以下の通りコードを追加。

using System.Web;
using System.Web.Optimization;

namespace Mvc5App4
{
    public class BundleConfig
    {
        public static void RegisterBundles(BundleCollection bundles)
        {
            bundles.Add(new ScriptBundle("~/bundles/jquery").Include(
                        "~/Scripts/jquery-{version}.js"));

            // jQuery UI 用 .js
            bundles.Add(new ScriptBundle("~/bundles/jqueryui").Include(
                        "~/Scripts/jquery-ui-{version}.js"));

            // Keyboard 用 .js
            bundles.Add(new ScriptBundle("~/bundles/keyboard").Include(
                        "~/Scripts/keyboard/jquery.keyboard.js"));

            bundles.Add(new ScriptBundle("~/bundles/jqueryval").Include(
                        "~/Scripts/jquery.validate*"));

            bundles.Add(new ScriptBundle("~/bundles/modernizr").Include(
                        "~/Scripts/modernizr-*"));

            bundles.Add(new ScriptBundle("~/bundles/bootstrap").Include(
                      "~/Scripts/bootstrap.js",
                      "~/Scripts/respond.js"));

            bundles.Add(new StyleBundle("~/Content/css").Include(
                      "~/Content/bootstrap.css",
                      "~/Content/site.css"));

            // jQuery UI 用 .css
            bundles.Add(new StyleBundle("~/Content/themes/base/css").Include(
                        "~/Content/themes/base/jquery-ui.css"));

            // Keyboard 用 .css
            bundles.Add(new StyleBundle("~/Content/keyboard/css").Include(
                        "~/Content/keyboard/keyboard.css"));
        }
    }
}

(3) 自動生成されている About.cshtml に <button id="buttonShowDialog">ダイアログ表示</button> から下のコードを追加。About.cshtml はレイアウトページ _Layout.cshtml を使っていることに注意。

@{
    ViewBag.Title = "About";
}

<h2>@ViewBag.Title.</h2>
<h3>@ViewBag.Message</h3>

<p>Use this area to provide additional information.</p>

<button id="buttonShowDialog">ダイアログ表示</button>

<div id="dialog" title="挿入する文字列">
    <p>
        ここに入力:<br />
        <input type="text" id="textbox" size="30" />
    </p>
</div>

@section Scripts {
    @Scripts.Render("~/bundles/jqueryui")
    @Styles.Render("~/Content/themes/base/css")
    @Styles.Render("~/Content/keyboard/css")
    @Scripts.Render("~/bundles/keyboard")

<script type="text/javascript">
    //<![CDATA[
    $(function () {
        $("#dialog").dialog({
            autoOpen: false,
            modal: true,
            resizable: false,
            buttons: {
                '閉じる': function () {
                    $(this).dialog('close');
                }
            }
        });

        $('#buttonShowDialog').click(function () {
            $('#dialog').dialog('open');
        });

        $('#textbox').keyboard({
            layout: 'num',
            openOn: 'click'
        });
    });
    //]]>
</script>
}

(4) ASP.NET がレンダリングする html ソースの link 要素、script 要素は以下のようになります。赤枠で囲ったものがレイアウトページ _Layout.cshtml に設定されているもの、青枠で囲ったものが About.cshtml で設定されているもの。

(5) ブラウザ（この例では IE11）上では期待通り表示されます。

投稿2018/09/29 08:38

退会済みユーザー

総合スコア0

pomu.pomupomu

2018/09/29 09:55

丁寧に僕が求めてやまないものを実演した軌跡を残していただきありがというございます。 BundelConfig.cs の記述の全容についても正直自信がなかったので、BundelConfig.cs を触る際はこれを手本にします。また、青枠で囲った部分について、正しく動作している場合はどのようにレンダリングされるのだろうか、という疑問を抱いてたのでとても助かります。本当に丁寧にありがとうございました。

行動規範の内容に同意します