在 DIV 中刷新包含 dojo 选项卡式面板的 JSP 部分答案

【问题标题】：Refresh part of JSP containing dojo tabbed panel in a DIV在 DIV 中刷新包含 dojo 选项卡式面板的 JSP 部分
【发布时间】：2015-05-19 12:35:37
【问题描述】：

我有一个使用 dojo 的包含选项卡式面板的 jsp。这是 JSP -

<div id="protoDevTDPRevLogTab">
    <sx:tabbedpanel id="tabContainer" selectedTab="2" >
        <sx:div label="Prototype Development (Virtual/Physical)" id = "protoDevTabId" disabled="true" >
            Prototype Development (Virtual/Physical)                
        </sx:div>
        <sx:div label="Set Maker Layout"  theme="ajax" preload="true" href="%{protoDevTDPRevLogDTO.url}" id = "protoDevTDPRevLogDTO.setMLTabId" disabled="true"/>

        <sx:div label="Set Maker Layout"  theme="ajax" preload="true" href="%{protoDevTDPRevLogDTO.url}" id = "protoDevTDPRevLogDTO.setMLTabId" disabled="%{protoDevTDPRevLogDTO.disabled}" />

        <sx:div label="Shipping / Line Trial" id = "protoDevTDPRevLogDTO.shippingLTTabId" >
            <table width="100%" cellpadding="0" cellspacing="0" id="shippingLineTrial">
                <tr class="tab_inputrow"/>
                <tr class="tab_inputrow">
                    <td width="30%">
                    <input type="button" value="Go For TDP Creation" id="goForTDPCreationbtnId" class="btn_enabled" 
                        onclick="sendNotificationToPackSuplier();" style="width: 120px" align="left"></input>
                    </td>
                </tr>
                <tr class="tab_inputrow"/>
            </table>
        </sx:div>

    </sx:tabbedpanel>
</div>

在按钮单击的其中一个表中，我必须执行一些业务逻辑，这将更改其他选项卡中的数据。

所以我想刷新整个选项卡式面板部分。

我尝试过像这样使用 jQuery ajax -

    $.ajax({
          type: "POST",
          url: "updateMLSupplier.action?packSupplierNumber="+packSupplierNumber+"&packSupplierName="+packSupplierName+"&rcmid="+rcmid,
          data: "data",
          success: function (response) {
            var url = "tabbedProtoDevTDPRevLog.action?&packSupplierName="+encodeURIComponent(packSupplierName)+"&rcmid="+encodeURIComponent(rcmid);

// This url has the code to refresh the data contained in tabbed panel.
//Also the success of this ajax is the tabbed jsp.
            $("#protoDevTDPRevLogTab").load(url);
        },
          dataType: "text"
    });

这里是struts映射-

<action name="tabbedProtoDevTDPRevLog" class="protoDevTDPRevLogAction" method="loadProtoDevTDPRevLog">
        <result name="success">tabbedPanel.jsp
        </result>
</action>

问题是 - tabbedPanel.jsp 的代码类似于：<sx:tabbedpanel id="tabContainer" selectedTab="%{protoDevTDPRevLogDTO.tabToDisplay}" >，因此在 jQuery ajax 加载方法中，Dojo 前缀被替换为一些 dojo javascript。最终结果 JSP 没有被替换到指定的 DIV 中。

是否有任何替代解决方案可以解决此问题。我唯一关心的是刷新 dojo 选项卡式面板内容。

【问题讨论】：

Dojo 插件多年来已被弃用。如果您已经在使用 jQuery，为什么不使用 struts2-jQuery-plugin 或原始 jQuery，完全删除 dojo-tags？
我试过了。要使用 struts-jquery，我必须更新当前的 jar。这可能会破坏一些现有的功能。 jquery标签的外观和感觉也不同
外观和感觉可以通过 CSS 轻松调整。 +1，因为您已经尝试过 :)
我知道如何使用 jquery 选项卡实现结果，并为外观编写一些新的 css。但是 dojo ajax 也可以吗？
如果您尝试刷新其中一个选项卡中的数据，那么为什么要使用这些选项卡重新加载整个 div？而是只刷新所需选项卡内的部分。

标签： jquery struts2 dojo

【解决方案1】：

我使用 jQuery 选项卡实现了解决方案，并在 dojo 中包含了动态内容，如下所示 -

<div id="protoDevTDPRevLogTab">
                  <ul>
                    <li><a href="#tabs-1">Prototype Development (Virtual/Physical)</a></li>
                    <li><a href="#tabs-2">Set Maker Layout</a></li>
                    <li><a href="#tabs-3">Shipping / Line Trial</a></li>
                    <li><a href="#tabs-4">TDP Verification</a></li>
                  </ul>
                  <div id="tabs-1">
                    <p>Prototype Development (Virtual/Physical)</p>
                  </div>
                  <div id="tabs-2">
                    <sx:div label="Set Maker Layout"  theme="ajax" preload="true" href="%{protoDevTDPRevLogDTO.url}" id = "protoDevTDPRevLogDTO.setMLTabId" disabled="true"/>
                  </div>
                  <div id="tabs-3">
                    <sx:div label="Shipping / Line Trial" id = "protoDevTDPRevLogDTO.shippingLTTabId" >
                            <table width="100%" cellpadding="0" cellspacing="0" id="shippingLineTrial">
                                <tr class="tab_inputrow"/>
                                <tr class="tab_inputrow">
                                    <td width="30%">
                                    <input type="button" value="Go For TDP Creation" id="goForTDPCreationbtnId" class="btn_enabled" 
                                        onclick="sendNotificationToPackSuplier();" style="width: 120px" align="left"></input>
                                    </td>
                                </tr>
                                <tr class="tab_inputrow"/>
                            </table>
                        </sx:div>
                  </div>
                  <div id="tabs-4">
                        <sx:div label="TDP Verification" theme="ajax" preload="true" href="tdpVerfication" id = "protoDevTDPRevLogDTO.tdpVerificationTabId" disabled="%{protoDevTDPRevLogDTO.disabled}" />
                  </div>
</div>

javascript 代码 -

$(document).ready(function() {
            $("#protoDevTDPRevLogTab").tabs({selected:1,disabled: [0]});

//this will change conditionally.
            $('[href="#tabs-2"]').closest('li').hide();
            $('[href="#tabs-3"]').closest('li').hide();
    } );

服务器端代码保持不变

【讨论】：