Dynamic Selection Population Using Round Trip

Hey All,

I'm trying to use Spring MVC to dynamically re-populate options of one <SELECT> box based on the selection of another. I found this related topic - http://forum.springframework.org/showthread.php?t=10686 - but there wasn't much conclusion there.

One way might be to populate JavaScript objects, but I'm trying to stay away from that. It seems like the JavaScript method is far less extensible. So I'd like to perform a "silent" round trip to grab the new options. Does anyone have any ideas as to how I might be able to do this, and repopulate the options without refreshing the entire page. I'd hate to have the user fill out an entire page, only to have it cleared out when they perform the selection.

I'm thinking DHTML, but I'm not that great with view technology, and am not sure how I would go about this. Any help would be greatly appreciated.

Thanks,
James Winans

Oh yeah, and I should probably mention that I'm using JSP with the spring tags.

Thanks,
James Winans

For the dependent (parent/child) <select> controls we have, we just do a submit when the parent <select> changes. It's quite fast.

We also tweaked the way that validation occurs so that validation messages only appear when you try to move to a new page or save, etc., and not when a <select> changes.

All of the dependencies between html controls are specified in the Spring config file using a convention we've created, and managed server-side in the controller.

So there's very little javascript, and zero dependency information for the <select>'s in the JSP page.

I'd try to steer you towards an approach like this rather than, say, using Microsoft's ActiveX control or HttpDOMRequest (can't remember exact name) to do programmatic request/responses. I've gone that way before and it's amazing what a fat, bloated page you end up with, defeating any small gains you made by saving a few POSTs.

This sounds like the way I'd like to go. I'm still working on it. Would you mind sharing the code to one of those controllers?

Thanks,
James Winans

or you can use clientside remote scipt. please see

http://www.ashleyit.com/rs/

for detail.

Hey, thanks jfd, this sounds promissing.

-James

Hey All,

Okay, I actually found a simple way using nothing more than what the Spring MVC has to offer - very, very little JavaScript. My JSP looks something like this...

Code:

---

<P>
<H2>Parent / Child Relationships&#58;</H2>
<TABLE>
    <TR>
        <FORM name="children" method="GET" action="<c&#58;url value="/childAction.htm"/>">
        <INPUT type="hidden" name="submitType" value="submit"/>
        <TD>Child&#58;</TD>
        <TD>
            <SELECT name="parentId" onchange="
                javascript&#58;
                    document.forms&#91;'children'&#93;.elements&#91;'submitType'&#93;.value = 'parentSelect';
                    document&#91;'children'&#93;.submit&#40;&#41;">

                <c&#58;forEach var="parent" items="$&#123;model.parentTypes&#125;">
                    <c&#58;if test="$&#123;model.parentId == parent.id&#125;">
                        <OPTION selected="<c&#58;out value="$&#123;model.parentId&#125;"/>"
                            value="<c&#58;out value="$&#123;parent.id&#125;"/>">
                                <c&#58;out value="$&#123;parent.name&#125;"/></OPTION>
                    </c&#58;if>
                    <c&#58;if test="$&#123;model.parentId != parent.id&#125;">
                        <OPTION value="<c&#58;out value="$&#123;parent.id&#125;"/>">
                            <c&#58;out value="$&#123;parent.name&#125;"/></OPTION>
                    </c&#58;if>
                </c&#58;forEach>
            </SELECT>

            <SELECT name="childId">
                <c&#58;forEach var="child" items="$&#123;model.childTypes&#125;">
                      <c&#58;if test="$&#123;model.child.id == child.id&#125;">
                          <OPTION selected="<c&#58;out value="$&#123;model.child.id&#125;"/>"
                              value="<c&#58;out value="$&#123;child.id&#125;"/>">
                                  <c&#58;out value="$&#123;child.name&#125;"/></OPTION>
                      </c&#58;if>
                      <c&#58;if test="$&#123;model.child.id != child.id&#125;">
                          <OPTION value="<c&#58;out value="$&#123;child.id&#125;"/>">
                              <c&#58;out value="$&#123;child.name&#125;"/></OPTION>
                      </c&#58;if>
                </c&#58;forEach>
            </SELECT>

        </TD>       
        <TD><INPUT type="submit" name="edit" value="Edit"/></TD>
        </FORM>
    </TR>
</TABLE>

---

Upon loading, this page sets a hidden variable - "submitType" - which I use to trigger the code in the controller that will update the model with the children. It defaults to "submit". Then the onChange event triggers the JavaScript that changes the trigger to the checked value - "parentSelect" - and then submits the FORM to the url - /childAction.htm. That url is then mapped in the servlet context to my controller in the following.

Code:

---

<bean id="childAction" class="com.myCo.myApp.web.spring.child.DynamicChildActionController">
                <property name="editView"><value>childEditRedirect</value></property>
                <property name="formView"><value>selectRelationshipView</value></property>
                <property name="redirectView"><value>selectRelationshipRedirect</value></property>
                <property name="triggerName"><value>submitType</value></property>
                <property name="triggerValue"><value>parentSelect</value></property>
                <property name="application"><ref bean="application"/></property>
</bean>

---

And the controller below recreates the model in the same way as the controller of the JPS view above, only it sets the current parent to the one selected, and reloads the applicable children...

Code:

---

public class DynamicChildActionController extends AbstractController{

    private String redirectView;
    private String editView;
    private String formView;
    private String triggerName;
    private String triggerValue;
    private ApplicationFacade application;
   
    public void setRedirectView(String redirectView) { this.redirectView = redirectView; }
    public void setEditView(String editView) { this.editView = editView; }
    public void setFormView(String formView) { this.formView = formView; }
    public void setTriggerName(String triggerName) { this.triggerName = triggerName; }
    public void setTriggerValue(String triggerValue) { this.triggerValue = triggerValue; }
    public void setApplication(ApplicationFacade locknload) {this.appliction = application; }

   
    protected ModelAndView handleRequestInternal(HttpServletRequest request,
          HttpServletResponse response) throws Exception {
       
        if(request.getParameter(triggerName).equals(triggerValue)){
            Long parentId = new Long(request.getParameter("parentId"));
            Parent parent = application.loadParent(parentId.intValue());
            Collection parentTypes = application.getParentTypes();
            Collection childTypes = application.findChildTypes(parent);
             
            Map model = new HashMap();
            model.put("parentTypes", parentTypes);
            model.put("childTypes", childTypes);
            model.put("parentId", parentId);
           
            return new ModelAndView(formView, "model", model);
        }     
       
        if(request.getParameter("childId")!=null){
            Long childId = new Long(request.getParameter("childId"));
       
            return new ModelAndView(editView, "childId", childId);
        }

        return new ModelAndView(redirectView);

    }
}

---

This is all a modification of my real code, so I'm not sure if it works exactly this way. Since much of this DynamicChildActionController is like the simple controller that displays the initial view with the above form, I'm sure there is a better way to impliment this.
Please post any improvments you might have on this.

Take care,
James Winans