5-15 bootcssのmodalおよびjquery uiのdatepicker小記

最近会社はbootstrapとJquery UIでプロジェクトをしていて、OAのようなものが先日問題にぶつかったので、記録しておきます.読者が私と同じ問題に遭遇しないことを望んでいます.
　　1 datepicker.自分でダウンロードしたbootcssでdatepickerが見つからず、Jquery UIのdatepickerを選びました.使用するときは2つの問題に注意してください.
ページ上の複数のinput、idがいずれもinput 1である場合、ページの読み込みが完了すると$('#input 1')が呼び出される.datepicker(option)は、最初のdatepickerへのフォーマットに成功したのは、datepickerのみである.例えば$('input')のようなセレクタを変えると.datepicker(option)では、それぞれがdatepickerの選択効果をトリガーできますが、後の要素が選択された日付以降は最初の上にのみ表示されます.
2 bootstrapの中のmodal.1つのbuttonでmodalをトリガするとき、2つの属性を忘れないでください.1 data-toggle='modal'②data-target='#myModal';ちなみにbuttonのtypeプロパティのデフォルトはsubmitなので、buttonに値を付けてください.そしてmodalをグレーゾーンにポイントしたときに閉じたくない場合は、modalのdata-backdrop='static'を設定してください.またmodalにdatepickerが入っている場合、デフォルトではinputをクリックしたときにdatepickerの日付選択ボックスを表示できません.ソリューションはstackoverflowにあります.リンクスタンプここ.
キーjsコードは次のとおりです.

 1 // Since confModal is essentially a nested modal it's enforceFocus method
 2 // must be no-op'd or the following error results 
 3 // "Uncaught RangeError: Maximum call stack size exceeded"
 4 // But then when the nested modal is hidden we reset modal.enforceFocus
 5 var enforceModalFocusFn = $.fn.modal.Constructor.prototype.enforceFocus;
 6 
 7 $.fn.modal.Constructor.prototype.enforceFocus = function() {};
 8 
 9 $confModal.on('hidden', function() {
10     $.fn.modal.Constructor.prototype.enforceFocus = enforceModalFocusFn;
11 });
12 
13 $confModal.modal({ backdrop : false });

その注釈については、modal表示時にmodalのenforceFocusメソッドを空にしなければならない(いわゆるno-opでなければ異常がある).そして隠れた時に復元します.それから自分で使うときはバージョンが違うと思いますので、少し修正します.$confModalは自分用のmodalです.
キーコードは次のとおりです.

1 $.fn.modal.Constructor.prototype.enforceFocus = function () { };
2 var $configModal = $(".temple");
3 $configModal.on('hide.bs.modal', function () {
4     $.fn.modal.Constructor.prototype.enforceFocus = enforceModalFocusFn;
5 });

modalのイベント名を変更して、ドキュメントを調べて、上に与えられたイベント名は'hide.bs.modal'.bootcssを使っている場合は、上の名前がhideなのか、2つのjsファイルが違います.またbootstrapがmodalをトリガーするときに$confModalを書く必要はありません.modal({ backdrop : false });buttonのステップでイベントバインドが完了するはずです.
　　
上の2点は分かりましたが、ページを作るときにmodalの中のdatepickerが「正常に表示できない」、そして「日付が選択できない問題」が表示されました.その後、このmodalが存在するページにPartialViewとmodel自身のmodal-contentがあるPartialViewが同一であり、Idの重複を招いていることが分かった.外のPartialViewは通常は表示されないので、問題の原因がすぐに分からず、時間がかかりました.幸いにも今解決した.解決策としては、modalが表示されたときにmodalの要素のidに特定の接頭辞を付けることです.接頭辞をつけることについて、注意しなかったからです.find()メソッドは、子孫要素、すなわち$('

a

')を調べる.find('li')実はfindは何もなくて、自分を穴に入れました...