我必须重新加载div“决策树”,以便重新加载applet以读取更新的xml而无需重新加载整个页面。
jsp代码:
<%@page contentType="text/html" pageEncoding="UTF-8"%>
<%@taglib uri="/WEB-INF/struts-bean.tld" prefix="bean" %>
<%@taglib uri="/WEB-INF/struts-html.tld" prefix="html" %>
<%@taglib uri="/WEB-INF/struts-logic.tld" prefix="logic" %>
<%@taglib uri="/WEB-INF/struts-nested.tld" prefix="nested" %>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="jquery-1.4.2.min.js"></script>
<title>IDOC AUTHORING TOOL</title>
</head>
<body>
<div id="BasePage" style="display:block;" >
<Script language="JavaScript">
function ashu(){
$(document).ready(function() {
alert("jQuery tutorial for beginners Example");
});
}
</Script>
<p>
<u> </u><font size="7"><u>IDOC AUTHORING TOOL</u></font></p>
<p> </p>
<p>Enter/Choose ailment :
<select size="1" onchange="javascript:ashu">
<option>Malaria</option>
<option>High Fever</option>
<option>Cholera</option>
</select></p>
<p>Choose Authoring Mode :
<select size="1" name="AuthoringOption" id ="AuthoringOption" onchange="javascript:display_toggle()">
<option selected="selected"> </option>
<option value ="1">Input Desicion Tree</option>
<option value ="2">Input Prevention</option>
<option value ="3">Input Symptoms</option>
</select></p>
<fieldset style="width: 381px; height: 126px; padding: 2">
<legend align="left"> </legend>
Tick off patient context :
<input type="radio" value="V1" checked name="R1">Men
<input type="radio" name="R1" value="V2">Women
<p>
<input type="radio" name="R1" value="V3"> Child
<input type="radio" name="R1" value="V4"> All</p>
</fieldset>
<p> Enter Pre Conditions</p>
<p> <textarea rows="2" cols="20"></textarea>
</div>
<!--_______________________________________________________ -->
<script type ="text/javascript">
function display_toggle(){
var e =document.getElementById("AuthoringOption").value;
if (e =="1"){
document.getElementById("Symptoms").style.display="none";
document.getElementById("Prevention").style.display="none";
document.getElementById("decisiontree").style.display="block";
document.getElementById("BasePage").style.display="none";
}
else if(e =="2"){
document.getElementById("Prevention").style.display="block";
document.getElementById("decisiontree").style.display="none";
document.getElementById("Symptoms").style.display="none";
document.getElementById("BasePage").style.display="none";
}
else if(e =="3"){
document.getElementById("decisiontree").style.display="none";
document.getElementById("Symptoms").style.display="block";
document.getElementById("Prevention").style.display="none";
document.getElementById("BasePage").style.display="none";
}
}
</script>
<div id="Symptoms" style="display:none;">
<html:form method="POST" action="symptoms" onreset="true">
<!-- --- -->
<p>
<u> </u><font size="7"><u>IDOC AUTHORING TOOL</u></font></p>
<p> </p>
<p>Enter/Choose ailment :
<html:select name="AuthoringForm" property="disease_name" size="1">
<option>Malaria</option>
<option>High Fever</option>
<option>Cholera</option>
</html:select></p>
<p>Choose Authoring Mode :
<select size="1" name="AuthoringOption" id ="AuthoringOption" onChange="javascript:display_toggle()">
<option selected="selected"> </option>
<option value ="1">Input Desicion Tree</option>
<option value ="2">Input Prevention</option>
<option value ="3">Input Symptoms</option>
</select></p>
<fieldset style="width: 381px; height: 126px; padding: 2">
<legend align="left"> </legend>
Tick off patient context :
<html:radio value="Men" name="AuthoringForm" property="patient_context" disabled="false"/>Men
<html:radio value="Womwen" name="AuthoringForm" property="patient_context" disabled="false"/>Women
<p>
<html:radio value="Child" name="AuthoringForm" property="patient_context" disabled="false"/>Child
<html:radio value="Al" name="AuthoringForm" property="patient_context" disabled="false"/>All
</fieldset>
<p> Enter Pre Conditions</p>
<p> <html:textarea rows="2" name="AuthoringForm" cols="20" property="patient_precondition" ></html:textarea>
<!-- ---------- -->
<p> Must Have Symptoms :
May Have Symptoms :</p>
<p> <html:textarea rows="2" name="AuthoringForm" cols="20" property="must_have_symptoms"></html:textarea>
<!-- <input type="submit" value="Submit" name="B2">-->
<html:textarea rows="2" name="AuthoringForm" cols="20" property="may_have_symptoms"></html:textarea>
<input type="submit" value="Submit" name="symptomsButton"></p>
</html:form>
</div>
<!--___________________________________________________________________________________________ -->
<div id="Prevention" style="display:none;"`>
<html:form method="POST" action="prevention" >
<!-- ---------------------------------- -->
<p>
<u> </u><font size="7"><u>IDOC AUTHORING TOOL</u></font></p>
<p> </p>
<p>Enter/Choose ailment :
<html:select name="AuthoringForm" property="disease_name" size="1">
<option>Malaria</option>
<option>High Fever</option>
<option>Cholera</option>
</html:select></p>
<p>Choose Authoring Mode :
<select size="1" name="AuthoringOption" id ="AuthoringOption" onChange="javascript:display_toggle()">
<option selected="selected"> </option>
<option value ="1">Input Desicion Tree</option>
<option value ="2">Input Prevention</option>
<option value ="3">Input Symptoms</option>
</select></p>
<fieldset style="width: 381px; height: 126px; padding: 2">
<legend align="left"> </legend>
Tick off patient context :
<html:radio value="Men" name="AuthoringForm" property="patient_context" disabled="false"/>Men
<html:radio value="Womwen" name="AuthoringForm" property="patient_context" disabled="false"/>Women
<p>
<html:radio value="Child" name="AuthoringForm" property="patient_context" disabled="false"/>Child
<html:radio value="Al" name="AuthoringForm" property="patient_context" disabled="false"/>All
</fieldset>
<p> Enter Pre Conditions</p>
<p> <html:textarea rows="2" name="AuthoringForm" cols="20" property="patient_precondition" ></html:textarea>
<!-- --------------------------------------------------- -->
<p> Input for Prevention :
</p>
<p> <html:textarea rows="8" name="AuthoringForm" cols="79" property="prevention"></html:textarea>
<input type="submit" value="Submit" name="preventionButton">
</p>
</html:form>
</div>
<!--____________________________________________________________________________________________ -->
<div id="decisiontree" style="display:none;">
<html:form method="POST" action="decisiontreexml" >
<!-- ------------------------------------------------ -->
<p>
<u> </u><font size="7"><u>IDOC AUTHORING TOOL</u></font></p>
<p> </p>
<p>Enter/Choose ailment :
<html:select name="AuthoringForm" property="disease_name" size="1">
<option>Malaria</option>
<option>High Fever</option>
<option>Cholera</option>
</html:select></p>
<p>Choose Authoring Mode :
<select size="1" name="AuthoringOption" id ="AuthoringOption" onChange="javascript:display_toggle()">
<option selected="selected"> </option>
<option value ="1">Input Desicion Tree</option>
<option value ="2">Input Prevention</option>
<option value ="3">Input Symptoms</option>
</select></p>
<fieldset style="width: 381px; height: 126px; padding: 2">
<legend align="left"> </legend>
Tick off patient context :
<html:radio value="Men" name="AuthoringForm" property="patient_context" disabled="false"/>Men
<html:radio value="Womwen" name="AuthoringForm" property="patient_context" disabled="false"/>Women
<p>
<html:radio value="Child" name="AuthoringForm" property="patient_context" disabled="false"/>Child
<html:radio value="Al" name="AuthoringForm" property="patient_context" disabled="false"/>All
</fieldset>
<p> Enter Pre Conditions</p>
<p> <html:textarea rows="2" name="AuthoringForm" cols="20" property="patient_precondition" ></html:textarea>
<!-- ------------------------------------------------ -->
<p>
</p>
<fieldset style="width: 1225px; height: 451px; padding: 2">
<legend>Decision Tree Preview </legend>
<!-- <applet code="TreeViewApplet.class" codebase="C:/Users/ashutosh_k/idoc/docRuleTool/WebContent/WEB-INF/classes/com/vaannila/utility/" archive=" C:/Users/ashutosh_k/idoc/docRuleTool/WebContent/WEB-INF/lib/prefuse.jar" width="1000" height="500" type="applet">-->
<form>
<applet code="com.vaannila.utility.dynamicTreeApplet.class" archive="./appletjars/dynamictree.jar, ./appletjars/prefuse.jar" width ="1000" height="500">
</applet>
</form>
<!--</applet>-->
</fieldset><p>
</p>
<p>Enter Follow Up Questions :</p>
<html:form method="POST" action="decisiontree">
<html:textarea rows="4" name="AuthoringForm" cols="45" property="follow_up_questions"></html:textarea>
<html:radio value="Yes" name="AuthoringForm" property="followupconsent" disabled="false"/> Yes
<html:radio value="No" name="AuthoringForm" property="followupconsent" disabled="false"/> No
<input type="submit" value="Submit" name="followupQuestionButton"><p>
</p>
</html:form>
</html:form>
</div>
</body>
答案 0 :(得分:1)
当用户点击提交按钮时,我会使用jQuery.ajax动态加载decisiontree div内容。您需要将您的decisiontree div内容代码放在一个单独的文件(decisiontree.html)中,并将您的提交按钮设为id。
<script>
$(function()
{
$("input#submit").live('click', function()
{
loadApplet();
return false;
});
function loadApplet()
{
jQuery.ajax({
type: 'GET',
url: 'decisiontree.html,
success: function(data) {
$('#decisiontree').html(data);
}
});
};
});
</script>
这是jQuery.ajax的一个很好的资源:http://api.jquery.com/jQuery.ajax/