CODEWITHSUNDEEP
javascriptjqueryformsjspstruts2
vikeng21
vikeng21

Reputation: 531

mapping wrong number of rows from a table in jsp in Struts2

I am working on a Struts2 application and facing a unique issue for which i need your help. The scenario is as below. I am also using Bootstrap for the same.

I have a form as below sample. In the page i can dynamically add New Rows to this form with the New button.

 <form method="post" id="mainForm" action="editForm"/>
 <body onload="Rows()">
           <table id="mainTable" class="table table-striped table-hover table-condensed" cellspacing="0" width="100%">
              <thead>
                <tr>
                  <th>ProcessName</th>
                  <th>PDate</th>
                  <th>Description</th>
                </tr>
              </thead>
              <tbody id="Row">
                <s:iterator value="list" var="voDetails" status="rowStatus">
                    <tr>
                      <td><input  size="8" value="<s:property value="processName" />"/></td>
                      <td><input  size="8" value="<s:date name="date_dt" format="MM/dd/YYYY"/>"/>  </td>
                      <td><input  size="8" value="<s:property value="description"/>"/></td>
                      </tr>
        </s:iterator>
                </tbody>

            <button type="button" class="btn btn-primary btn-xs" onclick="Save()">Save</button>
            <button type="button" class="btn btn-primary btn-xs" onclick="AddNewRow()">AddNewRow</button>
    <button type="button" class="btn btn-primary btn-xs" onclick="Close();">Cancel</button>

The Javascript function Save is as below

 function Save()
  {
     document.forms[0].action = click_save_buttom';
     document.forms[0].submit();
  }


  function AddNewRow()
  {
    // code to add row dynamically to the page
  }

 function Rows(){
    rows = document.getElementById("Row").rows.length; 
    for (i = 0; i < rows ; i++) {
        var row = document.getElementById("Row").rows[i];
        row.setAttribute("rowNum", i);
        //alert("ROW: " + i);
        for (j = 0; j < 3; j++) {
        if(document.getElementById("listSize")!=null || rows > 1)
            row.cells[j].children[0].setAttribute("name", "list[" + i + "]." + names[j]);
        }
    }

}

When i sumbit this form the values are getting mapped to the action and Save is working properly. Save also works when i dynamically add new row to the form.

The issue is that sometimes when this page has for example 1 row and i dynamically add a new row and totally there are 2 rows in the form table. When i submit the form then additional more than 2 rows(mapped to VO's in action) are being passed to the action. These additional rows are present in the previous page which is having a similar form table from where i select a row and land on the current page. The save function is happening for these additional rows(VO's) and after save when the page re loads these additional rows appear in the table.

Not sure why this is happening. I checked the number of rows in the table by putting an alert in Save function and it shows 2 as the length before the form submission. It is after the form submission that additional rows(VO's in action) are being mapped to action.

Can you please help me resolve this issue as i am stuck with it for a very long time now.

Thanks

Vikeng

Upvotes: 0

Views: 121

Answers (1)

Kyle Burkett
Kyle Burkett

Reputation: 1443

New Edit: Ok, to me it looks like your issue is how you are looping. The rows value gives you an accurate number of rows- but you are looping starting with zero until you're greater than the number of rows it returns (would be two extra... which is accurately the problem you describe) Try this instead:

 for (i = 1; i = rows ; i++) {

OLD Edit: Maybe try to call your form by id instead of by form index and see if somehow the form index could be causing the issue in the browser you are working in?

 document.getElementById("mainForm").action = click_save_button;
 document.getElementById("mainForm").submit();

.. and make sure you correct your click_save_button typo, if it is a typo.

OLD: It is very unclear what you are doing here:

 document.forms[0].action = click_save_buttom';

Do you have a code you are running in a document called 'click_save_buttom' ? I believe this adds a form action to the first form on the page... like

 <form action='click_save_buttom'></form>

Also instead of using form index, its better to give the form an id. Instead of submitting a form this way:

 document.forms[0].submit();

consider submitting a form by using button type=submit

Upvotes: 2

Related Questions