XPage和Twitter Bootstrap Modal在使用SSJS时无法正常工作

Question

只需按照网站中的示例，就可以很容易地在XPage中使用Twitter Bootstrap模式。但是，如果要在显示模式之前使用SSJS影响模态的内容，它似乎不起作用。它似乎闪现，通常只显示背景。

使用XPages Full或Partial刷新似乎存在问题。

我尝试过“正常”工作，我尝试使用jQuery和远程服务来改变，但没有运气。

以下是远程服务的代码。

有关如何在显示对话框之前影响或刷新模态内容的任何示例都将不胜感激。

<?xml version="1.0" encoding="UTF-8"?>
<xp:view xmlns:xp="http://www.ibm.com/xsp/core"
xmlns:xc="http://www.ibm.com/xsp/custom"
xmlns:xe="http://www.ibm.com/xsp/coreex">
<xc:layout_Header></xc:layout_Header>
<xp:link escape="true" text="Link" id="link1" value="#myModal">
    <xp:this.attrs>
        <xp:attr name="role" value="button"></xp:attr>
        <xp:attr name="data-toggle" value="modal"></xp:attr>
    </xp:this.attrs>

</xp:link>
<xp:br></xp:br>

<xp:panel id="myPanel">
    <xc:bs_Modal idName="myModal">
        <xp:this.facets>
            <xp:panel xp:key="facet_1">
                My Dialog
                <xp:br></xp:br>
                <xp:br></xp:br>
                Time



                <xp:text escape="true" id="computedField1"
                    value="#{viewScope.vsTime}">
                    <xp:this.converter>
                        <xp:convertDateTime type="both"></xp:convertDateTime>
                    </xp:this.converter>
                </xp:text>
            </xp:panel>
        </xp:this.facets>
    </xc:bs_Modal>
</xp:panel>
<xp:br></xp:br>


<xe:jsonRpcService id="jsonRpcService1" serviceName="testService">
    <xe:this.methods>
        <xe:remoteMethod name="setTime">
            <xe:this.script><![CDATA[viewScope.put("vsTime", @Now())]]></xe:this.script>
        </xe:remoteMethod>
    </xe:this.methods></xe:jsonRpcService>
<xp:br></xp:br>
<xp:scriptBlock id="scriptBlock1">
    <xp:this.value><![CDATA[$('#myModal').on('show', function () {
testService.setTime();
var id =  "#{id:myPanel}"
XSP.partialRefreshGet(id)
})]]></xp:this.value>
</xp:scriptBlock></xp:view>

Answer 1

由于它已经完全与XPage集成，我将使用扩展库中的<xe:dialog>来修改它（添加/删除类）以使其看起来像Bootstrap模式。

以下是一些示例代码，可帮助您入门：

<xe:dialog id="dialog1" title="Dialog title" styleClass="modal" style="margin-left: inherit">

    <xe:this.onShow>
        <![CDATA[//make the dialog look like a Bootstrap dialog using some jQuery magic

    //add the modal-header class to the title bar
    var titleBar = $(".modal .dijitDialogTitleBar").addClass("modal-header");

//replace title node (by default it's a span)
var titleNode = $(".dijitDialogTitle", titleBar);
var title = titleNode.text();
titleNode.remove();

//add a class to the close icon
$(".dijitDialogCloseIcon", titleBar).removeClass("dijitDialogCloseIcon").addClass("close");

//add a new h3 node with the title 
titleBar.append("<h3>" + title + "</h3>");
        ]]>
    </xe:this.onShow>

    <xe:dialogContent id="dialogContent1" styleClass="modal-body">
        dialog content here
    </xe:dialogContent>

    <xe:dialogButtonBar id="dialogButtonBar1" styleClass="modal-footer">
        <xp:button value="Close" id="button2"></xp:button>
    </xe:dialogButtonBar>

</xe:dialog>

Answer 2

在触发模态之前使模态内容可用，在显示模态对话框之后发生事情，我们可以使用回调函数选项。

var id =  "#{id:myPanel}"
XSP.partialRefreshGet(id,{
    onComplete: function(){
    $('#myModal').modal('show');
    }
});

Answer 3

我在复杂的问题上解决了这个问题。部分刷新后，在存储问题后存在NotesXspDocument。

它对我有用，也许对你有帮助。

1）在WebContent文件夹中为Dialog创建模板html，例如WebContent / templates / CustomDialog.html：

<div class="modal fade" tabindex="-1" waiRole="dialog" waiState="labelledby-${id}_title" data-backdrop="static" data-keyboard="false">
    <div role="document" class="modal-dialog">
        <div class="modal-content">
            <div dojoAttachPoint="titleBar" class="modal-header">
                <span dojoAttachPoint="closeButtonNode">
                    <button type="button" title="${buttonCancel}" class="close" aria-hidden="true" dojoAttachEvent="onclick: onCancel">&times;</button>
                </span>
                <h4 class='modal-title' dojoAttachPoint="titleNode" id="${id}_title"></h4>
            </div>
            <div dojoAttachPoint="containerNode"></div>
        </div>
    </div>
</div>

2）使用代码创建csjs库：

dojo.provide("extlib.responsive.dijit.xsp.bootstrap.Dialog");
dojo.require("extlib.dijit.Dialog");
dojo.declare(
        "extlib.responsive.dijit.xsp.bootstrap.Dialog",
        extlib.dijit.Dialog,
        {
            baseClass: "",
            templateString: dojo.cache(new dojo._Url("templates/CustomDialog.html")),
            draggable: false,
            autofocus:false,
            iframePost: false,
            modalStyleClass: "",
            show: function() {
            if(this.open){
                return;
            }

            if(!this._started){
                this.startup();
            }

            // first time we show the dialog, there's some initialization stuff to do
            if(!this._alreadyInitialized){
                this._setup();
                this._alreadyInitialized = true;
            }

            // Recenter Dialog if user scrolls browser.  Connecting to document doesn't work on IE, need to use window.
            var win = dojo.window.get(this.ownerDocument);
            //this._modalconnects.push(dojo.on(win, "scroll", dojo.hitch(this, "resize")));
            this._modalconnects.push(dojo.on(this.domNode, "keydown", dojo.hitch(this, "_onKey")));

            dojo.style(this.domNode, {
                display: "",
                position: "",
                top: "",
                left: ""
            });

            this._set("open", true);
            this._onShow(); // lazy load trigger
            this._size();
            this._position();

            var node = $(this.domNode);
            if(this.modalStyleClass) node.children(".modal-dialog").addClass(this.modalStyleClass);
            node.modal('show').on('shown.bs.modal', dojo.hitch(this, function() {
                if(this.autofocus) this.focus();
            }));
            if(this.iframePost) {
                this.xhrPost = dojo.xhrPost;
                dojo.xhrPost = function(o) {
                    dojo.require("dojo.io.iframe");
                    o.handleAs = "html";
                    var load = o.load; 
                    o.load = function(response, ioArgs) {
                        load(response.body.innerHTML, ioArgs);
                    }
                    dojo.io.iframe.send(o)
                }       
            }
        },
        hide: function() {
            if(this.iframePost) {
                dojo.xhrPost = this.xhrPost;
            }

            if(!this._alreadyInitialized || !this.open){
                return;
            }

            if(this._scrollConnected){
                this._scrollConnected = false;
            }
            var h;
            while(h = this._modalconnects.pop()){
                h.remove();
            }

            if(this._relativePosition){
                delete this._relativePosition;
            }
            this._set("open", false);

            return $(this.domNode).modal('hide');
        },
        resize: function() {},
        _size: function() {},
        _position: function() {},
        destroy: function() {
            var h;
            while(h = this._modalconnects.pop()){
                h.remove();
            }
            $('body').removeClass('modal-open');
            $('.modal-backdrop').remove();
            this.inherited(arguments);}
        }
        }
);

XSP._dialog_type = "extlib.responsive.dijit.xsp.bootstrap.Dialog";

（我从扩展库获得的代码的很大一部分）

现在我们有dijit小部件的引导对话框。这由 XSP.openDialog 和 XSP.closeDialog 调用，并且可以使用SSJS代码

注意：如果您需要 modal-lg 或 modal-sm 对话框，则添加到<xe:dialog> dojo属性modalStyleClass（在步骤2）中看到值 modal-lg