Submitting only selected textboxes in a JSP

[Alexey Timokhin]

Good day to you, fellow programmers.

I am working on a JSP project, and I have struck a dilemma of submitting only selected textboxes. The page consists of a table with a person's name, and the amount of time he is working on something per month. So it has 13 columns in total. The months columns have editable textboxes as cells, so it can be edited by the user, and previously stored values are filled into textboxes on page load from a Database. Now the problem is, because when this tool is used, the user might only change 3-4 values at a certain time, so my question is, is there a way to submit only specified textboxes instead of the whole page (decreasing unnecessary processing) or is there no other method but to submit each cell and store it inside the DB?

I took a look at AJAX and its functionality, and it seems to be a good way, but I'm a greenhorn in it (Ba-dum-chhh), so for the sake of conserving time and possibly getting feedback, I came here.

If you have any ideas on other methods of making cells editable to store data, I'm open for suggestions, but for now, is it possible to submit only specified textboxes using JSP only, or do I need AJAX?

[Bear Bibeault]

What you need to understand is that the role of the JSP is to generate the HTML sent to the browser. Once it has done that, its role is over. Any activity that will occur after the page has been loaded and displayed is the realm of JavaScript on the page.

Whether you use Ajax or not to make the submission is up to you.

With regards to understanding JSP's role, perhaps this article will help.

[Alexey Timokhin]

Thank you for the article, it was quite a nice read, but it did not shine any more light on my problem.

I was more looking for ideas and/or suggestions on how to approach the cell-editing table, and afterwards, how to submit it, because the only idea I have is a submit button that submits all cells, which sounds pretty mechanical and inefficient.

[Philip Thamaravelil]

Sounds to me like your trying to perform a "customized submit." To Bear's point, once the page has been rendered, you should use javascript to make changes to the page.

YOUR changes, would include creating/disabling/removing object from the page based on your required logic, then, once ready.. submit the form via javascript.

Ajax is a "buzz word" for Javascript, or perhaps even a javascript plugin like jQuery. You can definitely communicate to your backed to save your changes using jQuery.

Good luck.

Cheers,
Philip

[Bear Bibeault]

Philip Thamaravelil wrote:Ajax is a "buzz word" for Javascript

I would disagree with that. Certainly, you need to use JavaScript to use Ajax, but saying "use Ajax" doesn't mean to just use JavaScript. Ajax is just a small part of JavaScript.

You can definitely communicate to your backed to save your changes using jQuery.

On this we agree. Ajax without jQuery is a royal pain seven ways to Sunday.

[Bear Bibeault]

Alexey Timokhin wrote:Thank you for the article, it was quite a nice read, but it did not shine any more light on my problem.

The point of the article was not to give you a solution to your specific problem, but to point out the answer to your question of whether this can be done in the JSP. The role of JSP stops when the page is sent to the browser.

On the page you'll need to use JavaScript to either marshal the values you want into an Ajax call, or perhaps disable all but the values you want and perform a normal form submission. Which makes the most sense depends on many factors that we don't know.

[Philip Thamaravelil]

Bear Bibeault wrote:
... but saying "use Ajax" doesn't mean to just use JavaScript. Ajax is just a small part of JavaScript.

I'm curious, explain how one would make an AJAX call without the use of Javascript.

Very interesting considering AJAX stands for Asynchronous JavaScript and XML, and most modern implementations don't use XML at all, they use JSON. AJAX has stuck around in terms of terminology simply because it's a "buzz word."

[Alexey Timokhin]

I think you are right, I did have a slightly skewed view of a JSP. I understood the server side/client side difference, but what is the underlying code for a submit button/function? If it sends the information to the server, would that make it a default JS function that sends the HTTP request? (I never gave such details much thought :P )

Back on topic: Submit button is overkill. I think a more optimal way would be to assign an onClick or onChange function to each textbox and store the values and the index of the textbox and on Save, submit the request.

Am I allowed to access my bean from inside <script>, or will that make veterans frown upon my style?

[Philip Thamaravelil]

Alexey Timokhin wrote:Am I allowed to access my bean from inside <script>, or will that make veterans frown upon my style?

Javascript is used to manipulate the DOM elements. So you'll need to store your needed bean values in the DOM in order to access them via JS.


Cheers,
Philip

[Bear Bibeault]

Philip Thamaravelil wrote:I'm curious, explain how one would make an AJAX call without the use of Javascript.

Don't be ridiculous. That's not what I said. While Ajax is a part of JavaScript, it's not a buzzword that just means "JavaScript", anymore than Servlets is a buzzword that represents all of Java.

[Alexey Timokhin]

Philip Thamaravelil wrote:

Alexey Timokhin wrote:Am I allowed to access my bean from inside <script>, or will that make veterans frown upon my style?

Javascript is used to manipulate the DOM elements. So you'll need to store your needed bean values in the DOM in order to access them via JS.


Cheers,
Philip

I'm not really sure what you mean by that. What I had in mind was something like <script> if($(this)) <jsp:setProperty....> </script>, where in the bean I would have an array of some sort that would store the needed values.

[Bear Bibeault]

Alexey Timokhin wrote:I think you are right, I did have a slightly skewed view of a JSP. I understood the server side/client side difference, but what is the underlying code for a submit button/function? If it sends the information to the server, would that make it a default JS function that sends the HTTP request? (I never gave such details much thought :P )

That's functionality provided by the browser.

Am I allowed to access my bean from inside <script>, or will that make veterans frown upon my style?

I think you need to read that article again. The bean is long gone by the time your page hits the browser.

Philip Thamaravelil wrote:So you'll need to store your needed bean values in the DOM in order to access them via JS.

No, they don't need to be stored in the DOM. They could be if that makes sense, but if the bean values don't need to be associated with particular elements, I'd just create a JavaScript construct that captures the required values.

But I suspect that the question was really whether methods in the bean could be called? If so, then no, the bean no longer exists.

[Bear Bibeault]

Alexey Timokhin wrote:
I'm not really sure what you mean by that. What I had in mind was something like <script> if($(this)) <jsp:setProperty....> </script>, where in the bean I would have an array of some sort that would store the needed values.

Read the article again. You haven't yet grokked the fact that once the page is sent to the browser where the JavaScript is evaluated. The JSP and any beans are long dead and gone.

[Alexey Timokhin]

Bear Bibeault wrote:

Alexey Timokhin wrote:
I'm not really sure what you mean by that. What I had in mind was something like <script> if($(this)) <jsp:setProperty....> </script>, where in the bean I would have an array of some sort that would store the needed values.

Read the article again. You haven't yet grokked the fact that once the page is sent to the browser where the JavaScript is evaluated. The JSP and any beans are long dead and gone.

Oooooh!

Would that mean I need to create some memory spaces inside JS and store the values there, and on Submit or page reload, store the values inside the bean, do the needed processing, and display what needs to be displayed?

Didn't know there so many little things haha.

[Philip Thamaravelil]

Bear Bibeault wrote: They could be if that makes sense, but if the bean values don't need to be associated with particular elements, I'd just create a JavaScript construct that captures the required values.

Again... you COULD create a construct if that makes sense,but is not necessarily the best way. obviously there is more than one way to accomplish the goal. A construct is simply your opinion and personal preference, but it would be splitting hairs to discuss the advantages either way.

[Philip Thamaravelil]

Alexey Timokhin wrote:
Would that mean I need to create some memory spaces inside JS and store the values there, and on Submit or page reload, store the values inside the bean, do the needed processing, and display what needs to be displayed?

Alexey,
I believe your mixing two separate approaches for saving the data.

1. Form submission
- You'll need to store your Bean values in the DOM (as input/checkbox/etc.. elements inside your <form> tag) NOT as javascript variable.
- Once the user clicks submit, because they are in the DOM, they would be visible to your destination page/servlet/etc...

2. Ajax
- You would not require the submission of the form. You don't require the form tag at all most likely.
- With the triggering of an event (onclick, onchange, etc..) you can make an ajax call (with Jquery or javscript) and access your bean values store as javascript variables to save your data.

Make sense?

Also, to Bear's point, your bean is long gone by the time the page renders. So you would not be able to "store the values inside the bean."


Cheers,
Philip

[Bear Bibeault]

Philip Thamaravelil wrote:Again... you COULD create a construct if that makes sense,but is not necessarily the best way

As I said. Either approach could be valid. I was pointing out that it doesn't need to be one way or the other,

[Alexey Timokhin]

It all made sense (and actually cleared some mysteries to me) up until this point.

Philip Thamaravelil wrote:
... and access your bean values store as javascript variables to save your data.

I'm kind of stumped. May you provide an example?

Let's work with my case, if possible. I want to store the name of the textbox and the value currently in the textbox. I would use an onChange function for each textbox and get those two values for. So what I need is then to pass those two values somewhere to process (algorithm to get the user name and store in the database). How and where do I store and process, is my question.

Side-note: to be honest, I expected less from this forum, so thanks a lot guys. It has a bigger "educational" emphasis than other communities.

[Bear Bibeault]

Alexey Timokhin wrote:It has a bigger "educational" emphasis than other communities.

That is exactly what separates CodeRanch from the rest. The volunteers here emphasize learning over simply giving answers. That's also why there tend to be "spirited discussions" now and again The emphasis is on getting it done right versus just getting it done.

[Philip Thamaravelil]

Alexey Timokhin wrote:
I'm kind of stumped. May you provide an example?

I noticed before, your using jQuery notation, so I assume you've selected that for your javascript code.


the jQuery website has lot's of realworld examples of what your trying to do:

http://api.jquery.com/jQuery.ajax/


One of the advantages of jQuery is it's asynchronous components that enable to you to communicate to the back-end without leaving the current page.

I suggest playing with both methods (form submittal and jQuery ajax) to better understand the difference in approaches. There are a very different paradigm, both useful and have their own place.


Cheers,
Philip

[Philip Thamaravelil]

Alexey Timokhin wrote:Side-note: to be honest, I expected less from this forum, so thanks a lot guys. It has a bigger "educational" emphasis than other communities.

Couldn't agree more. Great community full of sharp folks.

[Alexey Timokhin]

Alright, then, let's give a try to this AJAX guy.

$(".myClickableTxt").click(function(){
    $.ajax({
              type: "POST",
              url: "MyPage.jsp",
              data: "txt1=Person1&txtvalue1=Value1"
              }).done(function( msg ) {
  alert( "Data Saved: " + msg );
      });
});

That snippet seemed to be the most related to my problem (with some modification).

Apparently, this is how you store the info to the server to the page. This kind of reminds me of the "session" attribute. I assume the key names would all have to be different, and when I want to retrieve the values, I would have to call all those keys from the server? Am I mixing up the process? I was sort of imagining I would be able to store everything somewhere, but not on the server.

Any feedback is appreciated while I dig a bit deeper.

[Bear Bibeault]

Alexey Timokhin wrote:

$(".myClickableTxt").click(function(){
    $.ajax({
              type: "POST",
              url: "MyPage.jsp",
              data: "txt1=Person1&txtvalue1=Value1"
              }).done(function( msg ) {
  alert( "Data Saved: " + msg );
      });
});

OK, just concentrating on this snippet. Here are a few pointers:

This will make a POST request to the server, using the specified URL. From the point of view of the server, it's no different from any other POST request.

Never POST to a JSP. JSP's are for constructing views. Any other usage is a violation of best practices. POST to a servlet always.

While you can constuct your own pre-formatted data value, it's fraught with landmines. Better to let jquery do it: data: { key1: value1, key2: value2 }

Those data values are sent as request parameters that your servlet will retrieve just like any other request parameter. The fact that it's an Ajax request is moot.

Your servlet can do anything with those values that you'd like.

Apparently, this is how you store the info to the server to the page.

If you meant "to the server from the page", then yes.

More in the next post...

[Bear Bibeault]

Alexey Timokhin wrote:This kind of reminds me of the "session" attribute.

Not sure what you mean by that. In any case, the session is available to the target servlet.

I assume the key names would all have to be different, and when I want to retrieve the values, I would have to call all those keys from the server?

Again, they're just request parameters. So if your data value was: { key1: 'Hi', key2: 213 }, you'd retrieve them with:

String key1value = request.getParameter("key1");
String key2value = request.getParameter("key2");

I was sort of imagining I would be able to store everything somewhere, but not on the server.

Well, you can certainly store any values you want in JavaScript variables. But that goes away when the page does, so it's only useful for that page's lifetime *. To persist any values, they need to be sent to the server for persistence in whatever means you deem appropriate.


* HTML5 offers cross-page persistent storage, but you can only count on that if you know your audience will all be using HTML5-capable browsers. Far from a given at this point in time.

[Alexey Timokhin]

Bear Bibeault wrote:

Never POST to a JSP. JSP's are for constructing views. Any other usage is a violation of best practices. POST to a servlet always.

I don't really understand what you mean.

In my JSP, I use several servelts that help me process the pages in table creations and some value retrieving. So how and where would I post it?

What ideally I wanted was to get value the name of each textbox that was clicked and the value that is currently inside of it and store it in an array for processing. After I click some arbitrary button I created, it would refresh the page and process that array inside the bean, which would update the database, so the values displayed in the table would be those updated values.

Would example be in order, or is my case too specific?

[Bear Bibeault]

Alexey Timokhin wrote:

Bear Bibeault wrote:

Never POST to a JSP. JSP's are for constructing views. Any other usage is a violation of best practices. POST to a servlet always.

I don't really understand what you mean.

In my JSP, I use several servelts that help me process the pages in table creations and some value retrieving. So how and where would I post it?

What has happened to create the current JSP is irrelevant. Again, once the page is sent to the browser, all of that is over and done with. From the point of view of the browser, and any JavaScript in the page, you might just as well have hard-coded the HTML page. So stop thinking that there's going to be some sort of interaction with the JSPs or servlets that went into making the page. They're gone and have absolutely nothing at all to do with happens next.

What ideally I wanted was to get value the name of each textbox that was clicked and the value that is currently inside of it and store it in an array for processing. After I click some arbitrary button I created, it would refresh the page and process that array inside the bean, which would update the database, so the values displayed in the table would be those updated values.

It doesn't sound like you need Ajax at all. If you don't need to do anything with the data until after you submit, you just need script on the page to remember which values you've selected for submission, and then to disable all but those values upon submitting the form.

Let me see if I've got the interaction right:

User is presented with a page with text box controls.

User selects specific text boxes for processing. (How, as well as how to visually indicate this TBD)

User clicks submit button.

Selected text box values are submitted to a servlet for processing.

Servlet forwards to a JSP (same one? different?) to show the results of the processing.

Close?

[Alexey Timokhin]

That's sounds like an awesome idea!

Let me try and play around with it, and I'll notify how it went and if works or not.

[Paul Clapham]

Bear Bibeault wrote:

User selects specific text boxes for processing. (How, as well as how to visually indicate this TBD)

It's worth remembering that if the user does not put anything into a text box in a form, then the parameter corresponding to that text box is not sent when the form is submitted. So in one sense the user selects specific text boxes just by using them, and deselects others just by not using them. And that means that the simplest possible way to implement "user selects specific text boxes for processing" may well be just to do nothing.

[Bear Bibeault]

Paul Clapham wrote:It's worth remembering that if the user does not put anything into a text box in a form, then the parameter corresponding to that text box is not sent when the form is submitted.

Not quite so. A request parameter will still be sent, but with an empty value.

Now checkboxes are another matter. No parameter is ever sent for an unchecked checkbox.

[Alexey Timokhin]

I can't really use that approach.

I am populating those text boxes from the database, and if the DB cell is empty or null, I treat it as 0 (all text boxes are for numeric storage). The only problem I have is I'm not really sure how to submit only specified text boxes. Doesn't "submit" submit all components inside the form? Or can I submit values in a form only judging by their "class", or "id" or some other identifier?

And is there a way to check EVERYTHING that was submitted? Because the key is the text box "name" value, and the request call receives the value through the component's "name"

[Paul Clapham]

Alexey Timokhin wrote:I am populating those text boxes from the database, and if the DB cell is empty or null, I treat it as 0 (all text boxes are for numeric storage).

You could treat empty as "not selected" instead. Then the user would "select" a parameter which was supposed to be zero by typing a zero into its box. Or "deselect" it by erasing the value which was there. Your alternative is to provide a different mechanism whereby the user would have to explicitly "select" a text box.

The only problem I have is I'm not really sure how to submit only specified text boxes. Doesn't "submit" submit all components inside the form? Or can I submit values in a form only judging by their "class", or "id" or some other identifier?

What does "specified" mean there?

And what is the point of trying to avoid submitting everything in the form? If you're going to provide a checkbox, or something, where the customer has to select the data, then those checkboxes are uploaded to the server and the servlet which processes them can look at them and see what was selected.

And is there a way to check EVERYTHING that was submitted? Because the key is the text box "name" value, and the request call receives the value through the component's "name"

Yes, you can get a list of the parameters which were submitted on the URL. If that was what that question meant.

[Alexey Timokhin]

Making a zero inside a text box initially is a preference, so I cannot change it.

Here is an example to define what I meant by "specified": You have 10 text boxes on your page. All of them have information in it. Instead of submitting all of them, I want to submit 1,5,7 and 10th text box, and omit the others.

When form is submitted, I would need some of the component's attributes, not only its parameters. Is it possible?

[Bear Bibeault]

What I would do is to put a special class name on the text boxes that you want submitted. In the submit handler, disable all text boxes that do not have this class, then allow the submission (return true).

Disabled text boxes do not participate in the submission, so you'll only get the ones marked with the special class name.

[Bear Bibeault]

P.S. If you are a beginner to jQuery, I'd actually approach it as follows: initially give all the text boxes the class and remove it from the text boxes you want submitted. That will make it easy to disable the text boxes that still have the class name without having to use jQuery's :not filter (which can be confusing for novices).

[Paul Clapham]

Alexey Timokhin wrote:Here is an example to define what I meant by "specified": You have 10 text boxes on your page. All of them have information in it. Instead of submitting all of them, I want to submit 1,5,7 and 10th text box, and omit the others.

That isn't very helpful because you don't say how the user is "specifying" a text box. Or is something else doing the "specifying"?

When form is submitted, I would need some of the component's attributes, not only its parameters. Is it possible?

Attributes? What attributes? Anyway don't forget that you wrote the JSP which generates the form. You could perfectly well save information about each of the components in the session and then use it later when you process the request from the form.

[Alexey Timokhin]

I had the same idea as Bear had in mind.

I would add a class to all text boxes that can be edited. When they are clicked, I would run a JQuery function which would add a class "txtClicked" to it. After that, I would submit those text boxes and then process them. However, I did not know that disabling a text box does not submit it. Is it as simple as adding disabled = "disabled" to text box attributes, or is there more to it?

And Paul, regarding your question, here is an example:

<input class = "txtEditable" type = "text" name = "PersonOneRowOne" value = "0.3"></input>

Combining with the previous idea, when the text box is clicked, I would add "txtClicked" class to it. When I click the "Submit" button, I would run a JQuery function that would disable each text box that does not have "txtClicked" class and then I would submit the form.

May you guys confirm if that is what you had in mind, or if that is a good idea?

And now, the processing part.

My question was, when I submitted it, can I retrieve the "name" property from the submitted values? The way I did it is I encapsulated the name of the person and the month inside "name", so to process the value, I do need the "name" of the text box. Example: name = "PersonOneRowOne" means the value of first person on the list, and the first month was changed, so that is which value has to be changed in the database. Because each text box name is unique, I cannot use request.getParameter("[TextBoxNameHere]"), that is why I thought of the idea of iterating through everything that was submitted.

Suggestions/corrections are welcome, criticism is even more welcome.

[Bear Bibeault]

If you cannot predict the param names in advance then iterating through the entire set is really all you can do.

[Alexey Timokhin]

That's a bit weird, though.

If request.getParameter("name") gets the value, that means it stores "name" somewhere and retrieves it to check what value was assigned to it. So shouldn't there be a way to access that storage to check for all component names that were stored?

There are several other people who had the same question about retrieving the name of the component, but none of them seem to have been resolved.

[Bear Bibeault]

Not sure what you mean by "stored".

When the form is submitted as a POST, the name/value pairs are encoded into the request body. The servlet engine obtains and parses them and makes them available to your servlet. They "go away" when the servlet completes.