Question

我注意到，当我选择寻呼机时，在Bootstrap选项卡下使用寻呼机进行重复控制会导致选项卡下的完整内容消失。

有人知道原因吗？

如果我导航到另一个选项卡并导航回带有重复控件的选项卡，我看到寻呼机完成了它的工作并且重复控件的状态是正确的（显示下一个文档）但是为什么它会破坏display / html ？

我在网络浏览器控制台中看不到任何错误。

以下是代码：

<?xml version="1.0" encoding="UTF-8"?>
<xp:view xmlns:xp="http://www.ibm.com/xsp/core">
    <xp:this.beforePageLoad><![CDATA[#{javascript:
viewScope.myTest = 
       [["Val_1_1", "Val_1_2"], ["Val_2_1", "Val_2_2"], ["Val_3_1", "Val_3_2"]];}]]></xp:this.beforePageLoad>
    <div>
        <!-- Nav tabs -->
        <ul class="nav nav-tabs" role="tablist">
            <li role="presentation" class="">
                <a href="#home" aria-controls="home" role="tab" data-toggle="tab">Home
                </a>
            </li>
            <li role="presentation">
                <a href="#repeat" aria-controls="settings" role="tab" data-toggle="tab">
                    Repeat</a>
            </li>
        </ul>
        <!-- Tab panes -->
        <div class="tab-content">
            <div role="tabpanel" class="tab-pane fade in" id="home">...</div>
            <div role="tabpanel" class="tab-pane fade" id="repeat">
                <table class="table">
                    <thead>
                        <tr>
                            <th>Column 1</th>
                            <th>Column 2</th>                           
                        </tr>
                    </thead>
                    <tbody>
                        <xp:repeat id="rptDecisions" rows="1" var="row"
                            indexVar="idx" value="#{viewScope.myTest}">
                            <tr>
                                <td>
                                    <xp:text value="#{row[0]}" />
                                </td>
                                <td>
                                    <xp:text value="#{row[1]}" />
                                </td>
                            </tr>
                        </xp:repeat>

                    </tbody>
                </table>
                <xp:pager layout="Previous Group Next" id="pager1" for="rptDecisions"
                    partialRefresh="true" />
            </div>
        </div>
    </div>
</xp:view>

更新

看起来XPage生成的ID似乎与Bootstrap标签锚无法正常工作？

<div>
        <!-- Nav tabs -->
        <ul class="nav nav-tabs" role="tablist">
            <li role="presentation" class="active">
                <a href="#home" aria-controls="home" role="tab" data-toggle="tab">Home
                </a>
            </li>
            <li role="presentation">
                <xp:link escape="true" text="Repeat" id="link2">
                    <xp:this.attrs>
                        <xp:attr name="data-toggle" value="tab" />
                        <xp:attr name="role" value="tab" />
                    </xp:this.attrs>
                    <xp:this.value><![CDATA[#{javascript:"#" + getComponent("repeat").getClientId(facesContext)}]]></xp:this.value>
                </xp:link>
            </li>
            <li role="presentation">
                <a href="#messages" aria-controls="messages" role="tab"
                    data-toggle="tab">Messages</a>
            </li>
        </ul>

        <!-- Tab panes -->
        <div class="tab-content">
            <div role="tabpanel" class="tab-pane active" id="home">home</div>
            <xp:div role="tabpanel" styleClass="tab-pane" id="repeat">
                repeat
            </xp:div>
            <div role="tabpanel" class="tab-pane" id="messages">messages</div>
        </div>
    </div>

Answer 1

重点是：你没有为XSP提供一个可以连接的“句柄”，以便在不“破坏”你的块的情况下执行局部刷新。为了对话，如果您将页面属性更改为partialRefresh="false"，则相同的代码将起作用，因为整个页面将被重新评估而不需要特定的容器块。总之...

你改变

<div role="tabpanel" class="tab-pane fade" id="repeat">

到

<xp:div id="commonContainer" role="tabpanel" styleClass="tab-pane fade">

然后事情就会开始发挥作用。

要记住的另一个重要事项是转发器和寻呼机必须共享将刷新的公共容器。

修改

我建议您查看 Bootstrap4XPages 和<xp:tabbedPanel>项目，该项目可以减轻您为实现目标所需提供的理解和努力。就像现在一样，还有很多事情要考虑，把它放在一边可能会让你再次陷入困境。

但是，对上述代码的快速修复只是重构代码以遵守我之前提到的规则。

<div class="tab-content"> <div role="tabpanel" class="tab-pane fade in" id="home">...</div> <div role="tabpanel" class="tab-pane fade" id="repeat"> <xp:div id="thisCommonContainerImTalkingAbout"> <table class="table"> <thead> <tr> <th>Column 1</th> <th>Column 2</th> </tr> </thead> <xp:repeat id="rptDecisions" rows="1" var="row" value="#{viewScope.myTest}" themeId="List.Table"> <tr> <td> <xp:text value="#{row[0]}" /> </td> <td> <xp:text value="#{row[1]}" /> </td> </tr> </xp:repeat> </table> <xp:pager layout="Previous Group Next" id="pager1" for="rptDecisions" partialRefresh="true" /> </xp:div> </div> </div>

部分刷新重复控件/寻呼机不能使用Bootstrap选项卡

1 个答案: