rails6にbootstrapのモーダルを実装した話
プログラミングを本格的にスタートして５ヶ月目に入りましたさかもとです。
今回はrails6に導入したbootstrapとjqueryを合わせてモーダルを表示した際に詰まってしまったので復習の意味も込めてアウトプットしたいと思います。
bootstrapのモーダルとは
こちらは添付したbootstrapの公式サンプル集をみていただければわかりやすいと思います。
ボタンを押すと画面に小さな画面が表示されます。
このようなものです。
ajaxとは
通常、同期処理にて画面全体を更新するものですがajaxを導入すると画面の一部分だけを非同期で更新します。
ajaxについては別記事で詳しく取り上げようと思いますのでそちらをご覧ください。
今回私が詰まってしまったのは以下のような状況です。
これは私がポートフォリオで実装しようとしている一部分なのですがコントローラーにデータを送った後に質問や回答欄を消しその後にモーダルが表示されると言う実装を行っています。
これの何に詰まってしまったのか。
それはbootstrapのサンプルではボタンを押すとすぐにモーダルを出現させる仕組みなのでjqueryなどを裏で動かしているとモーダルが表示されないと言う問題です。
思考
今回に限ってはエラー文などは発生しませんでした。
ただ、画面が暗くなるだけでモーダルが表示されないと言う情報しかありませんでした。
そこでjqueryでモーダルを表示させると言う内容を検索します。
するとおそらくそこまで多くの記事は出てこないと思うのですが下記添付記事が解決に導いてくれると思います。
BootstrapのJavaScriptで、Modalを使うメモ（とても短いサンプル） - Qiita
これに習い、以下のコードを導入してみました。
```
$("#domoNormalModal").modal('show');
```
一つ一つ説明していこうと思います。
$("#domoNormalModal")これは何に対して行う動作なのかを示しています。
今回のモーダルはサンプルからとってきており
```
<div class="modal fade" id="demoNormalModal" tabindex="-1" role="dialog" aria-labelledby="modal" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLongTitle">Modal title</h5>
</button>
</div>
<div class="modal-body">
<h1>なんでモーダルが出たかわからないけど嬉しいピー</h1>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
このような構造になっています。
この先頭行のidが今回のフックになる部分です。
続いてmodal('show');の部分。こちらはそのままの意味で指定したidのモーダルを表示すると言う意味になります。
本来ならこれで表示されるのですが他の処理と組み合わせる際はこのままではうまくいきませんでした。
解決
初めに記述しましたが今回は質問と解答を消してからモーダルを出現させなければなりません。
加えて上記のコードでは出現されない場合があります。
初めの問題に関しては順番を示して上げなければなりません。こちら以前記事にも取り上げたwhenとdoneが必要になります。
二つ目の問題は記述方法です。下記のように記述してあげるとモーダルが出現します。
```
$("demoNormalModel").show();
```
出来上がったコードがこちらです。
// 質問を非表示にしてモーダルを表示
$.when(
$('#q_05').fadeOut(),
$('.progress').fadeOut()
).done(function(){
$("#demoNormalModal").show()
});
一つ目の処理、whenで問題と選択肢をfadeOut=display: noneの状態にし画面から消しています。
二つ目の処理doneでモーダル全体を表示しています。
このように現状の処理とモーダルを組み合わせる場合は順番と動作を明確にする必要があったのです。
最後に
他にも詰まった部分はあったのですが大きな所ではこの点でした。
jqueryはとても便利ですが繊細な点が多々あります。
今後もポートフォリオで詰まった点を順次記録に残し後から見直せるようにしていこうと思います。
