...

View Full Version : Fetching list from database to DOM



faraz
02-27-2009, 05:26 AM
function addRow()
{
//add a row to the rows collection and get a reference to the newly added row
var newRow = document.all("tablename").insertRow();

//add 5 cells (<td>) to the new row and set the innerHTML to contain text boxes


var tbl = document.getElementById("tablename");
var tot = tbl.tBodies[0].rows.length-1;

var tempcounter;
tempcounter = "<input type='text' size='1' style='font-weight:bold; color:#03C' ";
tempcounter += " style='border:none;' value=&nbsp;&nbsp;";
tempcounter += tot;
tempcounter += " READONLY>";

alert(tot);

var oCell = newRow.insertCell();
oCell.innerHTML = tempcounter;
oCell.height="43"
oCell.align = "center";

oCell = newRow.insertCell();
oCell.innerHTML = "Name"+tempcounter;
oCell.style.fontWeight = "bold";
oCell.style.color = "#03C";
oCell.height="43"
oCell.align = "center";


var oCellsel = newRow.insertCell();
oCellsel.align = "center";
oCellsel.height="43"
var txtInp3 = document.createElement('select');
txtInp3.name = 'NamrList'+ tempcounter;
txtInp3.id = 'NamrList'+ tempcounter;
txtInp3.options[0] = new Option('None', 'value0');
txtInp3.options[1] = new Option('Megha Bhatnagar', 'value1');
txtInp3.options[2] = new Option('Megha ', 'value2');
txtInp3.options[3] = new Option('Mamta', 'value3');
txtInp3.options[4] = new Option('Shalini', 'value4');
txtInp3.options[5] = new Option('Suchitra', 'value5');
oCellsel.appendChild(txtInp3); //here i want to fetch list from database

var oCell = newRow.insertCell();
oCell.align = "center";
oCell.height="43"
var txtInp4 = document.createElement('input');
txtInp4.id = 'JoinDate'+ tempcounter;
txtInp4.setAttribute('type', 'text');
txtInp4.setAttribute('name', 'JoinDate'+ tempcounter );
txtInp4.setAttribute('size', '9');
txtInp4.setAttribute('value', '');
oCell.appendChild(txtInp4);


var oCell = newRow.insertCell();
oCell.align = "center";
oCell.height="43"
var txtInp4 = document.createElement('input');
txtInp4.id = 'ReleaseDate'+ tempcounter;
txtInp4.setAttribute('type', 'text');
txtInp4.setAttribute('name', 'ReleaseDate'+ tempcounter );
txtInp4.setAttribute('size', '10');
txtInp4.setAttribute('value', ''); // iteration included for debug purposes
oCell.appendChild(txtInp4);

}

I want list in oCellSel to come from database what should i do anybody please help...!!-------------

Gjslick
03-01-2009, 07:48 PM
#1, those insertRow() and insertCell() calls need the index argument if you want them to work in a browser other than internet explorer. For instance, insertRow( 0 ) will insert the first row, insertRow( 1 ) will insert the second, etc. Same goes for insertCell calls.

#2, you can't directly access a database with javascript. You need to have a server side technology (php, coldfusion, asp, etc.) that can read your database, and serve the data.

That being said, you can get the data into javascript in one of two ways with your server side language (generally...). One is to have your SS language write out a javascript array onto the page of what it read from your database. And the other is to use an AJAX call (XMLHttpRequest) to access a file that will return the data into your javascript function. I'd say the easiest is the first one.

So really the first question is, do you have a server side technology installed on your webserver?

faraz
03-10-2009, 12:39 PM
I am using JSP...but still couldnt get your point..
can u little bit more specific...............

Gjslick
03-10-2009, 06:25 PM
Alright, I'd say the best thing to do is just look up AJAX tutorials with JSP. AJAX is what lets you "connect to a database" (although not directly) from JavaScript.

Basically, it works like this:
1) Your JavaScript requests a jsp page, say "getData.jsp"
2) The getData.jsp fetches the data out of the database, and then writes out an XML document with the data from the database.
3) That XML document gets back to your javascript code, where you can read it and have your JavaScript operate on it (to write out that table, for example).

Here's an example tutorial that I found just from searching google real quick. http://www.ics.uci.edu/~cs122b/projects/project5/AJAX-JSPExample.html (http://www.ics.uci.edu/%7Ecs122b/projects/project5/AJAX-JSPExample.html)

See if you can follow that example, and find some others if you can too. If you're still having trouble with what you want to do after that, post again and I'll try to help ya out.

faraz
03-15-2009, 09:23 AM
Thanks a lot..
Its working..
what i did..
I called it from database into html part of JSP and kept it hidden..
and Called that dataset to javascript..
its working fine..

faraz
03-15-2009, 11:31 AM
I have a page similar to
http://www.mredkj.com/tutorials/tabledeleterow-calendar.html
with DOM property....

First i have to enter all details to database...
And for Edit purpose i have to bring it back..
That i am doing with HTML ...
i.e putting my html code to <tbody> part of table..
But i am not able to Reorder my rows with HTML and DOM....

I hope u guyz understand my point..

Please help me...!!!



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum