Dynamically add rows for spring form using Jquery

Question

Could someone please help me with the following? I use spring for my project and i have a jsp page that has a table in which the first row is loaded from a controller. The table has also an "Add row" button with which the user can add multiple rows to add more records before the submission of the form. What happens is that I use AutopopulatingList so in the submission each row to be handled as a seperate object in the controller. My problem is with the add button. I use JQuery to add dynamically rows. But clone option is not suitable (i think correct me if i am wrong) cause I can not handle the index of the list. I used the following but nothing works.

<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib uri="http://www.springframework.org/tags/form" prefix="form"%>
<%@ taglib uri="http://www.springframework.org/tags" prefix="spring" %>

<%@page contentType="text/html" pageEncoding="UTF-8"%>
 <!DOCTYPE html>
<html>
<head>
    <link href="styles.css" rel="stylesheet" type="text/css">
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>Addcolsinviews Add</title>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/jquery-ui.min.js"></script>
    <script type="text/javascript" src="../js/jquery.dataTables.min.js"></script>
    <script type="text/javascript" src="../js/jquery.validate.min.js"></script>

    <script type="text/javascript">
       $(document).ready(function() {

$("#addStudentButton").click(function() {

          $('#dataTable tbody>tr:last').clone(true).insertAfter('#dataTable tbody>tr:last');     
          return false;

});
});
</script>

    </head>
<body>
    <%@include file="header.jsp" %>
    </div>
    <div class="main">
        <%@include file="tableslist.jsp" %>
        <div class="content">
            <div class="subtitle">ADDCOLSINVIEWS ADD</div>   

  <form:form method="POST" name="addcolsForm" id="addcolsForm" commandName="addcolsinviewsadd">
        <table id="dataTable"> 
            <thead>
                    <tr margin-top="10px">
                        <th>Target View</th>
                        <th>Target Column</th>
                        <th>Source View</th>
                        <th>Source Column</th>
                        <th>Actions</th>
                    </tr>
                </thead>
                <tbody>
                    <tr  id="rowToClone">                           
                     <td>
                            <spring:bind path="addcolsinviewsadd.addcolsinviews[0].targetview">
                                <form:input path="${status.expression}"/>                              
                            </spring:bind></td>            
                        <td>
                            <spring:bind path="addcolsinviewsadd.addcolsinviews[0].targetcol">
                                <form:input path="${status.expression}"/>
                            </spring:bind></td>    
                        <td>
                            <spring:bind path="addcolsinviewsadd.addcolsinviews[0].sourceview">
                                <form:input path="${status.expression}"/>
                            </spring:bind></td>
                        <td>
                            <spring:bind path="addcolsinviewsadd.addcolsinviews[0].sourcecol">
                                <form:input path="${status.expression}"/>
                            </spring:bind></td>  
                        <td><input type="button" id="addStudentButton" value="Add"/></td>

                    </tr>                        
             </tbody>
          </table>                 
           <input id="actionbtn" type="submit" value="Process">            
 </form:form>   
             </div>
      </div>                   
</body>
</html>

and the second trial was the part of the jquery as follows:

    <SCRIPT language="javascript">      

    $(document).ready(function() {

var incrementVar = 0;
$("#addStudentButton").click(function() {
    incrementVar++;
            var appendTxt = "<tr>";
        appendTxt = appendTxt +                     
             "<td><spring\:bind path=\"addcolsinviewsadd.addcolsinviews[" + incrementVar + "].targetview\">";
            appendTxt = appendTxt + 
             "<form\:input path=\"${status.expression}\"/>";
            appendTxt = appendTxt +
             "</spring\:bind></td>";                 

            appendTxt = appendTxt +                     
             "<td><spring\:bind path=\"addcolsinviewsadd.addcolsinviews[" + incrementVar + "].targetcol\">";
            appendTxt = appendTxt + 
             "<form\:input path=\"${status.expression}\"/>";
            appendTxt = appendTxt +
             "</spring\:bind></td>";  

            appendTxt = appendTxt +                     
             "<td><spring\:bind path=\"addcolsinviewsadd.addcolsinviews[" + incrementVar + "].sourceview\">";
            appendTxt = appendTxt + 
             "<form\:input path=\"${status.expression}\"/>";
            appendTxt = appendTxt +
             "</spring\:bind></td>";

           appendTxt = appendTxt +                     
             "<td><spring\:bind path=\"addcolsinviewsadd.addcolsinviews[" + incrementVar + "].sourcecol\">";
            appendTxt = appendTxt + 
             "<form\:input path=\"${status.expression}\"/>";
            appendTxt = appendTxt +
             "</spring\:bind></td></tr>";
   alert(appendTxt);   

$("#dataTable tr:last").after(appendTxt);

</script>

The problem with the above is that no row added at all. The page seems to try to add a row but it is too small.. and i get no errors. In the alert of appendTxt the ${status.expression} does not exist. The path is null. I this that this is the problem. Does anybody know if the syntax is ok or if I can write this somehow else??

I dont know what to do and I have already search a lot.. Please I would appreciate your help.

what do you mean 2 click handlers? I have only the addStudentButton for the add button.. — user1516322
– user1516322, Commented Jul 15, 2012 at 22:40
I can see one of them clones and one of them appends the data, this can make a conflict between the two. — Ram
– Ram, Commented Jul 15, 2012 at 23:10
Oh no ... I tried 2 different things. One that clones and it does not work because the index of addcolsinviewsadd.addcolsinviews[0].targetview can not change or I dont know how and the second trial does not even create a new row... — user1516322
– user1516322, Commented Jul 15, 2012 at 23:35
Could someone plz tell me if the form that I have in the code above with the spring binding is able to be cloned ? Cause I think (after a lot of effort and search) that the binding necessary for the new rows is not able to be cloned like this... Should I use Ajax?? I would greatly appreciate someone's help. thank you... — user1516322
– user1516322, Commented Jul 16, 2012 at 14:13

Community · Accepted Answer · 2017-05-23 12:16:18Z

4

There is a very helpful article here... jquery clone form fields and increment id

So the answer is to use clone() and use a regular expression to increment your index. Details and an example are given at above link. Appending a Spring form element will not work as the append is happening browser side and spring form elements are compiled server side. Browsers know nothing of Spring elements.

edited May 23, 2017 at 12:16

CommunityBot

11 silver badge

answered Apr 3, 2014 at 14:37

BoatCode

5805 silver badges14 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Littm · Accepted Answer · 2012-09-30 01:39:45Z

1

If you inspect the HTML source of a page once it has rendered, you'll notice <\form:input> changes to just <\input> due to processing on the server side before it reaches the browser.

Therefore, using jQuery to insert form:input will not work; you will need to input it in its HTML rending form. Look at the already rendered <\tr> 's and copy its content in the same format. (i.e don't use path=, use value=, name=, etc).

edited Sep 30, 2012 at 1:39

Littm

4,9454 gold badges33 silver badges40 bronze badges

answered Sep 29, 2012 at 17:48

Tom Chamberlain

3,10524 silver badges24 bronze badges

Collectives™ on Stack Overflow

Dynamically add rows for spring form using Jquery

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related