homepage Welcome to WebmasterWorld Guest from 54.197.215.146
register, free tools, login, search, subscribe, help, library, announcements, recent posts, open posts,
Subscribe to WebmasterWorld

Home / Forums Index / Code, Content, and Presentation / JavaScript and AJAX
Forum Library, Charter, Moderator: open

JavaScript and AJAX Forum

    
Unable to get query result using Ajax
sunnykeerthi




msg:4553929
 2:32 pm on Mar 12, 2013 (gmt 0)

Hi,
I've the below code in my 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="Javascript.js">

</script>

</head>
<body>
<form name="form1" id="form1">
<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','SI_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>
</form>
<h1> </h1>
</body>
</html>



and the javascript i used is as below. and it also has Ajax included in it.

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)
{
var a=document.getElementById(x).value;
var b=document.getElementById("SI_Query_Box").value;
var c=document.getElementById("Ship_ID");
var params="TSI_Query_Box="+a+"&SI_Query_Box="+b+"&ShipID="+c;


}
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) {
xmlhttp.open("POST","abc.jsp",true);
xmlhttp.onreadystatechange = handleServerResponse;
xmlhttp.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
xmlhttp.send(params);
}
}
function handleServerResponse() {
if (xmlhttp.readyState == 4) {
if(xmlhttp.status == 200) {
document.getElementById("ab")=xmlhttp.getResponseHeader("content-type"); //Update the HTML Form element
}
else {
alert("Error during AJAX call. Please try again");
}
}
}



the submit page is as below.


<%@page import="sun.reflect.generics.tree.IntSignature"%>
<%@page contentType="text/html" pageEncoding="UTF-8"%>
<%@include file="DBCon.jsp" %>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>JSP Page</title>
</head>
<body>
<%try
{
int s;
String TSI_Query_Box=request.getParameter("TSI_Query_Box");
String SI_Query_Box=request.getParameter("SI_Query_Box");
String Ship_ID=request.getParameter("Ship_ID");
String sql="Update Topical set TSI_Query='"+TSI_Query_Box+"',TSI_R='x' where Job_ID='"+Ship_ID+"'";
response.getWriter().write(sql);

}
catch(Exception e)
{
out.println(e);
}
%>
</body>
</html>



Here actually when i select first drop down value as Yes, the second dropdown gets activated. and when i select Query in the second dropdown option, there is a textarea shown up. here when i enter text and hit enter, i want to see the query(written in submit.jsp), but here when i enter the text in textarea and hit an enter it is just making a newline within the text area and if i replace the below part with alert(params) it is showing the parameters correctly

xmlhttp.open("POST","abc.jsp",true);
xmlhttp.onreadystatechange = handleServerResponse;
xmlhttp.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
xmlhttp.send(params);





please let me know how do i see this query string when i hit enter, so that i can use it for my form submition.

Thanks

 

Fotiman




msg:4553936
 2:57 pm on Mar 12, 2013 (gmt 0)

Welcome to WebmasterWorld!

You're muddling your content (the markup) with your behavior (the JavaScript). You should try to separate the two so you have a clear separation of layers (search for Unobtrusive JavaScript).

It looks like you're also using tables for layout, another no-no. Leave the presentation to CSS.

With that said...
If I understand you correctly, and what this code is attempting to do, you're referring to this textarea:

<textarea name="SI_Query_Box" id="SI_Query_Box" cols="15" rows="5" style="display:none" onKeyPress="return myKeyPress(event,'SI_Query_Box')">
</textarea>

If you want this to submit when enter is pressed as opposed to adding a new line in the textarea, then you should rethink whether a textarea is the correct element to use. Textareas are meant for multi-line text input, while a regular <input type="text"> is for single line values. If you change this to an input element, then pressing enter will trigger the default submit action (equivalent to clicking the first submit button in the form).

sunnykeerthi




msg:4553945
 3:11 pm on Mar 12, 2013 (gmt 0)

Hi Fotiman,
Thanks for the response, if i try to post data without using an Ajax,i'm able to submit the data. You are also correct regarding textarea. But, my requirement is this way. t need a textarea to enter comments and once hit Enter the Database should update. nut here i just want to see the query triggered. please let me know how do i do it.
Thanks

Fotiman




msg:4553958
 4:21 pm on Mar 12, 2013 (gmt 0)

When you send an AJAX request, you assign a callback function to onreadystatechange to handle the results. In your code, it appears to be this:

xmlhttp.onreadystatechange = handleServerResponse;

So lets look at handleServerResponse:


function handleServerResponse() {
if (xmlhttp.readyState == 4) {
if(xmlhttp.status == 200) {
document.getElementById("ab")=xmlhttp.getResponseHeader("content-type"); //Update the HTML Form element
}
else {
alert("Error during AJAX call. Please try again");
}
}
}


This is the piece of interest:
document.getElementById("ab")=xmlhttp.getResponseHeader("content-type"); //Update the HTML Form element

You're only fetching the response header for "content-type", but what you would want to get is the responseText (or responseXML if the server was sending XML). However, it's important to note that you're calling this AJAX request for both TSI_Query_Box and SI_Query_Box, so you may need to handle it differently depending on which one you're working with.

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.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved