Ajax : when a large no. of form fields

[tapeshwar sharma]

Hi,
I am new to AJAX, though quite old to HTML, Javascript etc.
We have a AJAX + Spring + hibernate Architecture here.
Till now I used to append all data in QueryString and there wasn't much form data.
Now, a new page (or a chunk of page) needs to be developed that has a lot of form fields.
Question:
Is there any way to "submit" form data through a AJAX call without having to append all data as Query parameters in the URL ? I mean just in the way we call form.submit (javascript) or use a input type "Submit" (HTML) ina Non-AJAX application.
Or may be some AJAX library is available that will do the dirty job ?
regards,
Prashant

[Bear Bibeault]

Same as with a form submission: use a POST rather than a GET. Then the request parameters go in the body of the request rather than on the URL.

[Bear Bibeault]

By the way: with Ajax it is your responsibility to correctly format the request body when submitting a post. Be sure that you properly encode the names and values.

If you are not already using an Ajax-enabled JavaScript library, you should be. They will make this much much easier. I recommend one of Prototype or jQuery, the latter having the easiest Ajax support in my opinion.
[ May 21, 2008: Message edited by: Bear Bibeault ]

[tapeshwar sharma]

just doing a POST will do?
I think I tried that earlier but did not work.
But being a author, you can't be wrong.
Can you educate me more about the need to encode ?
We don't always do it when we do not use AJAX.
Even better, may be you can give me a link or something to implement AJAX in a better way then a raw way like this.
I mean, something which can get me started quickly.

[Bear Bibeault]

Originally posted by prashant bhardwaj:
just doing a POST will do?

Yes. Assuming you do the post properly. With a POST, the request parameters go in the request body, not on the URL. If you leave the params on the URL, then you're doing the POST incorrectly.

I think I tried that earlier but did not work.

Your monitor blew up? (Just saying "it doesn't work" isn't useful.)

But being a author, you can't be wrong.

Incorrect. I can be as wrong as anyone else, but in this case, I'm not.

Can you educate me more about the need to encode ?

All request parameters should be encoded to make sure that special characters don't screw up the parsing.

We don't always do it when we do not use AJAX.

The browser takes care of it when you submit a form. Check out the encodeURIComponent() method.

Even better, may be you can give me a link or something to implement AJAX in a better way then a raw way like this. I mean, something which can get me started quickly.

I like this article for understanding the basics.

Again, I will urge you to adopt jQuery or another Ajax-capable library to do this. It will make your life much simpler.

[ May 21, 2008: Message edited by: Bear Bibeault ]
[ May 21, 2008: Message edited by: Bear Bibeault ]

[tapeshwar sharma]

<quote>
quote:I think I tried that earlier but did not work.

Your monitor blew up? (Just saying "it doesn't work" isn't useful.)
</quote>

Ok, here's the Javascript that I am using:
<code>
function onInvoiceSearch(url){
var urlString = url;
document.getElementById('progressBar').style.display = "block";
/** if this code (appends data as query string) is uncommented,
** then the form data is duly received by the Spring Web MVC.
** Without this code, the Spring Command object (the Java encapsulation
** of form Data) is populated with nulls.

if(null != document.forms[0])
urlString = urlString+"?account="+document.forms[0].account.value
+"&invoice="+document.forms[0].invoice.value
+"&airbill="+document.forms[0].airbill.value;

}
**/
request = createRequestObject () ;
request.onreadystatechange = onResponse ;
request.open ("POST", urlString, true) ;
request.send (urlString) ;
document.getElementById('progressBar').style.display = "none";
document.getElementById("rightBottom").innerHTML=request.responseText;
}
</code>
toString() of the invoiceSearchCriteria is given below:
<code> com.xxx.common.InvoiceSearchCriteria@ef1df6[account=<null>,invoice=<null>,airbill=<null>]
</code>

[Bear Bibeault]

This is a recording: DO NOT put the request parameters on the URL. Also, do not put the whole URL in the request body. Just the request parameters.

[tapeshwar sharma]

[code]
This is a recording: DO NOT put the request parameters on the URL. Also, do not put the whole URL in the request body. Just the request parameters.
[\code]

Please note :The code that appends the request parameters is commented.
Let me repeat : if I do not append the data as query parameters, the data is not sent to Spring MVC.

[tapeshwar sharma]

This is a recording: DO NOT put the request parameters on the URL. Also, do not put the whole URL in the request body. Just the request parameters.

Please note :The code that appends the request parameters is commented.
Let me repeat : if I do not append the data as query parameters, the data is not sent to Spring MVC.

[Bear Bibeault]

Please be sure to use UBB code tags when posting code to the forums. Unformatted code is extremely hard to read and many people that might be able to help you will just move along. Please read this for more information.

Additionally, including commented-out code -- which is practically impossible to figure out in unformatted code -- makes it that much harder.

Perhaps you could go back and fix the code in your post.

[tapeshwar sharma]

Sorry about that. Is this better ?

function onInvoiceSearch(url){
var urlString = url;
document.getElementById('progressBar').style.display = "block";
/** if this code (appends data as query string) is uncommented,
** then the form data is duly received by the Spring Web MVC.
** Without this code, the Spring Command object (the Java encapsulation
** of form Data) is populated with nulls.
 
if(null != document.forms[0])
urlString = urlString+"?account="+document.forms[0].account.value
+"&invoice="+document.forms[0].invoice.value
+"&airbill="+document.forms[0].airbill.value;
 
}
**/
request = createRequestObject () ;
request.onreadystatechange = onResponse ;
request.open ("POST", urlString, true) ;
request.send (urlString) ;
document.getElementById('progressBar').style.display = "none";
document.getElementById("rightBottom").innerHTML=request.responseText;
}

toString() of the invoiceSearchCriteria is given below:

com.xxx.common.InvoiceSearchCriteria@ef1df6[account=<null>,invoice=<null>,airbill=<null>]

[Bear Bibeault]

You are still using the same string for the URL and the request body.

The URL should be just the URL of the server-side resource you want to contact.

The request body should be the encoded request parameters (everything that you'd noramlly put after the ? for a GET).

[tapeshwar sharma]

Sorry for being this dumb.I was born like that.
I am not clear what exactly do you mean.
May I ask you to correct this code and paste it back ?

[Eric Pascarello]

post does not use ? in the parameter list.

Eric

[tapeshwar sharma]

post does not use ? in the parameter list.

And where exactly do you see that "?" in the code above ?
The only part that has it has been commented.
The comments are there not to confuse anyone but to help them see the difference between the code that works, and the code that doesn't work.

See, its clear that I do not know (thats the very reason I am asking you), so there's no point in harping upon how I am not able to see things which are so obvious to you guys.
Those things are not obvious to me and thats why I am asking.
Repeat : can anybody correct the code and paste it back ?
It would take less time than this to and fro.

[Bear Bibeault]

That's not how JavaRanch works.

But I will point out the following lines to you:

request.open ("POST", urlString, true) ;
request.send (urlString) ;    

In open() you should be passing the URL; in send(), you should be passing the request body. However, in these lines you are passing the same thing to both, so it cannot be right.

In open(), pass the URL to the server side resource with no query string.

In send(), pass the properly encoded query string (without a leading ?)

That's as simple as I can make it.
[ May 22, 2008: Message edited by: Bear Bibeault ]

[Bear Bibeault]

And at the risk of sounding like a broken record, if you were to try to do this with jQuery and its Forms Plugin, the entire code to take an existing form and submit it through Ajax would be:

$('#formId').ajaxSubmit();    

[tapeshwar sharma]

In send(), pass the properly encoded query string (without a leading ?)

Thank you for the reply.
Assuming that the query string contains form data,
lets say I do not require to encode the data.
Is it still mandatory to pass the not encoded query string here?

regards,
Prashant

[Bear Bibeault]

Originally posted by prashant bhardwaj:
Assuming that the query string contains form data,

Yes, just as if you were going to pass it on the URL for a GET.

lets say I do not require to encode the data.

You are required to encode it. Otherwise, special characters in the data (like =, and space, and & etc) will screw up the decoding on the server.

Is it still mandatory to pass the not encoded query string here?

Only if you want to send the data to the server. In other words: yes. Otherwise, how is the data going to get sent?

[tapeshwar sharma]

In other words: yes. Otherwise, how is the data going to get sent?

Alright, that was the clarification required originally.
In a nutshell, If we are not using a library like jQuery etc., then there is no way other than query string (the way of putting the query string might be different) that AJAX can send data to the server irrespective of whether we use GET or POST.
We have to append the data as query string while using AJAX unlike the regular HTML form where all form data is sent automatically upon calling form.submit.

Please confirm this and I promise not to bother you again on this topic.

[tapeshwar sharma]

To put it another way : the aim was to send data to the server without their being any need to manually handle a large no. of form fields using AJAX.
After your kind clarification, can we say that other than using jQuery etc., there is no way to do it ?
regards,
Prashant

[Bear Bibeault]

When using Ajax, you need to marshal the fields in order to send them to the server. There is no getting around that. Ajax-enabled libraries (jQuery, Prototype, Dojo, etc) will do this for you (as it is so common a need), but someone has to do it.

If you aren't using a library that's going to do it for you, then yes, you need to do it.

[Bear Bibeault]

We have to append the data as query string

With a GET, the query sting is appended to the URL. When doing a POST, it is embedded in the request -- no appending.
[ May 22, 2008: Message edited by: Bear Bibeault ]

[tapeshwar sharma]

Well, with your last but one post I was happy.
Now,after reading your last post, I don't know really.
Is torturing your hobby or profession?...but I guess you feel the same way about me.
Let me try again:
We ALWAYS need to "manually" handle the form data if we are sending it through AJAX, irrespective of whether we do a GET or a POST.Period.
With all respect to your knowledge, can I PLEASE have a Yes or a No for an answer?

[Bear Bibeault]

Originally posted by prashant bhardwaj:
We ALWAYS need to "manually" handle the form data if we are sending it through AJAX, irrespective of whether we do a GET or a POST.

To that question: yes.