• Post Reply Bookmark Topic Watch Topic
  • New Topic
programming forums Java Mobile Certification Databases Caching Books Engineering Micro Controllers OS Languages Paradigms IDEs Build Tools Frameworks Application Servers Open Source This Site Careers Other Pie Elite all forums
this forum made possible by our volunteer staff, including ...
Marshals:
  • Campbell Ritchie
  • Jeanne Boyarsky
  • Ron McLeod
  • Paul Clapham
  • Liutauras Vilda
Sheriffs:
  • paul wheaton
  • Rob Spoor
  • Devaka Cooray
Saloon Keepers:
  • Stephan van Hulst
  • Tim Holloway
  • Carey Brown
  • Frits Walraven
  • Tim Moores
Bartenders:
  • Mikalai Zaikin

Stuck with AJAX implementation on form reload

 
Greenhorn
Posts: 25
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
Hi,

I'm trying to modify an old code to utilze AJAX to populate a product drop down list in JSP.
Original JSP is loading all products (1000+) into the drop down so I decided to fix this with AJAX. I'm not very good at this but have some limited knowledge of Java and need your help!

The problem I have after implementing AJAX drop down box population based on Prodct Brand (which is working) I do not know how to make my selection and drop down population stay after JSP reload after pressing "Calculate" button as I need to do some calculations and get back to the user and still show what he selected before. Not sure how to make this work...


Old JSP form (loads all product brands and products). This is done via set of classes with DAO. After pressing Calculate button all the selections and content are in place

My AJAX implementation:

getProductList servlet returs XML in the following format:


JavaScript that is loaded via separate js file in the header. I got this example from the internet. It does clear the content of the Product drop down as without it drop down was messy and contained previous products from different brand...


I updated JSP Product drop down to make AJAX work. Basically, removed almost everything from it as JavaScript populates it...

My problem is: how can I combain this implementation with my old one so the ComboHelper works and after pressing Calculate and reloading JSP both drop down boxes (Brand and Product) will still have the previosly loaded content and selected in them items?

Many thanks in advance for your help!
 
Sheriff
Posts: 67746
173
Mac Mac OS X IntelliJ IDE jQuery TypeScript Java iOS
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator

Axel Brown wrote:
Original JSP is loading all products (1000+) into the drop down so I decided to fix this with AJAX.


How is using Ajax going to "fix" this? What's broken? What's being "fixed"?
 
Axel Brown
Greenhorn
Posts: 25
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator

Bear Bibeault wrote:

Axel Brown wrote:
Original JSP is loading all products (1000+) into the drop down so I decided to fix this with AJAX.


How is using Ajax going to "fix" this? What's broken? What's being "fixed"?


Apologies for being not clear enough...

The problem is that a product drop down shows currently 1000+ items (list is growing rapidly) and user has to browse through the list in order to select necessary item. I wanted to "fix" this by implementing a Brand Name drop down box that will trigger AJAX call which will populate Product drop down only with around 10-20 items per Brand name. Product table already has brand names associated with each item.
 
Bear Bibeault
Sheriff
Posts: 67746
173
Mac Mac OS X IntelliJ IDE jQuery TypeScript Java iOS
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
Ah, I see. Well. my first suggestion would be to adopt one of the JavaScript libraries to do your Ajax for you. Very few experienced developed will code Ajax "by hand" as you have dome here as it's just too browser-finiscky and error prone. My library of choice is jQuery.

Doing so is likely to cut down your code size considerably and make it much easier to understand.

I've moved this topic to the HTML/JavaScript forum for any further discussion.
 
Bear Bibeault
Sheriff
Posts: 67746
173
Mac Mac OS X IntelliJ IDE jQuery TypeScript Java iOS
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
Why XML in the response. Again, you taking the more difficult rome. JSON is much preferred as it is much easier to digest on the client side.

Or better yet, if the intent of the response is to provided dat to build the options list, build the options list in the response and just plunk it into the select.

I can point you to some example of doing this sort of thing in jQuery if you are interested.
 
Axel Brown
Greenhorn
Posts: 25
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator

Bear Bibeault wrote:Why XML in the response. Again, you taking the more difficult rome. JSON is much preferred as it is much easier to digest on the client side.

Or better yet, if the intent of the response is to provided dat to build the options list, build the options list in the response and just plunk it into the select.

I can point you to some example of doing this sort of thing in jQuery if you are interested.


Any examples would be greatly appreciated!
 
Bear Bibeault
Sheriff
Posts: 67746
173
Mac Mac OS X IntelliJ IDE jQuery TypeScript Java iOS
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
Download the example source code for my book (no purchase necessary).

Look into the chapter 8 code for the "boot closet" example.

There I use jQuery and JSP to create cascading dropdowns easily.
 
Bear Bibeault
Sheriff
Posts: 67746
173
Mac Mac OS X IntelliJ IDE jQuery TypeScript Java iOS
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
You can see the examples in action at: http://bibeault.org/jqia2/

And the cascading dropdowns example at: http://bibeault.org/jqia2/chapter8/bootcloset/phase.3.html
 
Axel Brown
Greenhorn
Posts: 25
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator

Bear Bibeault wrote:You can see the examples in action at: http://bibeault.org/jqia2/

And the cascading dropdowns example at: http://bibeault.org/jqia2/chapter8/bootcloset/phase.3.html


Dr. Bear Bibeault, I appreciate all the samples and links! This all new technologies are actually very new to me and I guess I'm too old to understand/learn them...

Even the "old' way I built it, I just do not understand how to connect dynamically built drop down list via JavaScript/AJAX with JSP on Submit action.
So, after submit and JSP reload I still should see the items selected previously. There has to be a way but I can't find it yet.

 
Bear Bibeault
Sheriff
Posts: 67746
173
Mac Mac OS X IntelliJ IDE jQuery TypeScript Java iOS
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
There is no way to do that automatically. Anything you dynamically built will be lost on refresh.

You either need to structure the app such that a refresh is not necessary, remember the state and restore it (in the JSP, in the script, or both), or just let it be.

Is there something about your workflow that requires a refresh before the user is done with the form?
 
Bear Bibeault
Sheriff
Posts: 67746
173
Mac Mac OS X IntelliJ IDE jQuery TypeScript Java iOS
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
You're never too old to learn! (So, how old are you?)

In any case, loading a set of options into a select element using jQuery is as easy as:
The response returns the HTML fragment that contains the pre-formatted HTML options. Easy as pie.
 
Axel Brown
Greenhorn
Posts: 25
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator

Bear Bibeault wrote:There is no way to do that automatically. Anything you dynamically built will be lost on refresh.

You either need to structure the app such that a refresh is not necessary, remember the state and restore it (in the JSP, in the script, or both), or just let it be.

Is there something about your workflow that requires a refresh before the user is done with the form?


By refresh I mean when user clicks a submit button and all the selections go to a servlet and it returns the calculation results back to JSP. User that can do some adjustments based on calculation results and submit again if necessary.
 
Bear Bibeault
Sheriff
Posts: 67746
173
Mac Mac OS X IntelliJ IDE jQuery TypeScript Java iOS
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
I see, but the answer is the same. You need to have JSP mechanisms on the page to recreate the state. For example, rather than letting the drop downs cascade, you'll need to fill them in when you know the values in advance.

Basically, test to see if you know a value, and if not, set up the page for initial display, if so, set up the page with the displays showing the values. It's likely to be a lot of <c:if>'s and <c:choose>'s on the page.
 
Axel Brown
Greenhorn
Posts: 25
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator

Bear Bibeault wrote:I see, but the answer is the same. You need to have JSP mechanisms on the page to recreate the state. For example, rather than letting the drop downs cascade, you'll need to fill them in when you know the values in advance.

Basically, test to see if you know a value, and if not, set up the page for initial display, if so, set up the page with the displays showing the values. It's likely to be a lot of <c:if>'s and <c:choose>'s on the page.


This is exactly what I do - I do test to see if I have a value from regular JSP built drop downs. But how can I test the values from dynamically built drop down list via JavaScript?
 
Bear Bibeault
Sheriff
Posts: 67746
173
Mac Mac OS X IntelliJ IDE jQuery TypeScript Java iOS
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
Whether the control was built dynamically with JavaScript or not is moot. When the form is submitted, the state of the form at submission time is all that matters. You need to look at the request parameters that were submitted to know what state to recreate.
 
Axel Brown
Greenhorn
Posts: 25
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator

Bear Bibeault wrote:Whether the control was built dynamically with JavaScript or not is moot. When the form is submitted, the state of the form at submission time is all that matters. You need to look at the request parameters that were submitted to know what state to recreate.


Ok, So I got this part working: on submit I get a parameter of the Product and calculation works.
However, when the form gets back to the user my product drop down is empty as it was built via JavaScript/AJAX dynamically on onChange action in brand drop down.

Any way to get that list to the same state as prior submition of the form?
 
Bear Bibeault
Sheriff
Posts: 67746
173
Mac Mac OS X IntelliJ IDE jQuery TypeScript Java iOS
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
Put the logic in the JSP to provide the options so that it doesn't have to be built dynamically once it's submitted a value.

One way I've done this in the past is to have a resource return the fully formed HTML fragment that consists of the options list. This resources can be included in the JSP (when appropriate) or loaded via Ajax. There no need for repeated code as the options list is built by a single resource that can be used in either situation.

For example, if you know your second dropdown has a value that was submitted, your know that you should re-create it in the JSP. So you might do something like:



If the dropdown submitted a value, the test will be true, and the options will be included. If not, then the select will be empty, waiting for you to load it using Ajax to the same resource (/makeSomeOptions) to fetch and include the options dynamically as the result of a client-side event.
 
Axel Brown
Greenhorn
Posts: 25
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
Dear Bear Bibeault,
I wanted to tell you that your guidance has helped me to achieve my goal and to thank you for all your help!

 
Bear Bibeault
Sheriff
Posts: 67746
173
Mac Mac OS X IntelliJ IDE jQuery TypeScript Java iOS
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
 
Rancher
Posts: 4803
7
Mac OS X VI Editor Linux
  • Likes 1
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator

Axel Brown wrote:I wanted to tell you that your guidance has helped me to achieve my goal and to thank you for all your help!


Buy a copy of Bear's book on jQuery. Its a good book, and buying a copy helps pay for Bear's beer.
 
With a little knowledge, a cast iron skillet is non-stick and lasts a lifetime.
reply
    Bookmark Topic Watch Topic
  • New Topic