Win a copy of Design for the Mind this week in the Design forum!
  • Post Reply
  • Bookmark Topic Watch Topic
  • New Topic

Ajax javascript not recieving responseText from Struts

 
Nina Anderson
Ranch Hand
Posts: 148
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
Hi,

After a form is submitted, I'm using AJAX to forward the form data to my Struts Action class. The Struts processes the data and returns a responseText back to the original jsp page.

The problem I'm having is that, when the responseText returns the page gets forwarded to a blank page displaying the value of the reponseText object. I don't know why the javascript ONREADYSTATE function is not getting the responseText. The user should remain on the same original form page; they should not be forwarded to this new blank page.

Pls...Help

Here's my code:

....

var req = false;
//pre-load image on the server
var progress_bar = new Image();
progress_bar.src = 'http://localhost:8080/PBWebApp/web/images/color-circle.gif';

function replace_html(id, content) {
document.getElementById(id).innerHTML = content;
}

function show_progressbar(id) {
document.forms['FileUploadForm'].uploadButton.disabled = true;
//document.forms['FileUploadForm'].submit.disabled = true;
replace_html(id, '<img src="http://localhost:8080/PBWebApp/web/images/color-circle.gif" border="0" /><i>Loading, please wait...</i>');
}

function success_handler() {
document.forms['FileUploadForm'].uploadButton.disabled = false;
//document.forms['FileUploadForm'].submit.disabled = false;
replace_html('content', '<font color="red"><i>Video upload successful.</i></font>');
}

function failure_handler() {
document.forms['FileUploadForm'].uploadButton.disabled = false;
//document.forms['FileUploadForm'].submit.disabled = false;
replace_html('content', '<font color="red"><i>Video upload failed. File may be corrupted.</i></font>');
}

function validateVideoFile()
{
var resp = new Boolean(false);
re=/.(mov|avi|wmv|mpe?g)$/

if( re.test(document.getElementById("fileName").value) == false )
{
alert("You may only upload .mov, .avi, .mpeg or .wmv images (case-sensitive)");
resp = false;

} else {

send_request();
}

//return resp;
return true;
}

/*
* Get the second options by calling a Struts action
*/
function send_request()
{
//display progress bar
show_progressbar('content');

url="http://localhost:8080/PBWebApp/uploadVideo.do";
var params = null;
//var params = document.forms['FileUploadForm'].fileName.name + "=" + document.forms['FileUploadForm'].fileName.value;
//params = "&" + params + document.forms['FileUploadForm'].businessId.name + "=" + document.forms['FileUploadForm'].businessId.value;

//Do the Ajax call
if (window.XMLHttpRequest){ // Firefox, Safari, ...

this.req = new XMLHttpRequest();
//A call-back function is define so the browser knows which function to call after the server gives a reponse back

this.req.onreadystatechange = function (){
if (this.req.readyState == 4 ) // Complete
{
if (this.req.status == 200) // OK response
{
var status = this.req.responseText;
alert("data1: " + status);
if( status == 'success' )
{
success_handler();
}
else if( status == 'failure' ) {
failure_handler();
}
}
}
};
try {
this.req.open("GET", url, false);
//this.req.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded;charset=UTF-8');
//this.req.setRequestHeader("Content-length", params.length);
//this.req.setRequestHeader("Connection", "close");

} catch (e) {
alert(e);
}

this.req.send(params);
.....


STRUTS ACTION:

public ActionForward execute(ActionMapping mapping_,
ActionForm form_, HttpServletRequest request_,
HttpServletResponse response_) throws Exception {

//...doing some business processing here

PrintWriter out = response_.getWriter();
String outLine = (stat == true) ? "success" : "failure";
System.out.println("Response String - " + outLine);
//out.print(outLine);
out.write(outLine);

forward = null;
return mapping_.findForward(forward);
 
Joe Ess
Bartender
Pie
Posts: 9264
10
Linux Mac OS X Windows
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
Please Use Code Tags when posting code. It's painful to read that much code without formatting.
How are you invoking your javascript? If you are using an anchor tag or a form, you may be submitting an HTTP request at the same time you are invoking the javascript and the HTTP repsonse is what's loading the blank page.
 
Nina Anderson
Ranch Hand
Posts: 148
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
This is how I'm invoking the javascript:


I tried using the onClick() functionality for input type=button; However, when I do this, the data from the form does not get forwarded to my Struts Action class. That's why I decide to use onSubmit() instead.
 
Joe Ess
Bartender
Pie
Posts: 9264
10
Linux Mac OS X Windows
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
If you submit the form, the page will reload. That's the way forms work.
You will have to use javascript to submit your request in order to parse the response without reloading the page.
 
Nina Anderson
Ranch Hand
Posts: 148
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
I understand what you are saying but I honestly don't know the solution to this. Since the user input is a file, I don't know how to pass the file information to a url parameter. I'm new to AJAX so I have no clue how this works. Unfortunately, I've been struggling with this for 2 wks now.

PLS...HeLP.
 
Gregg Bolinger
GenRocket Founder
Ranch Hand
Posts: 15302
6
Chrome IntelliJ IDE Mac OS X
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
Originally posted by Nina Anderson:
I understand what you are saying but I honestly don't know the solution to this. Since the user input is a file, I don't know how to pass the file information to a url parameter. I'm new to AJAX so I have no clue how this works. Unfortunately, I've been struggling with this for 2 wks now.

PLS...HeLP.


You can't post file upload data through an Ajax request. Ajax won't handle binary data.
 
Nina Anderson
Ranch Hand
Posts: 148
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
That's the reason why I'm posting this question to find the Solution!

There has to be a way, because most websites display a progress bar on a page while the user waits for Ajax to submit the file to the background layer to be uploaded and processed. So, how do those people submit the binary files without the page reloading???
 
Gregg Bolinger
GenRocket Founder
Ranch Hand
Posts: 15302
6
Chrome IntelliJ IDE Mac OS X
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
Originally posted by Nina Anderson:
That's the reason why I'm posting this question to find the Solution!

There has to be a way, because most websites display a progress bar on a page while the user waits for Ajax to submit the file to the background layer to be uploaded and processed. So, how do those people submit the binary files without the page reloading???


With an IFrame. Google is your friend.

Google Search
 
  • Post Reply
  • Bookmark Topic Watch Topic
  • New Topic