Question

我在xpages中创建了一个主题（其中包含jquery和bootstrap文件）。我创建了一个bootstrap模式，我动态地在模态体中加载另一个页面。以下是我调用bootstrap modal

的主页面代码

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

以下是我的自定义控制代码（类似于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>

现在，当我点击按钮调用对话框时，我收到许多客户端错误，说多次定义，文件加载多次等。这是因为当我加载实际页面时jquery加载了两次，当我调用bootstrap模式时它再次加载。有没有办法我可以在页面中加载jquery单一时间而不在模态中使用iframe？

避免在调用bootstrap模态/对话框时多次加载jquery

0 个答案: