ブートストラップを呼び出す際にjqueryを複数回ロードすることを避けるモーダル/ダイアログ

Question

私はxpages（jqueryとブートストラップファイルを持つ）でテーマを作成しました。私はブートストラップモーダルを作成し、モーダルの本体に別のページを動的にロードしています。私はクリックでダイアログを呼び出すとき 後は今（MainFormをでサブフォームのようなものです）私のカスタム制御コード

<?xml version="1.0" encoding="UTF-8"?> 
<xp:view xmlns:xp="http://www.ibm.com/xsp/core" dojoParseOnLoad="false" 
dojoTheme="false" dojoForm="false"> 





<xp:div id="test"> 
    <xp:this.attrs> 
     <xp:attr name="role" value="dialog"></xp:attr> 
    </xp:this.attrs> 

    <xp:div> 

     <div class="modal-content"> 
      <div> 

       <button type="button" class="close" 
        data-dismiss="modal" aria-hidden="true"> 
        × 
       </button> 
       <h4> 

       </h4> 

      </div> 

      <div class="modal-body"> 

      </div> 

       <div styleClass='modal-footer'> 

       </div> 

     </div> 

    </xp:div> 
</xp:div> 
<xp:eventHandler event="onClientLoad" submit="false"> 
    <xp:this.script><![CDATA[jQuery(document).ready(function() {  

});]]></xp:this.script> 
</xp:eventHandler> 

<xp:scriptBlock id="scriptBlock"> 
    <xp:this.value><![CDATA[ 

    // Fill modal with content from link href 
    var id="#{javascript:var id=compositeData.dialogid; getClientId(id)}" 


     x$(id).on("show.bs.modal", function(e) { 
      alert('fires immediately when the show instance method is 
    called') 
      $(this).find(".modal-body").load('./LoginAsAdmin.xsp'); 
     }); 

     x$(id).on('shown.bs.modal', function (e) { 
      //var test = #{javascript:print('==========server side')}; 
      alert('fired when the modal has been made visible') 
     }) 

     x$(id).on('hide.bs.modal', function (e) { 
      alert('fired immediately when the hide instance method has been 
called') 
     }) 

     x$(id).on('hidden.bs.modal', function (e) { 
      alert('fired when the modal has finished being hidden from the 
user ') 
      $(this).removeData('bs.modal'); 
     }) 

     x$(id).on('loaded.bs.modal', function (e) { 
      alert('fired when the modal has loaded content') 
     }) 


]]></xp:this.value> 
</xp:scriptBlock> 

</xp:view> 

私は、次のブートストラップモーダル

x$("#{id:test}").modal("show") 

を呼んでいるメインページのコードです私はブートストラップモーダルを呼び出すとき、私は実際のページをロードし、それが再びロードされるときにjqueryが2回ロードされたためです。私はモーダル内でiframeを使わずにページ内でjqueryを一度にロードできる方法はありますか？

Answer 1

.load()機能は、いくつかの異なる署名を持っている（方法あなたは別のことを行うためにそれを呼び出すと異なるパラメータを渡すことができます）

あなたはセクションを見れば

ロードページフラグメント

.load（）メソッドは、$ .get（）と異なり、挿入するリモートドキュメントの一部を指定することができます。これは、urlパラメータの特殊な構文で実現されます。 1つ以上のスペース文字が文字列に含まれている場合、最初のスペースに続く文字列の部分は、読み込まれるコンテンツを決定するjQueryセレクタと見なされます。

私たちは、フェッチされた文書の一部だけを使用するように上記の例を修正することができます：

$("#result").load("ajax/test.html #container");

これは、あなたがそう望むもののようです。あなたが取得しようとして表示しているフォームは、headタグのように、ターゲット要素の外にある依存関係（JSやCSS）を持っている場合は、よ、

$(this).find(".modal-body").load('./LoginAsAdmin.xsp #my-form-containg-element');

：だからあなたのような何かを行うことができますそれらのリソースを親ページに含めるか、divの代わりにiframeにターゲットURLを読み込んで表示する必要があります