29

I have a form with two ModelAttributes one is citizens and the other is punishment. The two objects are separated by jquery tabs. I am having problems in getting the items on the form to display properly some are being displayed and some are not. I mean the html elements.

I am not sure how the Controller would look when there is multiple ModleAttributes on the page. Under is a sample of the code:

Page

<title>Citizen Registration</title>

    </head>

    <body>  
        <div id="tabs"> 

        <ul>
            <li><a href="#tab1">Citizen Registration</a></li>
            <li><a href="#tab2">Punishment</a></li>
        </ul>


        <div id="tab1">
            <form:form id="citizenRegistration" name ="citizenRegistration" method="post" modelAttribute="citizens" action="citizen_registration.htm">
                <div id="divRight" class="mainDiv">             
                    <div class="divGroup" id="divCharInfo"> 
                    <fieldset>  
                    <legend>Characteristics Info</legend>
                            <ol>    
                                <li><form:label for="photo" path="photo">Select Photo</form:label>
                                    <form:input path="photo" type="file" id="photo" title="Upload a photo"/><form:errors path="photo" id="errors"/></li>

                                <li>
                                    <label>Select Gender</label>
                                    <form:select path="genderId" id="genderId" title="Select Your Gender">
                                    <form:options items = "${gender.genderList}" itemValue="genderId" itemLabel="genderDesc" />
                                    </form:select>
                                    <form:errors path="genderId" class="errors"/>
                                </li>               

                                <li><form:label for="weight" path="weight">Enter Weight <i>(lbs)</i></form:label>
                                    <form:input path="weight" id="weight" title="Enter Weight"/><form:errors path="weight" id="errors"/>
                                </li> 

                                <li><form:label for="height" path="height">Enter Height <i>(feet)</i></form:label>
                                    <form:input path="height" id="height" title="Enter Height"/><form:errors path="height" id="errors"/>
                                </li> 
                                                .......................


            <div id="tab2">
                <form:form id="punishmentRegistration" name ="punishmentRegistration" method="post" modelAttribute="punishment" action="punishment_registration.htm">

                <ol>
                    <li>
                        <form:label for ="punishmentId" path="punishmentId">Punishment Number</form:label>
                        <form:input path="punishmentId" id="punishmentId"/><form:errors path="punishmentId" id="errors"/>                   
                    </li>

                    <li>
                        <form:label for="crimeRecNo" path="crimeRecNo">Select Crime</form:label>
                        <form:select path="crimeRecNo" id="CrimeRecNo" title="Select Crime">
                        <form:options items = "${crime.crimeList}" itemValue="crimeRecNo" itemLabel="crimeRecNo" title="crimeDesc"/>
                        </form:select>
                        <form:errors path="crimeRecNo" id="errors"/>
                    </li>   

                    <li>
                        <form:label for ="monitoringStDate" path="monitoringStDate"> Start Date </form:label>
                        <form:input path="monitoringStDate" id="monitoringStDate"/><form:errors path="monitoringStDate" id="errors"/>                   
                    </li>


                    <li>
                        <form:label for ="monitoringEnDate" path="monitoringEnDate"> End Date </form:label>
                        <form:input path="monitoringEnDate" id="monitoringEnDate"/><form:errors path="monitoringEnDate" id="errors"/>                   
                    </li>                   
                </ol>               

                </form:form>            
            </div>                      

        </div>

    </body>
</html>

Controller

@RequestMapping(value="citizen_registration.htm", method = RequestMethod.GET)
    public ModelAndView loadPage(HttpServletRequest request,
                                 HttpServletResponse response,
                                 @ModelAttribute Citizens citizens, @ModelAttribute Punishment punishment,
                                 BindingResult result,
                                 ModelMap m, Model model) throws Exception {

//code here

return new ModelAndView("citizen_registration");

This is my code however when i run it nothing in tab2 is displayed andnot all elements in tab1 is shown.

devdar
  • 5,564
  • 28
  • 100
  • 153

3 Answers3

32

I don't think so if you can bind multiple models using the Spring form. In fact you should take a look in the spring binding form. http://static.springsource.org/spring/docs/1.1.5/taglib/tag/BindTag.html Take a look in the sample code. I have not tested the code. Let know in case of any issues.

Model

public class User{

private String username;
private String password;

..Setter and Getters
}

public class UserProfile{
private String firstName;
private String lastName;

setter and getter
}

Controller

@Controller
public class MyController{
    @RequestMapping(....)
    public String newAccountForm(ModelMap map){
        User user = new User(); //Would recommend using spring container to create objects
        UserProfile profile = new UserProfile();

        map.addAttribute('user', user);
        map.addAttribute('profile', profile);

        return "form"
    }




     @RequestMapping(....)
        public String newAccountForm(@ModelAttrbite('User')User user, BindingResult resultUser, @ModelAttribute('UserProfile')UserProfile userProfile, BindingResult resultProfile){

//Check the binding result for each model. If not valid return the form page again
//Further processing as required.

        }
    }

JSP

<%@taglib  uri="http://www.springframework.org/tags" prefix="spring">

<form action="" method="post">

<spring:bind path="user.username">
   <input type="text" name="${status.expression}" value="${status.value}"><br />
        </spring:bind>

<spring:bind path="user.password">
   <input type="password" name="${status.expression}" value="${status.value}"><br />
        </spring:bind>

<spring:bind path="profile.firstName">
   <input type="text" name="${status.expression}" value="${status.value}"><br />
        </spring:bind>
<spring:bind path="profile.lastName">
   <input type="text" name="${status.expression}" value="${status.value}"><br />
        </spring:bind>

<input type="submit" value="Create"/>
</form>
Raunak Agarwal
  • 7,117
  • 6
  • 38
  • 62
  • 1
    what about if you create one class that references these two classes will that work? – devdar Nov 06 '12 at 00:04
  • 1
    Well if you want to go along the standard spring forms. Then to bind multiple models you can create a Form Class containing the models. But I found the spring binding form easier as they remove the requirement to implement an extra class. Moreover, the validation for each model can be done separately. Also, it also provides with the functionality to bind nested models. – Raunak Agarwal Nov 06 '12 at 00:12
  • I understand what you're saying what would you recommend just use separate forms? – devdar Nov 06 '12 at 00:16
  • 2
    Just use spring bind forms. I will post some sample usage to help you. – Raunak Agarwal Nov 06 '12 at 00:19
  • i am new to using spring and i would like to use something that is most efficient to develop and maintain cause i am seeing problems if i use a combine class and i want to query the form or even update – devdar Nov 06 '12 at 00:20
  • i noticed your spring form tags are different from the ones i used. Is these the tags you would have to use when you return an object to the form so that the object would bind to the fields? What i am asking is if your query the database and return an object to the page is this the tags you would need to use to bind whats in the database to the view? – devdar Nov 06 '12 at 00:41
  • let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/19121/discussion-between-raunak-agarwal-and-dev-darin) – Raunak Agarwal Nov 06 '12 at 00:46
  • Not working for me. The form still seems to need a commandName, and the different paths don't work for the second object. – Chris May 21 '14 at 19:53
  • How about doing one standalone class with all these data types and than make some transformation? – deyvw Sep 27 '16 at 13:20
1

I already gave alternate approach in this link here

<form:form method="POST" modelAttribute="applicationGeneralInformation">
  <div class="section2">
    <h2>General Informaion</h2>

    <form:input type="hidden" path="id" id="id"/>
    <label for="app_version">Version</label>: <form:input type="text" id="app_version" path="version"/><br/>
    <label for="app_func_desc">Description</label>: <form:input type="text" id="app_func_desc"
                                                                       path="functionalDescription"/><br/>
   <label for="app_sec_func">Functions</label>: <form:input type="text" id="app_sec_func"
                                                                  path="securityFunctions"/><br/>

</div>
<div class="section2">
  <h2>Application Content</h2>
  <form:form method="POST" modelAttribute="applicationContent">
    <div>
        <h3>CIA Rating</h3>
        <label for="CIARating">CIA Rating</label>: <form:select type="text" id="CIARating" path="CIARating">
        <form:option value="1">1</form:option>
        <form:option value="2">2</form:option>
        <form:option value="3">3</form:option>
        <form:option value="4">4</form:option>
    </form:select><br/><br/>
    </div>
    <div>
        <h3>Business Continuity and Disaster Recovery</h3>
        <div>
            <h4>RTO</h4>
            <label for="RTO">RTO</label>: <form:select type="text" id="RTO" path="RTO">
            <form:option value="1">< 2<sub>Hrs</sub></form:option>
            <form:option value="2">2<sub>Hrs</sub>-4<sub>Hrs</sub>    </form:option>
            <form:option value="3">4<sub>Hrs</sub>-48<sub>Hrs</sub></form:option>
            <form:option value="4">> 48<sub>Hrs</sub></form:option>
        </form:select><br/>
        </div>
        <div>
            <h4>RPO</h4>
            <label for="RPO">RPO</label>: <form:input type="text" id="RPO" path="RPO"/><br/>
        </div>
    </div>
  </form:form>
  <input type="submit" value="Submit">
 </div>
 </form:form>
Community
  • 1
  • 1
Tunde Pizzle
  • 787
  • 1
  • 9
  • 18
0
<script type="text/javascript">
$(document).ready(
        function() {
            $("#userAttendance").submit(
                    function(e) {
                        e.preventDefault();
                        jQuery.ajaxSetup({
                            async : false
                        });
                        var a = "${pageContext.request.contextPath}";
                        alert(a);
                        $.post($(this).attr("action"), $(this).serialize(),
                                function(response) {
                                    $("#showTableByDate").html(response);
                                    jQuery.ajaxSetup({
                                        async : true
                                    });
                                });
                    });
            //Date picker
            $('#datepicker').datepicker({
                autoclose : true
            });
        });

Aniket
  • 11
  • 1