質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
EJS

EJSは、JavaScript用のテンプレートエンジン。HTMLなどのテンプレートテキストにJavaScriptのロジックを記述することができます。また、変数・関数の実行をテンプレートテキスト内に埋め込むことも可能です。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

Express

ExpressはNode.jsのWebアプリケーションフレームワークです。 マルチページを構築するための機能セットおよびハイブリッドのWebアプリケーションを提供します。

Bootstrap

BootstrapはウェブサイトデザインやUIのWebアプリケーションを素早く 作成する可能なCSSフレームワークです。 Twitter風のデザインを作成することができます。

Q&A

解決済

1回答

1301閲覧

サブウィンドウのBootstrap v5.0が動作しない

putaro

総合スコア9

EJS

EJSは、JavaScript用のテンプレートエンジン。HTMLなどのテンプレートテキストにJavaScriptのロジックを記述することができます。また、変数・関数の実行をテンプレートテキスト内に埋め込むことも可能です。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

Express

ExpressはNode.jsのWebアプリケーションフレームワークです。 マルチページを構築するための機能セットおよびハイブリッドのWebアプリケーションを提供します。

Bootstrap

BootstrapはウェブサイトデザインやUIのWebアプリケーションを素早く 作成する可能なCSSフレームワークです。 Twitter風のデザインを作成することができます。

0グッド

0クリップ

投稿2021/10/04 22:46

編集2021/10/04 23:40

前提・実現したいこと

勉強で自作のwebアプリを作成しています。webアプリで設定画面のような物を別のウィンドウで作りたくてjavascriptopenでサブウィンドウを表示させたのですが、サブウィンドウ内で作成したラジオボタンやチェックボックス、フォームなどが動作しません。一緒に入れているjQueryをコメントアウトすると動作し反対にbootstrapをコメントアウトするとjQueryが動きます、両方とも必要なので動作させる方法がしりたいです。

使用環境

  • node.js ver 16.8.0
  • express@4.16.4
  • jquery-3.6.0.min.js
  • bootstrap.min.js ver 5

サブウィンドウ側のコード ※動作しない

ejs

1 <head> 2 <meta charset="UTF-8"> 3 <!--BootstrapのCSS読み込み--> 4 <link rel="stylesheet" href="/plugin/css/bootstrap.min.css" /> 5 <!--両方使うと動作しない--> 6 <!-- BootstrapのJS読み込み --> 7 <script src="/plugin/js/bootstrap.min.js"></script> 8 <script src="/plugin/jquery-3.6.0.min.js"></script> 9 </head>

親ウィンドウのコード ※動作する

こちらも同じ様にBootstrap5jQueryを入れているのですが、問題なく両方動作します

ejs

1 <head> 2 <meta charset="UTF-8"> 3 <title><%= title%></title> 4 <link rel="stylesheet" href="/stylesheets/style.min.css" /> 5 <link rel="stylesheet" href="/stylesheets/style.css" /> 6 <!--JSTreeの設定--> 7 <script src="/plugin/jquery-3.6.0.min.js"></script> 8 <script src="/plugin/jstree.min.js"></script> 9 <!--vega-lite CDN--> 10 <script src="https://cdn.jsdelivr.net/npm/vega@5.20.2"></script> 11 <script src="https://cdn.jsdelivr.net/npm/vega-lite@5.1.1"></script> 12 <script src="https://cdn.jsdelivr.net/npm/vega-embed@6.18.2"></script> 13 <!--BootstrapのCSS読み込み--> 14 <link rel="stylesheet" href="/plugin/css/bootstrap.min.css" /> 15 <!-- BootstrapのJS読み込み --> 16 <script src="/plugin/js/bootstrap.min.js"></script> 17 </head>

エラーメッセージの様なものはなく自分では解決方法が見つけられませんでした。

※追記 サブウィンドウ側のコード

ejs

1<!DOCTYPE html> 2<html> 3 <head> 4 <meta charset="UTF-8"> 5 <!--BootstrapのCSS読み込み--> 6 <!--<link rel="stylesheet" href="/plugin/css/bootstrap.min.css" />--> 7 <!-- BootstrapのJS読み込み --> 8 <!--<script src="/plugin/js/bootstrap.min.js"></script>--> 9 <script src="/plugin/jquery-3.6.0.min.js"></script> 10 </head> 11 <body> 12 <div class="container" id="setting"> 13 <form id="form" name="form"> 14 <div class="form-group"> 15 <label class="form-label">軸の選択</label> 16 <div class="form-check form-check-inline"> 17 <input class="form-check-input" type="checkbox" name="axis" value="x"> 18 <label class="form-check-label" for="checkbox1">x</label> 19 </div> 20 <div class="form-check form-check-inline"> 21 <input class="form-check-input" type="checkbox" name='axis' value="y"> 22 <label class="form-check-label" for="checkbox2">y</label> 23 </div> <div class="form-check form-check-inline"> 24 <input class="form-check-input" type="checkbox" name="axis" value="z"> 25 <label class="form-check-label" for="checkbox3">z</label> 26 </div> 27 </div> 28 <div class="form-group"> 29 <label class="form-label">表示方法の選択</label> 30 <div class="form-check form-check-inline"> 31 <input class="form-check-input" type="radio" name="pattern" value="multi"> 32 <label class="form-check-label" for="inlineRadio1">multi</label> 33 </div> 34 <div class="form-check form-check-inline"> 35 <input class="form-check-input" type="radio" name="pattern" id="inlineRadio2" value="row"> 36 <label class="form-check-label" for="inlineRadio2">row</label> 37 </div> 38 </div> 39 <div class="mb-3"> 40 <div id="button"> 41 <p for="graph">グラフ作成</p> 42 <input type="button" class="btn btn-outline-primary" id="graph" onclick="onGraph()" value="時系列" /> 43 <input type="button" class="btn btn-outline-primary" id="freq" value="周波数" /> 44 </div> 45 </div> 46 <div class="form-group"> 47 <p for="LPF">LPF</p> 48 <input class="form-text" type="text" id="lowpassform" name="lowpassfilter" value=20> 49 <input class="btn btn-outline-primary" type="button" id="filter" value="ローパスフィルター" /> 50 <label id="formhelp" class="form-text">フィルタ[Hz]を入力してください</label> 51 </div> 52 </form> 53 </div> 54 <p>cccc</p> 55 <script> 56 <!--確認用--> 57 $("p").css("color", "red"); 58 </script> 59 <!--イベントのjsファイル--> 60 <script src="/javascripts/readTree.js"></script> 61 </body> 62</html> 63

エラー表示

FireFoxだとサブウィンドウにもWeb開発ツールが開くことができました。しかしイベントと一緒に入れているjsTreeに関するエラーしか報告されていませんでした。

Uncaught TypeError: $(...).jstree is not a function

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

int32_t

2021/10/04 23:28

サブウィンドウ側のすべてのHTMLとJavaScriptのコードを開示してください。 サブウィンドウに対してブラウザの開発者ツールを開くと、コンソールになにかエラーは出ていますか?
putaro

2021/10/04 23:41

回答ありがとうございます。サブウィンドウ側のコード一覧と、firefoxだとコンソールが表示できたので、エラー内容を追記しました。
guest

回答1

0

ベストアンサー

サブウィンドウ側はbootstrapとjqueryをロードする順番が逆ではないですかね。

投稿2021/10/04 23:10

tabuu

総合スコア2449

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

putaro

2021/10/04 23:20

回答ありがとうございます。順番を入れ変えてみたのですが、やはり動作しないです。
tabuu

2021/10/04 23:34

サブウィンドウ側は親ウィンドウ側でロードしているjstree等をロードしていませんが不要なのでしょうか。 ブラウザのconsoleにエラーが表示されていないか確認してみてください。
putaro

2021/10/04 23:43

返信ありがとうございます。firefoxだとコンソールが表示できました。確かにjsTree関連のエラーがありました。これが問題の可能性がありますか。
putaro

2021/10/04 23:57

解決しました。ご提案通り別のイベント用ファイルを作成したらところ両方動作しました。
putaro

2021/10/04 23:59

ありがとうございました。これで進めて行きたいと思います。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問