Welcome to WebmasterWorld Guest from 54.162.241.40

Forum Moderators: open

Message Too Old, No Replies

unobtrusive javascript and Ajax dropdown post

     
2:26 pm on Mar 16, 2013 (gmt 0)

New User

joined:Mar 12, 2013
posts:3
votes: 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&#13;</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&#13;</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&#13;</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>&nbsp;</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>&nbsp;</p></div>
</form>
<div id="respi"></div>
<h1>&nbsp;</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
 

Join The Conversation

Moderators and Top Contributors

Hot Threads This Week

Featured Threads

Free SEO Tools

Hire Expert Members