Re: struts selection and Javascript onchange question

Wed, 29 Aug 2001 10:05:34 -0700

>
><%-- In the form - stateProvince -- %>
>
>
> >value="UNITED STATES">
>
>
>
> >value="CANADA">
>
>
>

Get your FREE download of MSN Explorer at http://explorer.msn.com
Hi Robin, Chiji:
 
What I do is to create a Bean (called Option) that I will use to store this properties:
 
optionGroup  <---- The group to which our option is associated (The Country of the Province/State in our case).
optionValue  <---- The value of the option (The Province/State code or whatever you'll store).
optionLabel  <---- The label the option will display (The Name of the Province/State).
 
 
So, In my action, for each Province/State I create an Option Object and put it inside a Vector (ie. 'options'), then I put the Vector in request scope (session If you like).
 
After setting my Vector 'options' in request, I create a Javascript Array in my jsp this way (I will use this Javascript Array to fill my options later with a javascript function):
 
     <script language="JavaScript">            
            optionGroups = new Array();
            optionValues = new Array();
            optionLabels = new Array();
    
           <logic:iterate id="option" name="options" scope="request" indexId="i">
 
            optionGroups[<bean:write name="i" filter="true"/>] = "<bean:write name="option" property="optionGroup" filter="true"/>";
            optionValues[<bean:write name="i" filter="true"/>] = "<bean:write name="option" property="optionValue" filter="true"/>";
            optionLabels[<bean:write name="i" filter="true"/>] = "<bean:write name="option" property="optionLabel" filter="true"/>";
 
           </logic:iterate>
 
    </script>
 
 
Now, On the OnChange event of the Combobox I call this function like this:
 
   
 
 
 
And this is the Javascript Function I made to change dynamically the options on the other combobox:
 
     <script language="JavaScript">            
        function setNewOptions(cboBox, IdCboBoxToChange) {
            cboBoxToChange = new Object();
 
            if (isNaN(IdCboBoxToChange)){
                cboBoxToChange = eval("document." + cboBox.form.name + "." + IdCboBoxToChange + ";");
            }else{
                cboBoxToChange = eval("document." + cboBox.form.name + "." + cboBox.name + "[" + IdCboBoxToChange + "];");
            }
 
         cboBoxToChange.length = 1;
            for (var i = 0; i < cboBoxToChange.length; i++) {
                cboBoxToChange.options[i] = new Option("-Select-");
                cboBoxToChange.options[i].value = "";
            }
            var j = 1;
            for (var i = 0; i < optionValues.length; i++) {
                if ( cboBox.value == optionGroups[i] ) {
                    cboBoxToChange.options[j] = new Option(optionLabels[i]);
                    cboBoxToChange.options[j].value = optionValues[i];
                    j++;
                }
            }
 
        }
    </script>
 
 
This works both in Internet Explorer and Netscape.
 
I know this is somekinda complex, but it helps you in optimize performance and reusability (You're not reloading the page several times).
Hope this helps :).
 
Cheers.
 
                       Luis Olivares.
            [EMAIL PROTECTED]
   --------------------------------------------------------------
  "Intelligence is the ability to avoid doing
       work, yet getting the work done"
                  --Linus Torvalds--
----- Original Message -----
Sent: Wednesday, August 29, 2001 5:13 AM
Subject: Re: struts selection and Javascript onchange question

Hi,

I had a similar problem and tried to find the best way to handle the problem, without mixing  JavaScript and jsp syntax.  What I came up with was a series of select boxes, some of which were dependant on others, that changed their values based on the selection made in a different select box.  I have a series of select boxes that call the submit method everytime a change is made.  Calling the submit method in the onchange event handler, means that the form posts itself every time selection is made.  I can then track which of the select boxes was changed, read the new value, which has just been submitted and populate the other lists based on the newly changed value.  This is an example of what I mean.

Within jsp page.

<html:form action="/archive.do"> 
    <bean:message key="select.title.seasons" />
    <html:select property="season" onchange="submit()">
        <html:options property="value" collection="seasonsList" />
    </html:select><br/><br/>   

   <html:hidden property="option" value="season" />
   <html:hidden property="action" value="Populate" />
</html:form>  
 
 <html:form action="/archive.do">
     <bean:message key="select.title.oppositions" />
     <html:select property="opposition" onchange="submit()">
          <html:options property="value" collection="oppositionsList" />
     </html:select><br/><br/>    
     <html:hidden property="option" value="opposition" />
     <html:hidden property="action" value="Populate" />
 </html:form> 

Within perform method:

String action = <form instance>.getAction();   // action set by hidden variable in jsp page

String option = <form-instance>.getOption(); // option set by hidden variable in jsp page

if the action is equal to the action specified in the form's hidden variable and option is equal to option specified in the forms hidden variable, then retrieve the selected value of the first select box and populate the arrayList of options for the second select box.

I hope this makes sense.

Chiji.

 

>From: Robin Whitley <[EMAIL PROTECTED]>

>Reply-To: [EMAIL PROTECTED]
>To: "'[EMAIL PROTECTED]'" <[EMAIL PROTECTED]>
>Subject: struts selection and Javascript onchange question
>Date: Tue, 28 Aug 2001 23:25:50 -0400
>MIME-Version: 1.0
>Received: from [64.125.133.20] by hotmail.com (3.2) with ESMTP id MHotMailBD55ABD5004540043217407D85140B790; Tue, 28 Aug 2001 20:26:13 -0700
>Received: (qmail 11536 invoked by uid 500); 29 Aug 2001 03:24:58 -0000
>Received: (qmail 11524 invoked from network); 29 Aug 2001 03:24:58 -0000
>Received: from greensboro.bondisoftware.com (216.54.174.133) by daedalus.apache.org with SMTP; 29 Aug 2001 03:24:58 -0000
>Received: by COSMO with Internet Mail Service (5.5.2653.19)id ; Tue, 28 Aug 2001 23:25:51 -0400
>From struts-user-return-16241-cn081 Tue, 28 Aug 2001 20:27:23 -0700
>Mailing-List: contact [EMAIL PROTECTED]; run by ezmlm
>Precedence: bulk
>list-help:
>list-unsubscribe:
>list-post:
>Delivered-To: mailing list [EMAIL PROTECTED]
>Message-ID: <3125D8065A0AD411A90A009027B11742058942@COSMO>
>X-Mailer: Internet Mail Service (5.5.2653.19)
>X-Spam-Rating: daedalus.apache.org 1.6.2 0/1000/N
>
>I have a form that has a selection box for country. If "UNITED STATES" is
>selected, the form has a stateProvince selection box that should be
>populated with "state" options. If "CANADA" is selected, the stateProvince
>selection box should be populated with the "province" options. I use
>struts_logic:equal based on the "country" bean property
>to accomplish this. The form populates the struts_html:options from a
>collection. The logic works properly if there is an initial value for
>country. However, when the country option is changed, the onchange event
>does not appear to fire the javascript function fillStateProvince.
>
>What I tried to do in the fillStateProvince function was to test the
>selected option for country, and set the value on the bean, hoping that this
>would set my struts_html:options properly. My sysouts indicate that when
>the form loads, it sets the country value to UNITED STATES and then to
>CANDADA, but that when I change country, the function doesn't fie.
>
>I've included the pertinent code. My question, is this the proper way to
>handle this or is there a better way to accomplish the same result.
>Does anybody see anything silly that I am doing in the Javascript, or struts
>logic that is causing this result.
>
>Any help would be appreciated.
>
>
>Thanks,
>
>Robin Whitley
>
>
><% -- Javascript -- %>
>
><%@ page language="Java" contentType="text/html; charset=UTF-8"
>errorPage="error.jsp" %>
>
>
>
>
>
>
>
><%-- In the form - country -- %>
>
>
> >labelProperty="label" />
>
>
>
>
>
> >labelProperty="label" />
>
>
>
> >property="value" labelProperty="label" />
>
>

Reply via email to