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

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

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

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

jQuery

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

Bootstrap

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

Q&A

0回答

596閲覧

Boostrapのdialog内でdialogを閉じた後、再度開くとjstreeのチェックボックスが反応しません。

138nono

総合スコア0

JavaScript

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

jQuery

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

Bootstrap

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

0グッド

0クリップ

投稿2020/05/21 07:33

前提・実現したいこと

boostrapでダイアログを作り、ダイアログの内容をjstreeを利用して、チェックボックスのtreeを作っています。

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

初回のdialog表示では、checkboxは反応するのですが、dialogaを閉じた後に、再び表示させるとチェックボックスが反応しなくなってしまいます。 処理としては、詳細ボタンを押した段階で、ajax通信をして、データベースのデータを元にtreeを作る形になっています

該当のソースコード

javaScript

1function treeDataSet() { 2 console.log(objJSON.MUserCategoryAuthority); 3 $("#tree").jstree({ //jstreeの作成 4 "plugins": ["wholerow", "checkbox"], 5 core: { //基本部分の設定 6 "themes": { 7 "icons": false //アイコンを消す 8 }, 9 "multiple": true, //複数選択の設定、falseなら複数選択不可 10 "data": { //ツリーで表示させるデータの設定、構造体か、今回のようなajaxの設定を行う 11 url: "/makeTree", //接続先、今回はデータベースから取得し、加工して送るのでそのURLを指定 12 dataType: "json", //データの型、jsonと指定しておくが、指定しなくてもよさそう 13 data: function (node) { //通信先へ送る値 14 //var nodelist = node.id //node.idで展開元のノードのIDが取得できる、読み込み直後ならおそらくルートである「#」が入る 15 var nodelist = rowData.userID; 16 if (node.id != "#") { //ルートID以外の場合の処理 17 var parentid = node.parent //親ノードのIDを取得 18 //nodelist = node.id //同様の処理をnodelist宣言時にもやっているためおそらく不要 19 while (parentid != "#") { //親IDがルートになるまでループ 20 console.log(parentid) 21 nodelist += "," + parentid //親ノードのIDを「,」で区切りながらつなげていく 22 var newnode = $("#tree").jstree(true).get_node(parentid) //親ノードの情報を新しいノードとして取得 23 parentid = newnode.parent //新しいノードの親ノードのIDを取得 24 } 25 } 26 return { 27 id: nodelist 28 } //idに作ったノードIDのリストを送る 29 }, 30 /**/ 31 }, 32 } 33 }) 34 .bind("changed.jstree", function (event, data) { 35 getdate = $("#tree").jstree(true).get_checked() 36 for (var i in getdate) { 37 if (getdate[i].length < 3) { 38 getdate.splice(i, 1); 39 } 40 } 41 42 }) 43}

html

1<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#modal-1" onclick="treeDataSet()"> 2詳細 3</button> 4 5<!-- Modal --> 6<div class="modal fade" id="modal-1" tabindex="-1"> 7 <div class="modal-dialog" role="document"> 8 <div class="modal-content"> 9 <div class="modal-header"> 10 <h5 class="modal-title" id="exampleModalLabel">サンプル</h5> 11 <button type="button" class="close" data-dismiss="modal" aria-label="Close"> 12 <span aria-hidden="true">&times;</span> 13 </button> 14 </div> 15 <div class="modal-body"> 16 <div id="tree"> 17 <input type="checkbox" param name="changeAuthority" id="G_STR_changeAuthority"> 18 </div> 19 </div> 20 <div class="modal-footer"> 21 <button type="button" class="btn btn-secondary" data-dismiss="modal" aria-hidden="true">閉じる</button> 22 <button type="button" class="btn btn-primary" data-dismiss="modal">保存</button> 23 </div> 24 </div> 25 </div> 26</div>

json

1 [ 2 { 3 "id": "01", 4 "text": "総務部", 5 "parent": "#", 6 "state": { 7 "disabled": false, 8 "selected": false 9 }, 10 "Orginal": { 11 "ODepartmentOrSectionCode": "01", 12 "ODepartmentCode": "-" 13 } 14 }, 15 { 16 "id": "04", 17 "text": "管理部", 18 "parent": "#", 19 "state": { 20 "disabled": false, 21 "selected": false 22 }, 23 "Orginal": { 24 "ODepartmentOrSectionCode": "04", 25 "ODepartmentCode": "-" 26 } 27 }, 28 { 29 "id": "05", 30 "text": "審査第一部", 31 "parent": "#", 32 "state": { 33 "disabled": false, 34 "selected": false 35 }, 36 "Orginal": { 37 "ODepartmentOrSectionCode": "05", 38 "ODepartmentCode": "-" 39 } 40 }, 41 { 42 "id": "03", 43 "text": "監 査室", 44 "parent": "#", 45 "state": { 46 "disabled": false, 47 "selected": false 48 }, 49 "Orginal": { 50 "ODepartmentOrSectionCode": "03", 51 "ODepartmentCode": "-" 52 } 53 }, 54 { 55 "id": "06", 56 "text": "審査第二部", 57 "parent": "#", 58 "state": { 59 "disabled": false, 60 "selected": false 61 }, 62 "Orginal": { 63 "ODepartmentOrSectionCode": "06", 64 "ODepartmentCode": "-" 65 } 66 }, 67 { 68 "id": "02", 69 "text": "出納室", 70 "parent": "#", 71 "state": { 72 "disabled": false, 73 "selected": false 74 }, 75 "Orginal": { 76 "ODepartmentOrSectionCode": "02", 77 "ODepartmentCode": "-" 78 } 79 }, 80 { 81 "id": "0101", 82 "text": "総務課", 83 "parent": "01", 84 "state": { 85 "disabled": false, 86 "selected": false 87 }, 88 "Orginal": { 89 "ODepartmentOrSectionCode": "01", 90 "ODepartmentCode": "01" 91 } 92 }, 93 { 94 "id": "0201", 95 "text": "職員厚生課", 96 "parent": "01", 97 "state": { 98 "disabled": false, 99 "selected": false 100 }, 101 "Orginal": { 102 "ODepartmentOrSectionCode": "02", 103 "ODepartmentCode": "01" 104 } 105 }, 106 { 107 "id": "9901", 108 "text": "その他総務課", 109 "parent": "01", 110 "state": { 111 "disabled": false, 112 "selected": true 113 }, 114 "Orginal": { 115 "ODepartmentOrSectionCode": "99", 116 "ODepartmentCode": "01" 117 } 118 }, 119 { 120 "id": "0103", 121 "text": "監査室", 122 "parent": "03", 123 "state": { 124 "disabled": false, 125 "selected": false 126 }, 127 "Orginal": { 128 "ODepartmentOrSectionCode": "01", 129 "ODepartmentCode": "03" 130 } 131 }, 132 { 133 "id": "0304", 134 "text": "情報システム課", 135 "parent": "04", 136 "state": { 137 "disabled": false, 138 "selected": false 139 }, 140 "Orginal": { 141 "ODepartmentOrSectionCode": "03", 142 "ODepartmentCode": "04" 143 } 144 }, 145 { 146 "id": "0104", 147 "text": " 支払調整課", 148 "parent": "04", 149 "state": { 150 "disabled": false, 151 "selected": false 152 }, 153 "Orginal": { 154 "ODepartmentOrSectionCode": "01", 155 "ODepartmentCode": "04" 156 } 157 }, 158 { 159 "id": "0105", 160 "text": "審査管理課", 161 "parent": "05", 162 "state": { 163 "disabled": false, 164 "selected": false 165 }, 166 "Orginal": { 167 "ODepartmentOrSectionCode": "01", 168 "ODepartmentCode": "05" 169 } 170 }, 171 { 172 "id": "0506", 173 "text": "審査 第五課", 174 "parent": "06", 175 "state": { 176 "disabled": false, 177 "selected": false 178 }, 179 "Orginal": { 180 "ODepartmentOrSectionCode": "05", 181 "ODepartmentCode": "06" 182 } 183 } 184]

試したこと

jsの方で、.modal('hide')やonclickで試してみましたが、解消されませんでした。

補足情報(FW/ツールのバージョンなど)

ブラウザー:chrom,IE11。
boostrapのバージョンは4.0.0で
jQueryのバージョンは3.4.1になります。

宜しければ、ご教示頂けると幸いです。

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

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

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

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

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

guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだ回答がついていません

会員登録して回答してみよう

アカウントをお持ちの方は

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問