XPage 和 Twitter Bootstrap Modal 在使用 SSJS 时不起作用 [英] XPages and Twitter Bootstrap Modal not working when using SSJS

查看：28
本文介绍了XPage 和 Twitter Bootstrap Modal 在使用 SSJS 时不起作用的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

只需遵循站点中的示例，就可以很容易地在 XPage 中使用 Twitter Bootstrap 模式.但是，如果您想使用 SSJS 在显示之前影响模态的内容，它似乎不起作用.它似乎在闪烁，通常只显示背景.

使用 XPage Full 或 Partial refresh 似乎有问题.

我试过让它正常"工作，我试过使用 jQuery 和远程服务来获得更改，但没有运气.

下面是远程服务的代码.

关于如何在显示对话框之前影响或刷新模式内容的任何示例将不胜感激.

<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">我的对话<xp:br></xp:br><xp:br></xp:br>时间<xp:text escape="true" id="computedField1"value="#{viewScope.vsTime}"><xp:this.converter><xp:convertDateTime type="both"></xp:convertDateTime></xp:this.converter></xp:text></xp:面板></xp:this.facets></xc:bs_Modal></xp:面板><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>

解决方案

我解决这个问题很复杂.部分刷新后保存存在 NotesXspDocument 问题.

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

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

<div class="modalfade" 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 dojoAttachPoint="containerNode"></div>

2) 用代码创建 csjs 库:

dojo.provide("extlib.responsive.dijit.xsp.bootstrap.Dialog");dojo.require("extlib.dijit.Dialog");道场.declare("extlib.responsive.dijit.xsp.bootstrap.Dialog",extlib.dijit.Dialog,{基类:"，templateString: dojo.cache(new dojo._Url("templates/CustomDialog.html")),可拖动:假，自动对焦:假，iframePost:假，modalStyleClass: "",显示:函数(){如果(this.open){返回;}if(!this._started){this.startup();}//第一次显示对话框时，有一些初始化工作要做if(!this._alreadyInitialized){this._setup();this._alreadyInitialized = true;}//如果用户滚动浏览器，则居中对话框.连接到文档在 IE 上不起作用，需要使用窗口.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, {展示: ""，位置: ""，最佳: ""，剩下: ""});this._set("打开", true);this._onShow();//延迟加载触发器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();}));如果(this.iframePost){this.xhrPost = dojo.xhrPost;dojo.xhrPost = 函数(o){dojo.require("dojo.io.iframe");o.handleAs = "html";var 负载 = o.load;o.load = 函数(响应，ioArgs){负载(response.body.innerHTML，ioArgs)；}dojo.io.iframe.send(o)}}},隐藏:函数(){如果(this.iframePost){dojo.xhrPost = this.xhrPost;}if(!this._alreadyInitialized || !this.open){返回;}如果(this._scrollConnected){this._scrollConnected = false;}无功h;while(h = this._modalconnects.pop()){h.remove();}如果(this._relativePosition){删除 this._relativePosition;}this._set("打开", false);返回 $(this.domNode).modal('hide');},调整大小:函数(){}，_大小:函数(){}，_位置:函数(){}，销毁:函数(){无功h;while(h = this._modalconnects.pop()){h.remove();}$('body').removeClass('modal-open');$('.modal-backdrop').remove();this.inherited(参数);}}});XSP._dialog_type = "extlib.responsive.dijit.xsp.bootstrap.Dialog";

(我从扩展库中获得的大部分代码)

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

注意:如果您需要 modal-lg 或 modal-sm 对话框，请添加到 dojo 属性 modalStyleClass(参见步骤 2)，值为 modal-lg

It's pretty easy to get a Twitter Bootstrap modal working in XPages just by following the examples in the site. However, it doesn't seem to work if you want to use SSJS to affect the contents of the modal before it gets displayed. It seems to flash, and often just shows the background.

It seems to be a problem with using XPages Full or Partial refresh.

I've tried getting it to work "normally" and I've tried using jQuery and a Remote Service to get the change in with no luck.

Below is the code with the remote service.

Any examples on how to affect or refresh the modal contents prior to showing the dialog would be appreciated.

<?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>

解决方案

I solve this problem in complex. After issue with save exist NotesXspDocument after partial refresh.

It works for me, maybe it is help for you.

1) Create template html for Dialog in WebContent folder, example 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) Create csjs library with code:

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";

(big part of code i get from Extension Library)

Now we are have bootstrap dialog by dijit widget. This is called by XSP.openDialog and XSP.closeDialog, and work SSJS code

NOTE: if you need modal-lg or modal-sm dialog, then add to <xe:dialog> dojo attribute modalStyleClass(see in step 2) with value modal-lg

这篇关于XPage 和 Twitter Bootstrap Modal 在使用 SSJS 时不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
其他开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆