如何在XPage中从SSJS调用bootstrap模式对话框

时间:2015-07-24 00:34:12

标签: twitter-bootstrap modal-dialog xpages xpages-ssjs

编辑我在

之后添加了这个
</xp:this.action> 
它似乎工作了几次,但现在它已经退出了。所以不知道我是否有解决方案: 进一步编辑确保你有两个xp:attr或它不起作用。

<xp:this.onComplete>
    var id = "#{id:panelModal}"
    XSP.partialRefreshGet(id,{
    onComplete: function(){
    $('#myModal').modal('show');
        }
        });
</xp:this.onComplete>

我已经创建了下面的测试代码来调用 - 如果我注释掉链接并显示按钮,模态窗口会正确显示。但是,当我为触发数据和切换目标设置attrs时,我无法显示模态。

<xp:panel id="panelMain">
        <xp:link text="Create Document" id="buttonLink1" styleClass="btn btn-default">
            <xp:this.attrs>
                <xp:attr name="data-toggle" value="modal">
                </xp:attr>
                <xp:attr name="data-target" value="createDialog">
                </xp:attr>
            </xp:this.attrs>
            <xp:eventHandler event="onclick" submit="true"
                refreshMode="partial" refreshId="panelMain">
                <xp:this.action><![CDATA[#{javascript:"Do some stuff here"}]]></xp:this.action>
            </xp:eventHandler>
        </xp:link>


<!-- <button type="button" class="btn btn-md" data-toggle="modal"
            data-target="#createDialog"> Search
        </button>
-->
        <!-- Modal -->
        <div class="modal fade" id="createDialog" tabindex="-1" role="dialog"
            aria-labelledby="myModalLabel">
            <div class="modal-dialog" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal"
                            aria-label="Close">
                            <span aria-hidden="true"></span>
                        </button>
                        <h4 class="modal-title" id="myModalLabel">
                            <xp:label id="label1">
                                <xp:this.value><![CDATA[#{javascript:"Search " + appProps[sessionScope.ssApplication].appDesc}]]></xp:this.value>
                            </xp:label>
                        </h4>
                    </div>
                    <div class="modal-body">
                        ...
      </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-default" data-dismiss="modal">
                            Close</button>
                        <button type="button" class="btn btn-primary">Save changes</button>
                    </div>
                </div>
            </div>
        </div>
    </xp:panel><!-- panel main -->

1 个答案:

答案 0 :(得分:1)

所以这是有效的代码。可能会进行一些改进但可行。如果您有改进建议,请随意

<xp:panel id="panelMain">
        <xp:link text="Create Document" id="buttonLink1" styleClass="btn btn-default">
            <xp:this.attrs>
                <xp:attr name="data-toggle" value="modal">
                </xp:attr>
                <xp:attr name="data-target" value="createDialog">
                </xp:attr>
            </xp:this.attrs>
            <xp:eventHandler event="onclick" submit="true"
                refreshMode="partial" refreshId="panelMain">
                <xp:this.action><![CDATA[#{javascript:"Do some stuff here"}]]></xp:this.action>
<xp:this.onComplete>
    var id = "#{id:panelModal}"
    XSP.partialRefreshGet(id,{
    onComplete: function(){
    $('#myModal').modal('show');
    }});
</xp:this.onComplete>
            </xp:eventHandler>
        </xp:link>


<!-- <button type="button" class="btn btn-md" data-toggle="modal"
            data-target="#createDialog"> Search
        </button>
-->
        <!-- Modal -->
        <div class="modal fade" id="createDialog" tabindex="-1" role="dialog"
            aria-labelledby="myModalLabel">
            <div class="modal-dialog" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal"
                            aria-label="Close">
                            <span aria-hidden="true"></span>
                        </button>
                        <h4 class="modal-title" id="myModalLabel">
                            <xp:label id="label1">
                                <xp:this.value><![CDATA[#{javascript:"Search " + appProps[sessionScope.ssApplication].appDesc}]]></xp:this.value>
                            </xp:label>
                        </h4>
                    </div>
                    <div class="modal-body">
                        ...
      </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-default" data-dismiss="modal">
                            Close</button>
                        <button type="button" class="btn btn-primary">Save changes</button>
                    </div>
                </div>
            </div>
        </div>
    </xp:panel><!-- panel main -->