CODEWITHSUNDEEP
struts2
Bhaskar Sharma
Bhaskar Sharma

Reputation: 79

Dependable drop down list in JSP, Struts2

i am working on a project and using Struts2 for it with JSP. In one JSP page, i have two drop down list say dd1 and dd2. The dd2 is dependable on dd1. The values in dd2 should be populated based on the dd1 value. Now i have a java class which gives me all the options for the drop down lists from the database and i am displying them in my JSP using the SELECT tag. How to make the dd2 dependable on dd1? I dont have any knowledge of Ajax. Please help.

Upvotes: 0

Views: 4766

Answers (3)

Umesh Awasthi
Umesh Awasthi

Reputation: 23587

Not a very big fan of any Ajax plugin.If you do not want to use any big fancy Ajax tags and are ready to learn a bit of JQuery or any other java-script framework, i suggest you to use simple ajax call.

Play around with the events when the value in your parent drop-down change call a function and make an Ajax call to your action which can return the values in JSON format (use struts2 JSON plugin), parse the JSON data and fill the other drop-down.

benefits of this approach are

  1. More flexible.
  2. Much light and faster.
  3. No need to add any UN-necessary dependencies. Other approach (IMO not the good one) use Struts2-Jquery plugin to get it done but get ready for any undesirable behavior or any other issue and you have to reply on the Plugin community.

Here is an example as suggested

<s:select list="states" label="State" name="state" onchange="ajaxCallForDistrict();"
id="stateList"></s:select>
<s:select list="districts" label="District" name="district" id="district" />

what i am doing here is that District are dependent upon state so once user select a State from first select i am calling a java-script function on onchange event and here is my ajaxCallForDistrict() function

function ajaxCallForDistrict()
{ 

        var selectedState = document.getElementById("stateList");
        var statedata = selectedState.options[selectedState.selectedIndex].value;
        var formInput='state='+statedata;       
        $.getJSON('search/getDistricts',formInput,function(data) {
            $('.result').html('' + data.districts + '');
            $.each(data.districts,function(index, value){
            var districtid = document.getElementById("district");
            var option=new Option(value,value);
            try{
                districtid.add(option);
            }
            catch(e){
                districtid.appendChild(option);
            }
            });
            });
    }

what i am doing in above function is that i am fetching the value of selected state and giving the Ajax call to getDistricts Action which is simply creating a list of district for the provided state and returning back the result as JSON data. for filling the District select i am looping through the result (JSON) and appending the element in the select box

Upvotes: 1

NIVESH SENGAR
NIVESH SENGAR

Reputation: 1333

I am not sure but may be this can help you...

jsp page

<s:select name= "" lable = "" onchange="javaScriptFunction(element that you have selected);"></s:select>

JavaScript---

<script>
     function javaScriptFunction(element)
    {

        document.LoginForm.action=element+".action";
        document.LoginForm.submit();
    }

</script>

Now map these action in struts.xml
My suggestion is use one action but several different methods.
After that populate the other dropdown Box by using s:iterator.

Upvotes: 0

user1190541
user1190541

Reputation:

JSP are servlets inside so there no way how to make interaction after response is send to client

i would recommend struts2-jquery-plugin - you will be able to solve this problem using ajax and this framework is good place to start if you are not interested in learning javascript (jQuery), showcase

Upvotes: 0

Related Questions