homepage Welcome to WebmasterWorld Guest from 54.227.141.230
register, free tools, login, search, subscribe, help, library, announcements, recent posts, open posts,
Pubcon Website
Home / Forums Index / Code, Content, and Presentation / JavaScript and AJAX
Forum Library, Charter, Moderator: open

JavaScript and AJAX Forum

    
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&#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

 

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / JavaScript and AJAX
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About
© Webmaster World 1996-2014 all rights reserved