将子JSP页清除为默认外观

Question

下面是JSP页面

​

<div id="tabs-7" style="width: 100%;">
	<form:form id="deviceForm" name="" modelAttribute=""  enctype="multipart/form-data">
		<div class="inputWidgetContainer">
			<div class="inputWidget">
				<table>
					<tr height="6"></tr>
					<tr>
						<td class="rightalign">
							<input type="radio" id="radio_SampleInput"
								name="xyzRadio" value="sampleInputRadio" checked="checked" 
								onclick="loadXyz()"/>
						</td>
						<td class="leftAlign inputLabel">Sample Input</td>
						<td class="rightalign">
							<input type="radio" id="radio_abc"
								name="sampDtlsRadio" value="abcRadio" 
								onclick="loadabc()">
						</td>
					</tr>
				</table>
			</div>
		</div>
			
		<div id="xyz">
			<jsp:include page='xyz.jsp' />
		</div>
		<div id="abc" class="hide">
			<jsp:include page='abc.jsp' />
		</div>
	</form:form>
</div>

​

在JS文件中，我根据用户的选择隐藏了div。这两个页面都有一些功能，可以改变页面的默认外观，如行可以添加或删除，现在如果用户选择其他单选按钮并返回到页面，默认外观应该会显示。我不想去撤销用户所做的事情，除非有更干净的方法去做。目前我正在重新加载父页面。有没有办法使用ajax调用让我再次请求xyz.jsp页面，这样我就不必刷新父页面了。或者任何更好的解决方案。

Answer 1

首先，使用onchange比使用onclick更好。其次，将具有相同名称的单选按钮组合在一起(以使其行为类似于单选按钮，而不是复选框)。第三，用js代码而不是html绑定你的处理程序。最后，您当然可以通过Ajax加载部件。

​

$('[type="radio"]').on('change', function(){
  if($('[type="radio"]:checked').val() === 'sampleInputRadio') {
    $('#xyz').load('http://your.serv.er/xyz.jsp');
    loadXyz();
  } else {
    $('#abc').load('http://your.serv.er/abc.jsp');
    loadabc();
  }
});

<div id="tabs-7" style="width: 100%;">
    <form:form id="deviceForm" name="" modelAttribute=""  enctype="multipart/form-data">
        <div class="inputWidgetContainer">
            <div class="inputWidget">
                <table>
                    <tr height="6"></tr>
                    <tr>
                        <td class="rightalign">
                            <input type="radio" id="radio_SampleInput"
                                name="SampleInput" value="sampleInputRadio" checked="checked"/>
                        </td>
                        <td class="leftAlign inputLabel">Sample Input</td>
                        <td class="rightalign">
                            <input type="radio" id="radio_abc"
                                name="SampleInput" value="abcRadio">
                        </td>
                    </tr>
                </table>
            </div>
        </div>
            
        <div id="xyz">
            <jsp:include page='xyz.jsp' />
        </div>
        <div id="abc" class="hide">
            <jsp:include page='abc.jsp' />
        </div>
    </form:form>
</div>

​

附注:由于我不知道你的原始处理程序做了什么，我只是调用它的after load .jsp请求，但也许这是不必要的。