Jquery 刷新DIV中包含dojo选项卡面板的JSP部分
我有一个jsp,其中包含使用dojo的选项卡式面板。 这是JSP-Jquery 刷新DIV中包含dojo选项卡面板的JSP部分,jquery,struts2,dojo,Jquery,Struts2,Dojo,我有一个jsp,其中包含使用dojo的选项卡式面板。 这是JSP- <div id="protoDevTDPRevLogTab"> <sx:tabbedpanel id="tabContainer" selectedTab="2" > <sx:div label="Prototype Development (Virtual/Physical)" id = "protoDevTabId" disabled="true" >
<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>
下面是struts映射-
<action name="tabbedProtoDevTDPRevLog" class="protoDevTDPRevLogAction" method="loadProtoDevTDPRevLog">
<result name="success">tabbedPanel.jsp
</result>
</action>
tabbedPanel.jsp
问题是-tabbedPanel.jsp的代码类似于:
,因此在jQuery ajax加载方法中,Dojo前缀被一些Dojo javascript替换。JSP的最终结果不会在指定的DIV中被替换
这个问题有其他解决办法吗。我唯一关心的是刷新dojo选项卡式面板内容。我使用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>
服务器端代码保持不变Dojo插件多年来一直被弃用。如果您已经在使用jQuery,为什么不使用struts2 jQuery插件或原始jQuery来删除dojo标记呢?我已经尝试过了。要使用StrutsJQuery,我必须更新当前的JAR。这可能会破坏某些现有功能。另外,jquery选项卡的外观和感觉也不同。可以使用CSS轻松调整外观和感觉+1因为您已经尝试过:)我知道如何使用jquery选项卡实现结果,并为外观编写一些新的css。但是dojo ajax也可以吗?如果您试图刷新其中一个选项卡中的数据,那么为什么要用这些选项卡重新加载整个div?相反,只刷新所需选项卡内的零件。
<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>
$(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();
} );