| unobtrusive javascript and Ajax dropdown post
|
sunnykeerthi
msg:4555657 | 2:26 pm on Mar 16, 2013 (gmt 0) |
Hi i've the below jsp
<%@page contentType="text/html" pageEncoding="UTF-8"%>
<%@include file="DBCon.jsp" %>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>JSP Page</title>
<script type="text/javascript" src="newjavascript.js">
</script>
</head>
<body>
<form name="form1" id="form1">
<div id="main">
<table width="722">
<tr>
<td width="431" height="190">
<table width="439" >
<tr>
<td width="129">PARTS Updated</td>
<td width="108">
<p>
<select name="PARTS_Updated" id="PARTS_Updated" onChange="Enable_DD(this.value)">
<option value="N/A">N/A</option>
<option value="Yes">Yes</option>
</select>
</p>
</td>
<td width="186">
<label for="PARTS_Updated">
</label>
</td>
</tr>
<tr>
<td>TSI OK </td>
<td>
<p>
<label for="Tsi_OK"></label>
<select name="Tsi_OK" id="Tsi_OK" disabled="disabled" onChange="show(this.value);Enable_DD(this.value)">
<option value="N/A">N/A</option>
<option value="Yes1">Yes</option>
<option value="TSI_Query">TSI_Query</option>
</select>
</p></td>
<td><label for="TSI_Query_Box"></label>
<textarea name="TSI_Query_Box" id="TSI_Query_Box" cols="15" rows="5" style="display:none" onkeypress="return myKeyPress(event,'TSI_Query_Box')">
</textarea>
</td>
</tr>
<tr>
<td height="65">Special Ins OK </td>
<td>
<p>
<select name="SI_OK" id="SI_OK" disabled="disabled" onChange="show(this.value);">
<option value="N/A">N/A</option>
<option value="Yes">Yes</option>
<option value="SI_Query">SI_Query</option>
</select>
</p>
</td>
<td><label for="SI_Query_Box"></label>
<textarea name="SI_Query_Box" id="SI_Query_Box" cols="15" rows="5" style="display:none" onKeyPress="return myKeyPress(event,'SI_Query_Box')">
</textarea>
</td>
</tr>
</table></td>
<td width="279">
<%
try {
String s = (String) session.getAttribute("myusername");
ps = con.prepareStatement("select JOB_ID from topical where editor=? and FINISH_TIME is null");
ps.setString(1, s);
rs = ps.executeQuery();
if (rs.next()) {%>
<table width="279" align="center">
<tr>
<td width="87"><p>Shipment ID </p></td>
<td width="97"><label for="Ship_ID" id="Ship_IDl"></label>
<input type="text" name="Ship_ID" id="Ship_ID" value="<%=rs.getString("Job_ID")%>">
</td>
</tr>
</table>
<%
}
} catch (Exception e) {
out.print(e);
}
%>
</td>
</tr>
</table>
<p> </p>
<table width="721" border="1">
<tr>
<td width="374" align="center">
<input type="submit" name="Send for CT Review (SCTR)" id="Send for CT Review (SCTR)" value="Send for CT Review (SCTR)"></td>
<td width="331" align="center">
<input type="submit" name="CT Review Complete (CTRC" id="CT Review Complete (CTRC)" value="CT Review Complete (CTRC)"></td>
</tr>
<tr>
<td align="center">
<input type="submit" name="Cleanup Queries" id="Cleanup Queries" value="Cleanup Queries"></td>
<td align="center">
<input type="submit" name="Cleanup Complete" id="Cleanup Complete" value="Cleanup Complete"></td>
</tr>
<tr>
<td colspan="2" align="center"><input type="submit" name="Go_To_Main_Page" id="Go_To_Main_Page" value="Go To Main Page"></td>
</tr>
</table>
<p> </p></div>
</form>
<div id="respi"></div>
<h1> </h1>
</body>
</html>
and the javascript i used is as below. Actually it is a partial js. sorry for that.
function Enable_DD(x)
{
if(x=="Yes"){
document.getElementById("Tsi_OK").disabled=false;
document.getElementById("PARTS_Updated").disabled=true;
}
if(x=="Yes1"){
document.getElementById("Si_OK").disabled=false;
document.getElementById("Tsi_OK").disabled=true;
}
}
function show(x)
{
if(x=='TSI_Query')
{
document.getElementById("TSI_Query_Box").style.display='block';
}
else{
document.getElementById("TSI_Query_Box").style.display='none';
}
if(x=='SI_Query')
{
document.getElementById("SI_Query_Box").style.display='block';
}
else{
document.getElementById("SI_Query_Box").style.display='none';
}
}
function myKeyPress(e,x){
var AjaxObj=null;
if(window.XMLHttpRequest)
{
AjaxObj=new XMLHttpRequest;
}
else if(window.ActiveXObject)
{
AjaxObj=new ActiveXObject("Microsoft.XMLHTTP");
}
if(AjaxObj!=null)
{
}
else
{
alert("No Ajax Found. please update your Browser");
}
var keynum;
if(window.event){
keynum = e.keyCode;
}else
if(e.which){
keynum = e.which;
}
if (keynum == 13) {
}
}
here i have 2 questions.
1) please help me to convert this javascript to unobtrusive javascript. here i'm confused for the below reason in example
<input type="text" id="text1" name="text1" onBlur="someEvent()"/>
this can be changed to (in HTML and js)
<input type="text" id="text1" name="text1""/>
var x=document.getElementById("text1")
x.onBlur=someEvent;
function someEvent(){//here rest of code goes}
But how do we do the same for the below case, you can see multiple methods declared in my actual JSP posted here. how do i handle them
<input type="text" id="text1" name="text1" onBlur="someEvent(this.value)"/>
2) and how do i use this unobtrusive javascript and AJAX to post data in a form abc.jsp(not given here)using onChange event. i can post the data with the dropdown and a submit button, but i want that to be done using onChange. please let me know how do i do these. please let me know for anymore clarification on this secomd question
Thanks
|
|
