• Post Reply Bookmark Topic Watch Topic
  • New Topic

Ajax : when a large no. of form fields  RSS feed

 
tapeshwar sharma
Ranch Hand
Posts: 245
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
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
Author and ninkuma
Marshal
Posts: 66304
152
IntelliJ IDE Java jQuery Mac Mac OS X
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
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
Author and ninkuma
Marshal
Posts: 66304
152
IntelliJ IDE Java jQuery Mac Mac OS X
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
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
Ranch Hand
Posts: 245
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
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
Author and ninkuma
Marshal
Posts: 66304
152
IntelliJ IDE Java jQuery Mac Mac OS X
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
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
Ranch Hand
Posts: 245
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
<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
Author and ninkuma
Marshal
Posts: 66304
152
IntelliJ IDE Java jQuery Mac Mac OS X
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
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
Ranch Hand
Posts: 245
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
[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
Ranch Hand
Posts: 245
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator


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
Author and ninkuma
Marshal
Posts: 66304
152
IntelliJ IDE Java jQuery Mac Mac OS X
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
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
Ranch Hand
Posts: 245
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
Sorry about that. Is this better ?



toString() of the invoiceSearchCriteria is given below:
 
Bear Bibeault
Author and ninkuma
Marshal
Posts: 66304
152
IntelliJ IDE Java jQuery Mac Mac OS X
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
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
Ranch Hand
Posts: 245
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
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
author
Rancher
Posts: 15385
6
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
post does not use ? in the parameter list.

Eric
 
tapeshwar sharma
Ranch Hand
Posts: 245
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator

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
Author and ninkuma
Marshal
Posts: 66304
152
IntelliJ IDE Java jQuery Mac Mac OS X
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
That's not how JavaRanch works.

But I will point out the following lines to you:

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
Author and ninkuma
Marshal
Posts: 66304
152
IntelliJ IDE Java jQuery Mac Mac OS X
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
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:
 
tapeshwar sharma
Ranch Hand
Posts: 245
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator

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
Author and ninkuma
Marshal
Posts: 66304
152
IntelliJ IDE Java jQuery Mac Mac OS X
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
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
Ranch Hand
Posts: 245
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator

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
Ranch Hand
Posts: 245
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
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
Author and ninkuma
Marshal
Posts: 66304
152
IntelliJ IDE Java jQuery Mac Mac OS X
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
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
Author and ninkuma
Marshal
Posts: 66304
152
IntelliJ IDE Java jQuery Mac Mac OS X
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
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
Ranch Hand
Posts: 245
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
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
Author and ninkuma
Marshal
Posts: 66304
152
IntelliJ IDE Java jQuery Mac Mac OS X
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
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.
 
With a little knowledge, a cast iron skillet is non-stick and lasts a lifetime.
  • Post Reply Bookmark Topic Watch Topic
  • New Topic
Boost this thread!