Unable to bind dynamically added Text boxes

Submitted by debasisMishra on Wed, 2009-04-29 09:32.

development

Hi,
I have one jsp & in this JSP I have one add link when I click this link it will call one add row javascript function & some text boxes will appear in this jsp page. I want to bind these text boxes using spring with MS-SQL databse. I am not getting how to bind these text boxes?

Here is my JSP Code
-------------------

var count = "1";
var count_row = 1;
function addNewRow(tableRef){ 
var myTable = document.getElementById(tableRef);
var tBody = myTable.getElementsByTagName('tbody')[0];
var newTR = document.createElement('tr');
//create table cell 1
var newTD1 = document.createElement('td');
var strHtml1 =  "<INPUT TYPE='text' ID='defectFileName' NAME='defectFileName"+count_row+"' SIZE='10'>"; 
newTD1.innerHTML = strHtml1.replace(/!count!/g,count);
//create table cell 2
var newTD2 = document.createElement('td');
var strHtml2 = "<INPUT TYPE='text' NAME='defectSummary"+count_row+"' SIZE='30'>"; 
newTD2.innerHTML = strHtml2.replace(/!count!/g,count);
//create table cell 3
var newTD3 = document.createElement('td');
var strHtml3 = "<INPUT TYPE='text' NAME='developerComments"+count_row+"' SIZE='30'>"; 
newTD3.innerHTML = strHtml3.replace(/!count!/g,count);
//create table cell 4
var newTD4 = document.createElement('td');
var strHtml4 = "<INPUT TYPE='text' NAME='defectFixedDate"+count_row+"' SIZE='10'>"; 
newTD4.innerHTML = strHtml4.replace(/!count!/g,count);
// append data to row
newTR.appendChild (newTD1);
newTR.appendChild (newTD2);
newTR.appendChild (newTD3);
newTR.appendChild (newTD4);
// add to count variable
count_row=count_row+1;
count = parseInt(count) + 1;
// append row to table
tBody.appendChild(newTR);
}
<!--
<table id="tableRef">
<tr>
<td>File Name</td>
<td>Defect Desc</td>
<td>Developer Comments</td>
<td>Date Fixed</td>
</tr>
<tbody>
<tr>
<td colspan="1"><a href="javascript:addNewRow('tableRef')">Add Row</a></td>
</tr>
</tbody>
</table> 
-->

Pls help me.

Thanks in advance
Deb(ursdeb@yahoo.com)

Login or register to post comments
738 reads
timestamp certified

It is all about how you name the fields

Submitted by Matt Fleming on Fri, 2009-04-10 09:05.

What I would do is look at the html output. All that you need to make sure of (on the html side) is that your form field names follow the conventions for Spring data-binding. Look at some of the other articles about Spring on the site about that. I would recommend doing a simple parent/child mapping to get the hang of how Spring does the data binding before jumping into a dynamic parent/child situation.

-Matt

Hi Matt,

Submitted by debasisMishra on Mon, 2009-04-13 05:24.

Hi Matt,
When I am clicking the "Add Row" link I am able to add rows which are visible on the page, but when I see the view source of the page,NOTHING RELATED TO DYNAMICALLY ADDED TEXT BOXES IS PRESENT.

If I put the following line in my JS function then I am able to add it.

var strHtml1 =  "<INPUT TYPE='text' ID='defectFileName' NAME='defectFileName"+count_row+"' SIZE='10'>"; 
var strHtml2 = "<INPUT TYPE='text' ID='defectSummary'  NAME='defectSummary"+count_row+"' SIZE='30'>";

But I can't see anything in view source.
Also,before form submit I tried to read the value entered in the dynamically generated text box thru a JS function ("document.getElementById('defectFileName');)" ,I got the alert as 'Undefined'.

Please help me.

Thanks in advance...
Deb

You always have to start small

Submitted by Matt Fleming on Mon, 2009-04-13 09:45.

It sounds like to me that you need to take a few steps back. Once you learn the basics, the javascript rendering will be really easy.

First, you should get the page to work statically against your form backing object (model). Next I would simulate a dynamic form element addition by creating one extra static input line that is not in your original model. Once those two scenarios work you will understand spring data binding and what needs to get passed back to the server.

After you get that done, you can move to javascript rendering and javascript enabled additions. As a tip you should use firebug and firefox when working with javascript, it will help you see elements that were created by javascript.

-Matt

Hi Matt,

Submitted by debasisMishra on Wed, 2009-04-29 06:36.

Hi Matt,
I am able to run the page statically.Now I have 2 buttons.One button will dynamically add 1 row of text boxes & the other will display the values.
Now,the problem is,I am not getting the text box values in my controller(or java class).
On clicking 'Add New Rows' button 4 text boxes will generate in one row.User can enter any number of rows & he can enter values. On clicking 'make Display' button the values will be displayed in alert msg.
But I am getting 'null' for the following fields rowNum,txtFileName,txtDefectDesc, txtDevComments,txtDateFixed in request object in my controller(java class).

Here is the code. Pls help me.

<script>
var rowNum=1
//Method to create text  boxes
function createTxtfld() {
 
var theBR = document.createElement('br');
var tf = document.createElement("input");
tf.setAttribute("type", "text");
tf.setAttribute("id", "txtFileName"+ rowNum);
 
var f = document.parent;
f.appendChild(tf);
 
var tf = document.createElement("input");
tf.setAttribute("type", "text");
tf.setAttribute("id", "txtDefectDesc"+ rowNum);
 
 
var f = document.parent;
f.appendChild(tf);
 
var tf = document.createElement("input");
tf.setAttribute("type", "text");
tf.setAttribute("id", "txtDevComments"+ rowNum);
 
var f = document.parent;
f.appendChild(tf);
 
var tf = document.createElement("input");
tf.setAttribute("type", "text");
tf.setAttribute("id", "txtDateFixed"+ rowNum);
 
var f = document.parent;
f.appendChild(tf);
f.appendChild(theBR);
rowNum++;
 
} 
 
//Method to display the input values
function makeDisplay() {
	for (var i=1 ; i< rowNum; i++){
		alert(document.getElementById("txtFileName"+i).value);
		alert(document.getElementById("txtDefectDesc"+i).value);
		alert(document.getElementById("txtDevComments"+i).value);
		alert(document.getElementById("txtDateFixed"+i).value);
	} 
} 
</script>
<form:form modelAttribute="developmentItem" name="parent">
<table>
<tr> <td>
<button onclick="createTxtfld()">Add New Rows </button>
<button onclick="makeDisplay()">make Display </button>
</td> </tr>
</table>
</form:form>

You aren't setting the id fields properly

Submitted by Matt Fleming on Wed, 2009-04-29 09:29.

The id fields are not supposed to look like you have them. I don't think you understood me when I meant run the page statically. If the page were working statically, you would know how to name form elements so that spring will bind them to your model (form backing object or annotated model).

I would suggest taking one more step back. This time use the spring JSP tag library to bind your elements. Once you have that working you can look at the page source to see the pattern used to create the id of form elements. In essence, I'm suggesting that you:

use the Spring the easiest way possible by using a JSP with the spring tags for your view
Change your view to be a static representation of the source generated by #1
Add in dynamic javascript and a dynamic list model

Also you should read Dynamic list binding in Spring MVC... what? why? and look at the example application. If you run the example and do a "view source" you should see how to set the id fields properly.

-Matt

Navigation

Popular content

Today's:

All time:

Last viewed:

Who's online

Online users

Unable to bind dynamically added Text boxes

It is all about how you name the fields

Hi Matt,

You always have to start small

Hi Matt,

You aren't setting the id fields properly