• Post Reply Bookmark Topic Watch Topic
  • New Topic
programming forums Java Mobile Certification Databases Caching Books Engineering Micro Controllers OS Languages Paradigms IDEs Build Tools Frameworks Application Servers Open Source This Site Careers Other Pie Elite all forums
this forum made possible by our volunteer staff, including ...
Marshals:
  • Campbell Ritchie
  • Jeanne Boyarsky
  • Ron McLeod
  • Paul Clapham
  • Liutauras Vilda
Sheriffs:
  • paul wheaton
  • Rob Spoor
  • Devaka Cooray
Saloon Keepers:
  • Stephan van Hulst
  • Tim Holloway
  • Carey Brown
  • Frits Walraven
  • Tim Moores
Bartenders:
  • Mikalai Zaikin

Insert more than one row in table

 
Ranch Hand
Posts: 303
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
Hi,

Below is my code which adding row dynamically on clicking button.I want to insert these data in database.Any idea how to do this kind of work.



function addrows(cid)

//here we point the tbody variable to the table
var tbody = document.getElementById(cid).getElementsByTagName("TBODY")[0];

//here we create a row element
var row = document.createElement("TR");

//here we create the first cell element
var t1 = document.createElement("TD");

//here we popuate the first cell with 'Test1'
t1.innerHTML=document.getElementById("t1").value;

//here we create the second cell element
var t2 = document.createElement("TD");

//here we popuate the first cell with email@server.com'
t2.innerHTML=document.getElementById("t2").value;

var t3 = document.createElement("TD");

t3.innerHTML=document.getElementById("t3").value;
//here we append the cells to the created row element
row.appendChild(t1)
row.appendChild(t2)
row.appendChild(t3);
document.getElementById("t1").value="";
document.getElementById("t2").value="";
document.getElementById("t3").value="";
//here we append the created row element to the table
tbody.appendChild(row)
 
Ranch Hand
Posts: 80
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator

Originally posted by pankaj semwal:
Hi,

Below is my code which adding row dynamically on clicking button.I want to insert these data in database.Any idea how to do this kind of work.



function addrows(cid)

//here we point the tbody variable to the table
var tbody = document.getElementById(cid).getElementsByTagName("TBODY")[0];

//here we create a row element
var row = document.createElement("TR");

//here we create the first cell element
var t1 = document.createElement("TD");

//here we popuate the first cell with 'Test1'
t1.innerHTML=document.getElementById("t1").value;

//here we create the second cell element
var t2 = document.createElement("TD");

//here we popuate the first cell with email@server.com'
t2.innerHTML=document.getElementById("t2").value;

var t3 = document.createElement("TD");

t3.innerHTML=document.getElementById("t3").value;
//here we append the cells to the created row element
row.appendChild(t1)
row.appendChild(t2)
row.appendChild(t3);
document.getElementById("t1").value="";
document.getElementById("t2").value="";
document.getElementById("t3").value="";
//here we append the created row element to the table
tbody.appendChild(row)



Hi,
If you want to add your row data at dynamically to database, you can use Ajax for that. at every time of new row addition you can make ajax call to server and store to database. But it is not good design. either you can make XML file for evry row at server side, and time of submit form you can add XML to database.
 
Greenhorn
Posts: 19
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
yes, as Chintan said ajax is a good option for inserting rows dynamically.
Here is a sample function.

function testAjax(testVariable){
try{
xmlHttp=new XMLHttpRequest();
}catch (e){
try{
xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
}
catch (e){
try{
xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
}
catch (e){
alert("Your browser does not support AJAX!");
return false;
}
}
}
if(xmlHttp){
xmlHttp.onreadystatechange=methodCalledAfterInsertion;
var url = "<%=request.getContextPath()%>/test.do?method=testAjax&Code="+test;
xmlHttp.open("POST",url,true);
xmlHttp.send(null);
}
}
function methodCalledAfterInsertion() {
if(xmlHttp.readyState==4){
alert("Row inserted");

}
}
 
pankaj semwal
Ranch Hand
Posts: 303
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
Hi

Can you give me some hint of code.

Thanks
 
Arun Christopher
Greenhorn
Posts: 19
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
function testAjax(testVariable){ //function to be called
try{
xmlHttp=new XMLHttpRequest();
}catch (e){
try{
xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");//checking browser compatibility
}
catch (e){
try{
xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");//achecking browser compatibility
}
catch (e){
alert("Your browser does not support AJAX!");//if browser not supported
return false;
}
}
}
if(xmlHttp){
var test=document.getElementById("anything");
xmlHttp.onreadystatechange=methodCalledAfterInsertion;//method to be called when the response comes
var url = "http://yourweb.com/uraction.do?method=testAjax&Code="+test;//pass parameters to the function which inserts value in the database
xmlHttp.open("POST",url,true);//setting the request type
xmlHttp.send(null);
}
}
function methodCalledAfterInsertion() {
if(xmlHttp.readyState==4){ //check for success
alert("Row inserted");

}
}
 
Patel Chintan
Ranch Hand
Posts: 80
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator

Originally posted by Arun Christopher:
function testAjax(testVariable){ //function to be called
try{
xmlHttp=new XMLHttpRequest();
}catch (e){
try{
xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");//checking browser compatibility
}
catch (e){
try{
xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");//achecking browser compatibility
}
catch (e){
alert("Your browser does not support AJAX!");//if browser not supported
return false;
}
}
}
if(xmlHttp){
var test=document.getElementById("anything");
xmlHttp.onreadystatechange=methodCalledAfterInsertion;//method to be called when the response comes
var url = "http://yourweb.com/uraction.do?method=testAjax&Code="+test;//pass parameters to the function which inserts value in the database
xmlHttp.open("POST",url,true);//setting the request type
xmlHttp.send(null);
}
}
function methodCalledAfterInsertion() {
if(xmlHttp.readyState==4){ //check for success
alert("Row inserted");

}
}



After making Ajax call, dont direct insert data intoi database, first you make XML for that Value Object, and return back path of that file and save it into hidden field for that row. At time of insertion you can get all this paths, and direct get XML abnd convert those XML to VO and then you inert data into database.
 
reply
    Bookmark Topic Watch Topic
  • New Topic