Stuck with AJAX implementation on form reload

[Axel Brown]

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

<form name="xForm" METHOD=post ACTION="/ProcessingServlet">		

<br>
<b>Product Brand:</b><br />
<select name="xProduct_Brand" id="xProduct_Brand" onchange="updateProduct();">
  <option value="0" <%= formData.getSelectString("xProduct_Brand", "0", true)%>>- Select</option>
  <% comboContent = ComboHelper.getComboContent(ComboHelper.ProductBrand);
		for(int i=0; i<comboContent.size(); i++) {
			comboData = (ComboData) comboContent.get(i);
		%>
  <option value="<%=comboData.getValue()%>"<%= formData.getSelectString("xProduct_Brand", comboData.getValue())%>><%=comboData.getLabel()%></option>
  <%}%>
</select>

<br><br>

<b>Product:</b><br />
<select name="xProduct" id="xProduct">
  <option value="0" <%= formData.getSelectString("xProduct", "0", true)%>>- Select</option>
  <% comboContent = ComboHelper.getComboContent(ComboHelper.xProduct);
		for(int i=0; i<comboContent.size(); i++) {
			comboData = (ComboData) comboContent.get(i);
		%>
  <option value="<%=comboData.getValue()%>"<%= formData.getSelectString("xProduct", comboData.getValue())%>><%=comboData.getLabel()%></option>
  <%}%>
</select>

<br>

<input type="Submit" name="action" value="Calculate">
<input type="Submit" name="action" value="Reset">

</form>

My AJAX implementation:

getProductList servlet returs XML in the following format:

<product>
<productid>1</productid><productdesc>Product 1</productdesc>
<productid>2</productid><productdesc>Product 2</productdesc>
<productid>3</productid><productdesc>Product 3</productdesc>
</product>

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...

function updateProduct() {
    var url = "getProductList?brandID=";
	var produvtIDValue = document.getElementById("xProduct_Brand").value;
	http.open("GET", url + escape(produvtIDValue), true);
	http.onreadystatechange = handleHttpResponse;
	http.send(null);
}

function handleHttpResponse() {
		
	if (http.readyState == 4) {
		if (http.status == 200) {
                    var product = http.responseXML.getElementsByTagName("product");
					var productid = http.responseXML.getElementsByTagName("productid");
					var productdesc = http.responseXML.getElementsByTagName("productdesc");
                    
					var productElement = document.getElementById('xProduct');
						while(productElement.options.length > 0) {
							productElement.remove(0);
						}
						try {
								productElement.add(new Option("- Select", "0"), null);
						} catch(e){
								productElement.add(new Option("- Select", "0"));
						}
					
					if(product.length>0){
						for(var i=0;i<product.length;i++)
						{
							var prod_id = productid[i].firstChild.nodeValue;
							var prod_desc = productdesc[i].firstChild.nodeValue;
							try{
								productElement.add(new Option(prod_desc, prod_id), null);
							} catch(e){
								productElement.add(new Option(prod_desc, prod_id));
							}
						}
					} 
                }
	}	
}

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

<b>Product:</b><br />
<select name="xProduct" id="xProduct">
<option value="0" ><%= formData.getSelectString("xProduct", "0", true)%>>- Select</option>
</select>

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!

[Bear Bibeault]

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]

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]

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]

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]

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]

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]

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]

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]

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]

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:

$('#mySelect').load('/url/to/create/options');

The response returns the HTML fragment that contains the pre-formatted HTML options. Easy as pie.

[Axel Brown]

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]

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]

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]

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]

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]

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:

<select id="myDropdown" name="someValue">
  <c:if test="${not empty param.someValue}">
    <jsp:include page="/makeSomeOptions"/>
  </c:if>
</select>

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]

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]

[Pat Farrell]

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.