SitePoint Sponsor

User Tag List

Results 1 to 2 of 2
  1. #1
    SitePoint Zealot
    Join Date
    Sep 2004
    Location
    london
    Posts
    160
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    table expand/collapse, only parse underlying code if expanded

    Hi there, I have a bit of sample code here (with javascript doing the work) that will expand specific rows of a table, or indeed an entire table when the toggle row display button is pressed.

    However by pressing the button, it just makes the rows visible/invisible, the underlying code has already been processed when the page is loaded... What Im hoping to do is be able to click on this button and it then goes off "at that point" and does a database query (using PHP) to populate the table that appears. I dont want the page to process said query when the page loads initially, only when prompted by the button which in turn displays the table

    Does anybody know if javascript can prevent the markup from being parsed until the button is pressed? or will it always run through the code ?

    i will have a relatively complex DB call within this section and i dont want to have it run every time the page is loaded, only when the user wishes to see it (presses the button)

    here is an example piece of html/js that can be run directly.

    any help on this would be greatly appreciated

    Code:
    <html>
    <head>
        <title>Untitled</title>
    </head>
    
    
    <script type="text/javascript">
    
    var rowVisible = false;
    
    function toggleDisplay(tbl) {
       var tblRows = tbl.rows;
       for (i = 1; i < tblRows.length; i++) {
          if (tblRows[i].className != "headerRow") {
             tblRows[i].style.display = (rowVisible) ? "none" : "table-row";
          }
       }
       rowVisible = !rowVisible;
    }
    
    </script>
    
    <style type="text/css">
    
    table#theTable tr {
       display:none;
    
    }
    
    table#theTable tr.headerRow {
       display:table-row;
    
    }
    
    </style>
    
    <body>
    
    <table border="1">
    <tr>
    <td>	
    <table id="theTable" border="0">
       <tr class="headerRow">
          <th>test header</th>
          <th>test header</th>
          <th>test header</th>
       </tr>
       <tr>
          <td>test</td>
          <td>test</td>
          <td>test</td>
       </tr>
       <tr>
          <td>test</td>
          <td>test</td>
          <td>test</td>
       </tr>
    </table>
    </td>
    <td>
    <input type="button" value="toggle row display" onclick="toggleDisplay(document.getElementById('theTable'))" />
    </td>
    </tr>
    <tr>
    	<td>
    		i am some more data
    	</td>
    </tr>	
    </table>
    </body>
    
    </html>

  2. #2
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,729
    Mentioned
    104 Post(s)
    Tagged
    4 Thread(s)
    You will be wanting to use Ajax to achieve that.

    It's fairly complex to approach it on its own, but books like Bulletproof Ajax help, and even provide code for you.

    Otherwise, you could also look in to using a library to help, such as jQuery's Ajax
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript


Bookmarks

Posting Permissions

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