Changing Data without Refreshing Page

Discussion in 'Javascript' started by Greg Scharlemann, Oct 16, 2005.

  1. Given some recent success on a simple form validation (mainly due to
    the kind folks in this forum), I've tried to tackle something a bit
    more difficult. I'm pulling data down from a database and populating a
    simple table. I'd like the table to contain 10 entries per page and
    have the option for the user to scroll through the pages of data
    without having to go back to refresh the page (I've already pulled all
    the info I need from the database). So, I've taken a stab at it and
    this is probably not the best way to do it (so if you have a better
    idea I'm open), but I think it will work. Right now I'm encountering
    an 'Object Expected' error and I don't know how to interpret what it's
    telling me.

    Here's an isolated example of the code that I've been playing with:

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <title></title>
    </head>
    <body>
    <table border="0" cellpadding="0" cellspacing="0" width="300">
    <tr>
    <td width="100%" style="padding:2px;">
    <div id="panel"></div>
    <script type="text/javascript">
    //<![CDATA[
    var dataArray = new Array();
    var panel = document.getElementById('panel');

    dataArray[0] = "<tr valign=\"top\" class=\"rowOff\"
    onMouseOver=\"this.className='rowOn'\"
    onMouseOut=\"this.className='rowOff'\"><td class=\"grid\"
    align=\"center\"><a class=\"inlineActionLink\"
    href=\"detailinfo.php?MlsNum=531245&nomap=true\" title=\"Unable to
    locate on map\">Details</a></td><td class=\"tableContent\"
    align=\"right\">129,900</td><td class=\"tableContent\"
    align=\"center\">3</td><td class=\"tableContent\"
    align=\"center\">3</td><td class=\"tableContent\"
    align=\"center\">1,720</td></tr>";
    dataArray[1] = "<tr valign=\"top\" class=\"rowOff\"
    onMouseOver=\"this.className='rowOn'\"
    onMouseOut=\"this.className='rowOff'\"><td class=\"grid\"
    align=\"center\"><a class=\"inlineActionLink\"
    href=\"detailinfo.php?MlsNum=513195&nomap=true\" title=\"Unable to
    locate on map\">Details</a></td><td class=\"tableContent\"
    align=\"right\">124,500</td><td class=\"tableContent\"
    align=\"center\">4</td><td class=\"tableContent\"
    align=\"center\">3</td><td class=\"tableContent\"
    align=\"center\">1,528</td></tr>";
    panel.innerHTML = "<table border=\"0\" cellpadding=\"2\"
    cellspacing=\"1\" width=\"100%\" class=\"tableGridList\"><tr><td
    class=\"colHead\" align=\"center\">&nbsp;</td><td class=\"colHead\"
    align=\"center\">Price</td><td class=\"colHead\"
    align=\"center\">Beds</td><td class=\"colHead\"
    align=\"center\">Baths</td><td class=\"colHead\"
    align=\"center\">SqFt.</td></tr>";

    panel.innerHTML += dataArray[0];
    panel.innerHTML +="</table>";
    //]]

    function changePage(index) {
    panel.innerHTML = "<table border=\"0\" cellpadding=\"2\"
    cellspacing=\"1\" width=\"100%\" class=\"tableGridList\"><tr><td
    class=\"colHead\" align=\"center\">&nbsp;</td><td class=\"colHead\"
    align=\"center\">Price</td><td class=\"colHead\"
    align=\"center\">Beds</td><td class=\"colHead\"
    align=\"center\">Baths</td><td class=\"colHead\"
    align=\"center\">SqFt.</td></tr>";
    panel.innerHTML += dataArray[index];
    panel.innerHTML += "</table">;
    }
    </script>
    </td>
    </tr>
    <tr>
    <td><a href="#" onClick="javascript:changePage(0);">1</a> | <a
    href="#" onClick="javascript:changePage(1);">2</a></td>
    </tr>
    </table>
    </body>
    </html>
     
    Greg Scharlemann, Oct 16, 2005
    #1
    1. Advertisements

  2. Greg Scharlemann

    McKirahan Guest

    [snip]

    1) You're referenceing "panel" before the page has been loaded.

    2) You have a typo on the line; ( "> ahould be >" ):

    panel.innerHTML += "</table">;

    3) Try this version:

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <title>dataArray.htm</title>
    <script type="text/javascript">
    var panel;
    var dataArray = new Array();
    dataArray[0] = "<tr valign='top' class='rowOff'
    onMouseOver='this.className=\"rowOn\"'
    onMouseOut='this.className=\"rowOff\"'>";
    dataArray[0] += " <td class='grid' align='center'><a
    class='inlineActionLink' href='detailinfo.php?MlsNum=531245&nomap=true'
    title='Unable to locate on map'>Details</a></td>";
    dataArray[0] += " <td class='tableContent' align='right'>129,900</td>";
    dataArray[0] += " <td class='tableContent' align='center'>3</td>";
    dataArray[0] += " <td class='tableContent' align='center'>3</td>";
    dataArray[0] += " <td class='tableContent' align='center'>1,720</td>";
    dataArray[0] += "</tr>";
    dataArray[1] = "<tr valign='top' class='rowOff'
    onMouseOver='this.className=\"rowOn\"'
    onMouseOut='this.className=\"rowOff\"'>";
    dataArray[1] += " <td class='grid' align='center'><a
    class='inlineActionLink' href='detailinfo.php?MlsNum=513195&nomap=true'
    title='Unable to locate on map'>Details</a></td>";
    dataArray[1] += " <td class='tableContent' align='right'>124,500</td>";
    dataArray[1] += " <td class='tableContent' align='center'>4</td>";
    dataArray[1] += " <td class='tableContent' align='center'>3</td>";
    dataArray[1] += " <td class='tableContent' align='center'>1,528</td>";
    dataArray[1] += "</tr>";
    function loadedPage() {
    panel = document.getElementById('panel');
    var what = "<table border='1' cellpadding='2' cellspacing='1'
    width='100%' class='tableGridList'>";
    what += "<tr>";
    what += " <td class='colHead' align='center'>&nbsp;</td>";
    what += " <td class='colHead' align='center'>Price</td>";
    what += " <td class='colHead' align='center'>Beds</td>";
    what += " <td class='colHead' align='center'>Baths</td>";
    what += " <td class='colHead' align='center'>SqFt.</td>";
    what += "</tr>";
    what += dataArray[0];
    what += "</table>";
    panel.innerHTML = what;
    }
    function changePage(index) {
    var what = "<table border='1' cellpadding='2' cellspacing='1'
    width='100%' class='tableGridList'>";
    what += "<tr>";
    what += " <td class='colHead' align='center'>&nbsp;</td>";
    what += " <td class='colHead' align='center'>Price</td>";
    what += " <td class='colHead' align='center'>Beds</td>";
    what += " <td class='colHead' align='center'>Baths</td>";
    what += " <td class='colHead' align='center'>SqFt.</td>";
    what += "</tr>";
    what += dataArray[index];
    what += "</table>";
    panel.innerHTML = what;
    }
    </script>
    </head>
    <body onload="loadedPage()">
    <table border="0" cellpadding="0" cellspacing="0" width="300">
    <tr>
    <td width="100%" style="padding:2px;">
    <div id="panel"></div>
    </td>
    </tr>
    <tr>
    <td>
    <a href="#" onClick="javascript:changePage(0);">1</a> |
    <a href="#" onClick="javascript:changePage(1);">2</a>
    </td>
    </tr>
    </table>
    </body>
    </html>


    I'd do one more thing:

    Declaring an array that would hold just the values:

    var data_Array = ]
    "531245^129,900^3^3^1,720",
    "513195^124,500^4^3^1,528"
    ];

    Then construct the formatted dataArray() from it.
     
    McKirahan, Oct 16, 2005
    #2
    1. Advertisements

  3. Greg Scharlemann

    McKirahan Guest


    [snip]

    Try this version:

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <title> dataTable.htm</title>
    <script type="text/javascript">
    var dataArray = [
    "531245^129,900^3^3^1,720",
    "513195^124,500^4^3^1,528"
    ];
    var dataTable = [
    "<table border='1' cellpadding='2' cellspacing='1' width='100%'
    class='tableGridList'>",
    "<tr>",
    " <td class='colHead' align='center'>&nbsp;</td>",
    " <td class='colHead' align='center'>Price</td>",
    " <td class='colHead' align='center'>Beds</td>",
    " <td class='colHead' align='center'>Baths</td>",
    " <td class='colHead' align='center'>SqFt.</td>",
    "</tr>",
    "<tr valign='top' class='rowOff' onMouseOver='this.className=\"rowOn\"'
    onMouseOut='this.className=\"rowOff\"'>",
    " <td class='grid' align='center'><a class='inlineActionLink'
    href='detailinfo.php?MlsNum=#0&nomap=true' title='Unable to locate on
    map'>Details</a></td>",
    " <td class='tableContent' align='right'>#1</td>",
    " <td class='tableContent' align='center'>#2</td>",
    " <td class='tableContent' align='center'>#3</td>",
    " <td class='tableContent' align='center'>#4</td>",
    "</tr>",
    "</table>"
    ];
    function changePage(index) {
    var dataBuild = "";
    for (var i=0; i<dataTable.length; i++) {
    dataBuild += dataTable;
    }
    var dataValue = dataArray[index].split("^");
    for (var j=0; j<dataArray[index].length; j++) {
    dataBuild = dataBuild.replace("#"+j,dataValue[j]);
    }
    document.getElementById("panel").innerHTML = dataBuild;
    }
    </script>
    </head>
    <body onload="changePage(0)">
    <table border="0" cellpadding="0" cellspacing="0" width="300">
    <tr>
    <td width="100%" style="padding:2px;">
    <div id="panel"></div>
    </td>
    </tr>
    <tr>
    <td>
    <a href="#" onClick="javascript:changePage(0);">1</a> |
    <a href="#" onClick="javascript:changePage(1);">2</a>
    </td>
    </tr>
    </table>
    </body>
    </html>
     
    McKirahan, Oct 16, 2005
    #3
  4. Internet Explorer is giving me a Object Expected error on line 50:

    <body onload="changePage(0)">

    What the heck is it looking for when it says Object Expected?
     
    Greg Scharlemann, Oct 17, 2005
    #4
  5. Greg Scharlemann

    McKirahan Guest

    The JavaScript function "changePage()" is an "object";
    did you change the spelling?

    Did you try my version "as is"?
    My line 50 is a "<td>" tag.
    If you made any change then post your version.
     
    McKirahan, Oct 17, 2005
    #5
  6. Greg Scharlemann

    RobG Guest

    Why XHTML? Does it provide any useful benefits for your situation? If
    not, you are better off to use HTML 4.01.
    This will cause an error (and almost certainly failure of your script).
    You are attempting to get a reference to an element that doesn't exist
    yet.
    When posting code, always wrap it manually at about 70 characters to
    prevent news readers wrapping it automatically. It nearly always
    introduces errors and make helping you a chore.

    [...]
    Using innerHTML this way is dangerous. incrementally writing bits of
    the table to the document will nearly always fail. If you must use
    innerHTML (and I can't think why you'd have to), create the HTML as a
    single string then write the entire table at once.

    It is much safer to use DOM modifying tables using script.

    But why not create the the table in HTML? It seems you'd be better off
    if the table was generated at the server. Your links can be to
    subsequent pages with more data. If the user has scripting available,
    the links can have onclick attributes that update the table without
    getting a new page.

    Your script is then vastly simpler and users without scripting (or with
    a script engine that doesn't like your scrip) still get a page that
    works. You will probably also reduce the size of your page.

    Below is a sample script, all the detail is generated but it should give
    you the idea. For extra data, you can create another script element
    that loads new variables and adds to the page. If the amount of data is
    less than say 5kB (and that's quite a bit of data), just put it all in
    the page to start with.
    'javascript:' is not needed when using script for intrinsic events and
    the link should probably do something useful.

    [...]


    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
    "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <title>Table</title>
    <meta http-equiv="Content-Type"
    content="text/html; charset=ISO-8859-1">
    <style type="text/css">
    #catalogue {
    border-collapse: collapse;
    border-top: 1px solid #999999;
    border-left: 1px solid #999999;
    }
    #catalogue td, #catalogue th {
    text-align: right;
    border-bottom: 1px solid #999999;
    border-right: 1px solid #999999;
    padding: 2px 5px 2px 5px;
    }
    #catalogue th {
    width: 4em;
    text-align: center;
    }
    #catalogue th:first-child, #catalogue td:first-child {
    width: 5em;
    text-align: left;
    padding: 0 0px 0 5px;
    }
    ..clickable {
    cursor: pointer;
    color: #2222ff;
    text-decoration: underline;
    }
    #scriptLinks li {
    display: inline;
    list-style-type: none;
    padding: 0 0 0 5px;
    }
    </style>
    <script type="text/javascript">

    var details0 = {
    data0 : ['typeA','31,528','3','1','24'],
    data1 : ['typeB','21,500','2','1','22'],
    data2 : ['typeC','11,528','1','0','14']
    };

    var details1 = {
    data0 : ['typeD','301,528','30','10','240'],
    data1 : ['typeE','201,500','20','10','220'],
    data2 : ['typeF','101,528','10','00','140']
    };

    function updateTable(id, dObj)
    {
    var tB = document.getElementById(id);
    while (tB.firstChild) tB.removeChild(tB.firstChild);
    var d, oR, oT, i=0, j, k;
    while( (d = dObj['data' + i++]) ){
    oR = document.createElement('tr');
    for (j=0, k=d.length; j<k; j++){
    oT = document.createElement('td');
    oT.appendChild(document.createTextNode(d[j]));
    if (!j) {
    oT.onclick = showDetails;
    oT.className = 'clickable';
    }
    oR.appendChild(oT);
    }
    tB.appendChild(oR);
    }
    }

    function showDetails()
    {
    alert(this.firstChild.data + ': some details');
    }

    </script>
    </head>
    <body onload="updateTable('catDetails',details0);">

    <table id="catalogue">
    <tbody id="catHead">
    <tr>
    <th>&nbsp;</th>
    <th>Price</th>
    <th>Beds</th>
    <th>Baths</th>
    <th>Size<br>(sq. ft)</th>
    </tr>
    </tbody>
    <tbody id="catDetails">
    </tbody>
    </table>
    <ul id="scriptLinks">
    <li>Show:
    <li><a href="page0.html" onclick="
    updateTable('catDetails',details0);
    return false;
    ">Details 0</a>
    <li><a href="page1.html" onclick="
    updateTable('catDetails',details1);
    return false;
    ">Details 1</a>
    </ul>
    </body>
    </html>
     
    RobG, Oct 17, 2005
    #6
  7. The line wrapping made my script not work correctly. I modified it and
    now it works. Thanks McKirahan.
     
    Greg Scharlemann, Oct 17, 2005
    #7
  8. Rob

    I'll give this a shot, you make some interesting points. One site I
    did run across doing the same technique that I'm shooting for is
    Yahoo's Fantasy Football site. I looked at the source and tried to cut
    and paste the stuff I thought I needed but it was way over my head.

    Greg
     
    Greg Scharlemann, Oct 17, 2005
    #8
  9. JRS: In article <>
    , dated Sun, 16 Oct 2005 11:21:44, seen in
    Repeatedly changing the same innerHTML is untidy and might be
    inefficient, although AIUI it will not be rendered until the code stops.

    The body of an article should stand alone independent of the subject
    line : so if the subject line is relevant it should be repeated or
    restated in the body of the article.

    You should read the newsgroup FAQ. Section 4.15 "How do I modify the
    current page in a browser?" answers the subject question.

    If you are prepared to assume that your page will only be used by
    "DocDom" browsers, DynWrite could be much simplified (and it would be
    well if the FAQ were to show that). However, it is still IMHO highly
    beneficial to code dynamic writing like DynWrite("aID", Str) ,
    however simple DynWrite becomes, for reasons of legibility.
     
    Dr John Stockton, Oct 17, 2005
    #9
  10. JRS: In article <>, dated Sun, 16 Oct
    2005 16:33:33, seen in McKirahan
    Code posted to Usenet should be executable code. Do not let your
    posting agent wrap code : THAT IS YOUR JOB.


    And try to get your spelling right : there are many here who have put
    considerable effort into learning English as a second language, and it
    is unhelpful to set a bad example.

    That's a tedious construction.

    what = "<tr>" +
    " <td class='colHead' align='center'>&nbsp;</td>" +
    " <td class='colHead' align='center'>Price</td>" +

    is perfectly satisfactory in all systems AFAIK (it's conceivable that
    the array.join method might be faster, but ISTM unlikely to be
    significantly so in any real case.
     
    Dr John Stockton, Oct 17, 2005
    #10
  11. One thing I read online is that the support of the tbody tag is not
    cross-browser friendly. That worries me... any idea of the browsers
    that do not support or render tbody appropriatly?
     
    Greg Scharlemann, Oct 17, 2005
    #11
  12. I took what Rob put together and added some more rows to the tables.
    One question, if I have a table of 3 rows and only 4 results, can I
    shrink the second page (the display with only one row) to display
    appropriatly? I get "undefined" results otherwise.

    Here's an example:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <title> dataTable.htm</title>
    <script type="text/javascript">
    var dataArray = [
    "531245^129,900^3^3^1,720^531246^130,900^3^3^1,800"
    + "^531246^150,100^3^2^1,910",
    "513195^124,500^4^3^1,528"
    ];
    var dataTable = [
    "<table border='1' cellpadding='2' cellspacing='1' "
    + "width='100%' class='tableGridList'>",
    "<tr>",
    " <td class='colHead' align='center'>&nbsp;</td>",
    " <td class='colHead' align='center'>Price</td>",
    " <td class='colHead' align='center'>Beds</td>",
    " <td class='colHead' align='center'>Baths</td>",
    " <td class='colHead' align='center'>SqFt.</td>",
    "</tr>",
    "<tr valign='top' class='rowOff' onMouseOver='this.className="
    + "\"rowOn\"' onMouseOut='this.className=\"rowOff\"'>",
    " <td class='grid' align='center'><a class='inlineActionLink'"
    + "href='detailinfo.php?MlsNum=#0&nomap=true' "
    + "title='Unable to locate on map'>Details</a></td>",
    " <td class='tableContent' align='right'>$#1</td>",
    " <td class='tableContent' align='center'>#2</td>",
    " <td class='tableContent' align='center'>#3</td>",
    " <td class='tableContent' align='center'>#4</td>",
    "</tr>",
    "<tr valign='top' class='rowOff' onMouseOver='this.className="
    + "\"rowOn\"' onMouseOut='this.className=\"rowOff\"'>",
    " <td class='grid' align='center'><a class='inlineActionLink'"
    + "href='detailinfo.php?MlsNum=#5&nomap=true' "
    + "title='Unable to locate on map'>Details</a></td>",
    " <td class='tableContent' align='right'>$#6</td>",
    " <td class='tableContent' align='center'>#7</td>",
    " <td class='tableContent' align='center'>#8</td>",
    " <td class='tableContent' align='center'>#9</td>",
    "</tr>",
    "<tr valign='top' class='rowOff' onMouseOver='this.className="
    + "\"rowOn\"' onMouseOut='this.className=\"rowOff\"'>",
    " <td class='grid' align='center'><a class='inlineActionLink'"
    + "href='detailinfo.php?MlsNum=#10&nomap=true' "
    + "title='Unable to locate on map'>Details</a></td>",
    " <td class='tableContent' align='right'>$#11</td>",
    " <td class='tableContent' align='center'>#12</td>",
    " <td class='tableContent' align='center'>#13</td>",
    " <td class='tableContent' align='center'>#14</td>",
    "</tr>",
    "</table>"
    ];
    function changePage(index) {
    var dataBuild = "";
    for (var i=0; i<dataTable.length; i++) {
    dataBuild += dataTable;
    }
    var dataValue = dataArray[index].split("^");
    for (var j=0; j<dataArray[index].length; j++) {
    dataBuild = dataBuild.replace("#"+j,dataValue[j]);
    }
    document.getElementById("panel").innerHTML = dataBuild;


    }


    </script>
    </head>
    <body onload="changePage(0)">
    <table border="0" cellpadding="0" cellspacing="0" width="300">
    <tr>
    <td width="100%" style="padding:2px;">
    <div id="panel"></div>
    </td>
    </tr>
    <tr>
    <td>
    <a href="#" onClick="javascript:changePage(0);">1</a> |
    <a href="#" onClick="javascript:changePage(1);">2</a>
    </td>
    </tr>
    </table>
    </body>
    </html>


    Also. Dr. Stockton -
    I'm not following at all... can you dumb what you're saying down for me?
     
    Greg Scharlemann, Oct 17, 2005
    #12
  13. Greg Scharlemann

    RobG Guest

    It's preferred that you quote what you are replying to. You appear to be
    using Google group's web interface. To quote what you are replying to,
    don't use the 'reply' link at the bottom of the post. Click the 'show
    options' link, then use the 'reply' link at the top of the message.

    Support for the tbody tag is a requirement of HTML 4.01 (I'd guess that
    it's been around since HTML 1 but I don't care to check). Any browser
    that doesn't support is is not worth considering.

    I think the issue you are referring to is in regard to the tbody element
    and adding table rows in IE using DOM methods.

    According to the HTML 4 specification, the tbody *tag* is optional, but
    the tbody *element* is not. If the HTML source has a table with no
    tbody tags, browsers will insert a tbody element where they feel it is
    appropriate - the tbody element will exist whether the tags do or not.

    When adding rows to a table using DOM, IE requires that you add the new
    row to the tbody element, not the table element. Most other browsers
    are happy to add the row to the table. It could well be argued that IE
    is more 'correct' here, but the point is moot.

    The situation is possibly muddied by the fact that the rows collection
    is a property of the table object. It could be argued that the the
    table should have a tbodies (tbodys?) collection, and the rows
    collection should be a property of a tbody - but I don't like the
    chances of that being adopted. :)

    There are a number of solutions:

    1. Add new rows based on a reference to an existing row, e.g.

    existingRow.parentNode.appendChild(newRow);

    Here existingRow.parentNode will refer to the (probably not in the
    source code) tbody element

    2. Use a reference to the tbody to start with.

    3. Use the table's insertRow method:

    <URL:http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-39872903>
     
    RobG, Oct 18, 2005
    #13
  14. Greg Scharlemann

    McKirahan Guest

    If you have more than 9 replacements then it's easiest to
    use 3 digits; because "#1" is found in "#11".

    Thus,
    " <td class='tableContent' align='right'>$#1</td>",
    should be
    " <td class='tableContent' align='right'>$#101</td>",
    and change
    dataBuild = dataBuild.replace("#"+j,dataValue[j]);
    to
    dataBuild = dataBuild.replace("#"+(100+j),dataValue[j]);
     
    McKirahan, Oct 18, 2005
    #14
  15. Greg Scharlemann

    RobG Guest

    Not much of it.
    Your data would be much better expressed as an array of arrays:

    var dataArray =
    [
    ['531245','129,900','3','3','1,720'],
    ['531246','130,900','3','3','1,800'],
    ['531246','150,100','3','2','1,910'],
    ['513195','124,500','4','3','1,528']
    ];

    Now each value in the array is specified explicitly and you aren't
    hoping one of your values contains a '^' character that will mess up
    your later use of split().
    [...]

    The use of an array here does not use any of the benefits of an array,
    you may as well just concatenate the string. But why not use a loop to
    build the rows based on the data that is needed?


    This simply concatenates the array, it can be replaced with:

    var dataBuild = dataTable.join('');

    Here the weakness of your method is demonstrated. Having constructed a
    large string of dummy values, you now have to replace them with the real
    ones using a series of regular expressions, the effect of which is to
    garble the table content. It may also put something into the string
    that is interpreted as HTML - results may be unpredictable.

    Insert the correct values as you create the table and ensure that they
    can't be misinterpreted as markup. Use a for or while loop to build the
    string for each row, then you can write as many/few as you like.

    You could also significantly reduce the amount of innerHTML if you make
    better use of CSS = you could remove nearly all the class attributes.

    Read the FAQ.

    Below is a version of your script using innerHTML. I still think it's
    better to simply replace the content of the cells rather than writing
    the entire table each time, but there you go. You can just add more
    rows to the data array and add more 'changePage()' links to extend the
    table. Modifying the call will change how many rows are displayed.

    A better version would use 'previous' and 'next' links that didn't need
    hard-coded values - I'll leave that up to you. I prefer to use double
    quotes in HTML and single in script, so I've modified that.

    I have not fixed your (numerous) XHTML validation errors.



    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <title> dataTable.htm</title>

    <script type="text/javascript">

    var dataArray =
    [
    ['531245','129,900','3','3','1,720'],
    ['531246','130,900','3','3','1,800'],
    ['531246','150,100','3','2','1,910'],
    ['513195','124,500','4','3','1,528']
    ];

    function buildRow(dArray, idx)
    {
    var dat = dArray[idx];
    var s =
    // TR tag
    '<tr valign="top" class="rowOff" onMouseOver="'
    + 'this.className=\'rowOn\'" onMouseOut="'
    + 'this.className=\'rowOff\'">'
    // 1st td tag
    + '<td class="grid" align="center"><a class="inlineActionLink"'
    + 'href="detailinfo.php?MlsNum='
    + dat[0] + '#0&nomap=true"'
    + 'title="Unable to locate on map">Details</a></td>';
    // Next 4 td tags
    for (var i=1, num=dat.length; i<num; ++i){
    s += '<td class="tableContent" align="right">'
    + dat + '</td>';
    }
    // close TR tag
    s += '</tr>';
    return s;
    }

    function buildTable(startIdx, num)
    {
    var s =
    // Open table tags + add header
    '<table border="1" cellpadding="2" cellspacing="1"'
    + 'width="100%" class="tableGridList"><tr>'
    + '<td class="colHead" align="center">&nbsp;</td>'
    + '<td class="colHead" align="center">Price</td>'
    + '<td class="colHead" align="center">Beds</td>'
    + '<td class="colHead" align="center">Baths</td>'
    + '<td class="colHead" align="center">SqFt.</td></tr>'

    // Add as many rows as have been asked (if data exists)
    for (var i=0; i<num; i++){
    if (dataArray[+startIdx + i]) {
    s += buildRow(dataArray, +startIdx+i);
    }
    }

    // Close the table
    s += '</table>';
    return s;
    }

    // idx is the start index in teh data array
    // num is how many rows to show
    function changePage(idx, num)
    {
    var s = buildTable(idx, num);
    document.getElementById("panel").innerHTML = s;
    }

    </script>
    </head>

    <body onload="changePage(0, 3)">
    <table border="0" cellpadding="0" cellspacing="0" width="300">
    <tr>
    <td width="100%" style="padding:2px;">
    <div id="panel"></div>
    </td>
    </tr>
    <tr>
    <td>
    <a href="#" onclick="changePage(0,3);">1</a> |
    <a href="#" onclick="changePage(3,3);">2</a>
    </td>
    </tr>
    </table>
    </body>
    </html>
     
    RobG, Oct 18, 2005
    #15
  16. JRS: In article <>
    , dated Mon, 17 Oct 2005 14:29:21, seen in
    Have you, as advised, read FAQ 4.15 yet?

    In the code of your previous article, var dataTable is used only as
    input to dataBuild += dataTable and is therefore pointless.

    <URL:http://www.merlyn.demon.co.uk/js-other.htm>

    Your output table is two-dimensional; therefore, your data array should
    be too; or higher for a pile of Tables.

    var dataArray = [
    [ // Table 0
    ["531245", "129,900", "3", "3", "1,720"], // Row 0
    ["531246", "130,900", "3", "3", "1,800"], // Row 1
    ["531246", "150,100", "3", "2", "1,910"] // Row 2
    ],
    [ // Table 1
    ["513195", "124,500", "4", "3", "1,528"] // Row 0
    ]
    ]

    Now in function changePage(index) {
    you begin
    var TblData = dataArray[index]
    var HTML = "<table ...>"
    then
    for (R=0; T<TblData.length; R++) {
    var RowData = TblData[R]
    var Ro = "<tr>"
    for (C=0; C<RowData.length; C++) {
    var ColDatum = RowData[C]
    ....
    Ro += "<td>" + ... + "\/td" }
    HTML += Ro + "<\/tr>" }
    HTML += "<\/table>"
    DynWrite("panel", HTML) }

    Rather than those +=, you could first start var HTML = [], J = 0
    then each time text is generated HTML[J++] = text
    then DynWrite("panel", HTML.join())
    which may be more efficient.

    You'll need to complicate it a bit for your different types of table
    entry.

    You won't need all those class parts if you precede the Table with a
    style for <td>.
     
    Dr John Stockton, Oct 18, 2005
    #16
  17. You get "Object Expected" errors in IE on several occasions, for example
    here since a function cannot be called, i.e. the referred Function object
    is was not declared, that is, it is *missing*. IE's error messages are
    (like many M$ error msgs) seldom descriptive and thus almost never helpful
    to the unexperienced[1]; use Moz/FF/Opera for JS debugging first.


    PointedEars
    ___________
    [1] There have been error messages reported saying *only*
    "An error occured." (Yes, really? Tell me something I don't know!)
     
    Thomas 'PointedEars' Lahn, Oct 18, 2005
    #17
  18. Greg Scharlemann

    Evertjan. Guest

    Randy Webb wrote on 19 okt 2005 in comp.lang.javascript:
    Why would that be?
    I rather like it,
    so you are not speaking for everybody, Randy.
     
    Evertjan., Oct 18, 2005
    #18
  19. Greg Scharlemann

    Randy Webb Guest

    Thomas 'PointedEars' Lahn said the following on 10/18/2005 5:35 PM:
    It seems that your dislike for MS has clouded your view/objectivity of
    error messages in other UA's.

    The error messages in Firefox are utterly useless to the "inexperienced"
    person simply because it is not that easy to find.

    Calling Microsoft "M$" does *not* do anything other than make you look bad.
     
    Randy Webb, Oct 18, 2005
    #19
  20. I'm starting to lean more towards the tbody example. I don't like the
    idea of two or three dimensional arrays (mainly for debugging purposes)
    and including all of that html in the javascript function. If I do use
    the tbody example that Rob outlined below, is there a way to duplicate
    these two javascript statements that I had on each <tr> element?

    onMouseOver="this.className='rowOn'"
    onMouseOut="this.className='rowOff'"

    Thanks for all the help...Greg
     
    Greg Scharlemann, Oct 19, 2005
    #20
    1. Advertisements

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments (here). After that, you can post your question and our members will help you out.