Ajax multiple selects struts 2

Posted on 2010-03-31
Medium Priority
Last Modified: 2013-11-24
I have several Ajax Selects in a form on a struts 2 page.

If the country is changed then the city select is repopulated using an Ajax call. This is working fine.

I have the same thing when the city is changed then the building list is repopulated. This also works fine.

My problem now is that when I change the Country, The city list is repopulated, but the building list is not. So the list of buildings is not relevant to the new list of cities(city selected by default). If I change the country, How can I reload the buildings based on what would be selected by default from the new city list. I basically need to chain these list repopulations.

Any ideas????


Question by:spunog
  • 3
  • 3
LVL 11

Accepted Solution

anilallewar earned 1000 total points
ID: 29303404
You can basically nest the AJAX calls; that is in your function call the Ajax function to populate the building list for each new city loaded.

But this defeats the very purpose of using Ajax, as you are pre-empting the whole data. What I would suggest is to clear the data in the building list when you change country. This would imply that there is no stale data if you view the building list and it will always be re-populated when you select any city.

Author Comment

ID: 29335329
Hi Thanks for your reply. I'm not sure I understand you. I dont have an ajax function as such. This is with struts 2. In my select tag I simply have onchange="javascript:dojo.event.topic.publish('reload_buildings');return false;" there is a div listening for this event and the ajax Action result gets written into the div.

I'm not sure how I can clear another list while doing this.

Also I have a single div for each select.


LVL 11

Expert Comment

ID: 29425625
On change of country, you can call a JavaScript function and then call your city refresh dojo function. Something like below

function changeCountry(selectedValue){
      var select = document.getElementById("buildings");
      select.options.length = 0;      
        //assuming you would do this on change on country
       return false;

The country select tag will call this function

<select id='country' onChange="javascript:changeCountry(this.value)">
[Webinar] Kill tickets & tabs using PowerShell

Are you tired of cycling through the same browser tabs everyday to close the same repetitive tickets? In this webinar JumpCloud will show how you can leverage RESTful APIs to build your own PowerShell modules to kill tickets & tabs using the PowerShell command Invoke-RestMethod.


Author Comment

ID: 29453563
Cool That looks good enough.

One other thing though. What about when the cities are reloaded, buildings are set to size zero, what if the default city is the city that the user actually wants, then they would expect the buildings to contain the buildings of the default city but now the buildings will be blank. In this scenario the user would need to change to another city and then change back to the previous default city in order to see the correct buildings for that city.


Author Comment

ID: 29453972
Maybe I could put a little refresh icon beside each drop down. It would reload the drop down based on the parent selection. It wouldnt be ideal though.
LVL 11

Expert Comment

ID: 29524024
Hmm..you can select the city by setting the selected index of the city drop-down and my guess is that it should fire the Ajax call.

The other thing that you could do is add an option called "Select 1" as the first in the city dropdown and have it selected by default when you load. Voilda, the user HAS to select!!

Featured Post

Receive 1:1 tech help

Solve your biggest tech problems alongside global tech experts with 1:1 help.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

I had a project requirement for a displaying a user workbench .This workbench would consist multiple data grids .In each grid the user will be able to see a large number of data. These data grids should allow the user to 1. Sort 2. Export the …
Introduction This article is the last of three articles that explain why and how the Experts Exchange QA Team does test automation for our web site. This article covers our test design approach and then goes through a simple test case example, how …
The viewer will learn how to implement Singleton Design Pattern in Java.
This tutorial covers a practical example of lazy loading technique and early loading technique in a Singleton Design Pattern.
Suggested Courses

599 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question