Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 6 of 6
  1. #1
    New Coder
    Join Date
    Feb 2009
    Posts
    16
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Fetching list from database to DOM

    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...!!-------------
    Last edited by faraz; 02-27-2009 at 06:53 AM.

  • #2
    Regular Coder
    Join Date
    Feb 2009
    Location
    NJ, USA
    Posts
    476
    Thanks
    2
    Thanked 70 Times in 69 Posts
    #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?

  • #3
    New Coder
    Join Date
    Feb 2009
    Posts
    16
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I am using JSP...but still couldnt get your point..
    can u little bit more specific...............

  • #4
    Regular Coder
    Join Date
    Feb 2009
    Location
    NJ, USA
    Posts
    476
    Thanks
    2
    Thanked 70 Times in 69 Posts
    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

    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.

  • #5
    New Coder
    Join Date
    Feb 2009
    Posts
    16
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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..

  • #6
    New Coder
    Join Date
    Feb 2009
    Posts
    16
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I have a page similar to
    http://www.mredkj.com/tutorials/tabl...-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...!!!


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •