我有一个使用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选项卡式面板内容。
答案 0 :(得分:0)
我使用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();
} );
服务器端代码保持不变