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 10 of 10
  1. #1
    New to the CF scene
    Join Date
    Dec 2010
    Posts
    6
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Using Javascript to display next table row.

    Hi guys,
    I am new to this forum and I am sorry if this is not the right section to post this. Please move this to the appropriate section.

    I am rather new to HTML and Javascripting and am currently developing an Intranet Webpage. On one of the pages, I am required to update the contents of the webpage using a .csv file which will be uploaded to the server on a daily basis.

    I have learnt that it is possible to update the contents using "Tabular Data Control" to display the contents and update it regularly. I am also reuqired to change an images according to content in the table. However, I am only able to retrieve the first row the the table and therefore would like some assistance to help retrieve the subsequent rows.

    Here are my codes:

    Codes for the .csv/.txt files
    Code:
    Name,Status
    Item #1,Completed
    Item #2,Pending
    Item #3,Not Started
    Item #4,Completed
    Item #5,Completed
    Item #6,Pending
    HTML codes:
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
    <title>Untitled Document</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    </head>
    
    <body onLoad="loadStatus()">
    <script type="text/javascript">
    function loadStatus(){
    		var textField = document.getElementById("test").innerText
    		alert(textField);
    			if(textField == "Completed") {
    	document.getElementById("pic").src = '/images/completed.jpg'; }
    	else if (textField == "Pending") {
    	document.getElementById("pic").src = '/images/on-going.jpg'; }
    		else if (textField == "Not Started") {
    		document.getElementById("pic").src = '/images/not_started.jpg'; }
    	}
    </script>
    <OBJECT ID="data" CLASSID="CLSID:333C7BC4-460F-11D0-BC04-0080C7055A83">
    	<PARAM NAME="DataURL" VALUE="test.txt">
    	<PARAM NAME="UseHeader" VALUE="true">
    </OBJECT>
    <table  border="1"  bordercolor="#000000" cellpadding="0" datasrc="#data" >
     <THEAD><TR>
    <TBODY>
    <TR>
      <TD><img src="" width="14" height="14" id="pic"></TD>
      <TD><div datafld="Name"></div></TD>
      <TD id="test"><span datafld="Status"></span></TD></TR>
    </TBODY>
    </TABLE>
    
    </body>
    </html>
    I have thought of adding 6 different <object> and 6 <span> using filter to filter each object according to their name. But it would be very messy and would make the page bigger in size.

    I hope you guys can help me. Thanks in advance.

    Cheers,
    Jermms
    Last edited by Jermms; 12-21-2010 at 01:11 AM.

  • #2
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,189
    Thanks
    75
    Thanked 4,341 Times in 4,307 Posts
    You are talking about this thing, right?
    http://msdn.microsoft.com/en-us/libr...=vs.85%29.aspx

    So what does the <table> that it produces look like? Does it indeed have all the rows??

    If so, this should be easy. You just can't do it by using document.getElementById() because it's illegal to use the same ID more than once. MSIE happens to return the FIRST occurrence of the ID, which is why you are getting the first row.
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • Users who have thanked Old Pedant for this post:

    Jermms (12-21-2010)

  • #3
    New to the CF scene
    Join Date
    Dec 2010
    Posts
    6
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Hi Old Pendant,
    Thanks for the quick reply. Yup, it is the same things as the link you provided.

    The <table> show the informations that I require according to the .csv/.txt file. It automatically generate the table rows from the .csv/.txt file.

    oh! That explains why I am only able to retrieve to first row. So, if I'm not to use IDs, am I supposed to use "name" or "class" instead?

    Thanks alot.

    Cheers,
    Jermms

    *EDIT* : I have managed to view the 6 items using the method getElementsByTagName(). However, the images does not change like it does when I was using getElementById.
    Last edited by Jermms; 12-21-2010 at 02:34 AM.

  • #4
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,189
    Thanks
    75
    Thanked 4,341 Times in 4,307 Posts
    Put the id on the <table> tag instead.

    <table id="test" ...

    And then try this:
    Code:
    <script type="text/javascript">
    function loadStatus()
    {
       var tbl = document.getElementById("test");
       for ( var r = 1; r < tbl.rows.length; ++r )  // start at 0 if no header row
       {
            var row = rows[r];
            var name = row.cells[1].innerHTML;
            var pix = null;
            switch ( name )
            {
                case "Completed":
                     pix = '/images/completed.jpg';
                     break;
                case "Pending":
                     pix = '/images/on-going.jpg'; 
                     break;
                case "Not Started":
                     pix = '/images/not_started.jpg';
                     break;
            } // end of switch
            if ( pix != null )
            {
                var image = row.cells[0].getElementsByTagName("img")[0];
                image.src = pix;
    	}
        }
    }
    </script>
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #5
    New to the CF scene
    Join Date
    Dec 2010
    Posts
    6
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Hi Old Pedant ,

    I did not manage to get your codes to work. However, I have managed to get it to work on my own by using the getElementsByTagName() and it works. The images also work too. Thanks alot for the help and helping me think of a solution.

    You were of great help! Thanks!
    Wishing you a Merry Christmas in advance.

    Cheers,
    Jermms

  • #6
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,189
    Thanks
    75
    Thanked 4,341 Times in 4,307 Posts
    Whoops...I was using the wrong cell number, in any case. Getting the name datafld, instead of the status. Should have been
    Code:
            var status = row.cells[2].getElementsByTagName("span")[0].innerHTML;
            var pix = null;
            switch ( status )
    But yeah, I didn't have any code to test with so it was off the top of my head. Glad you worked it out.
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #7
    New to the CF scene
    Join Date
    Dec 2010
    Posts
    6
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Tabular Data Control Javascript filter problem

    Hi Guys,
    I would require some help again as I am facing problems. I don't want to create too many threads about the same topic, so I'm posting in the same thread.

    This time, my error occurs when I am trying to change the image using the data from my TDC with filters using JavaScript. The images do not change automatically and would only change when I call the alert("statusText"); method.

    Code:
    <OBJECT ID="todayData" CLASSID="CLSID:333C7BC4-460F-11D0-BC04-0080C7055A83">
    	<PARAM NAME="DataURL" VALUE="loadstatus.csv">
    	<PARAM NAME="UseHeader" VALUE="true">
    
    </OBJECT>
    <OBJECT ID="yesterdayData" CLASSID="CLSID:333C7BC4-460F-11D0-BC04-0080C7055A83">
    	<PARAM NAME="DataURL" VALUE="loadstatus.csv">
    	<PARAM NAME="UseHeader" VALUE="true">
    
    
    </OBJECT>
    <script type="text/javascript">
    function filter() {
    		var filter1 = "(Number >= 1) & (Number <= 3)"; 
    		todayData.Filter = filter1;
    		todayData.reset();
    		var filter2 = "(Number >= 4) & (Number <= 6)";
    		yesterdayData.Filter = filter2;
    		yesterdayData.reset();
    }
    function loadStatus(){
    		
    		var textField = document.getElementsByTagName("SPAN");
    		var picture = document.getElementsByTagName("IMG");
    		for(var i=0; i<textField.length; i++)
    			{ 
    			var statusText = textField[i].innerText;
    			alert(statusText);
    			if(statusText  == "Completed") 
    			{picture[i].src = '/images/completed.jpg';}
    			else if (statusText == "Pending") 
    			{picture[i].src = '/images/pending.jpg'; }
    			else if (statusText == "Not Started") 
    			{picture[i].src = '/images/not_started.jpg'; }
    			}
    }
    
    function init() {
    	filter()
    	loadStatus()
    
    }
    
    window.onload=init
    </script>
    
    <table  border="0" datasrc="#Todaydata" class="style6" width="60%" cellspacing="0" cellpadding="0">
     <THEAD><TR>
    <TBODY>
    <TR>
      <TD><img src="" width="14" height="14" id="pic"></img></TD>
      <TD><div datafld="Name"></div></TD>
      <TD>(<span datafld="Status"></span>)</TD></TR>
    </TBODY>
    </TABLE>
    <table border="0" datasrc="#yesterdayData" class="style6"  cellspacing="0" cellpadding="0" width="60%">
      <thead>
        <tr>
      <tbody>
        <tr>
          <td><img src="" width="14" height="14" id="pic"></td>
          <td><div datafld="Name"></div></td>
          <td>(<span datafld="Status"></span>)</td>
        </tr>
      </tbody>
    </table>
    I'm not very sure about how the Tabular Data Control works so I hope someone cna enlighten me. My guess is the .reset() function that causes the image to not change. But I'm not very sure.

    Thanks in advance.

    Cheers,
    Jermms

  • #8
    New to the CF scene
    Join Date
    Dec 2010
    Posts
    6
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Tabular Data Control Javascript filter problem

    Hi Guys,
    I would require some help again as I am facing problems. I don't want to create too many threads about the same topic, so I'm posting in the same thread.

    This time, my error occurs when I am trying to change the image using the data from my TDC with filters using JavaScript. The images do not change automatically and would only change when I call the alert("statusText"); method.

    Code:
    <OBJECT ID="todayData" CLASSID="CLSID:333C7BC4-460F-11D0-BC04-0080C7055A83">
    	<PARAM NAME="DataURL" VALUE="loadstatus.csv">
    	<PARAM NAME="UseHeader" VALUE="true">
    
    </OBJECT>
    <OBJECT ID="yesterdayData" CLASSID="CLSID:333C7BC4-460F-11D0-BC04-0080C7055A83">
    	<PARAM NAME="DataURL" VALUE="loadstatus.csv">
    	<PARAM NAME="UseHeader" VALUE="true">
    
    
    </OBJECT>
    <script type="text/javascript">
    function filter() {
    		var filter1 = "(Number >= 1) & (Number <= 3)"; 
    		todayData.Filter = filter1;
    		todayData.reset();
    		var filter2 = "(Number >= 4) & (Number <= 6)";
    		yesterdayData.Filter = filter2;
    		yesterdayData.reset();
    }
    function loadStatus(){
    		
    		var textField = document.getElementsByTagName("SPAN");
    		var picture = document.getElementsByTagName("IMG");
    		for(var i=0; i<textField.length; i++)
    			{ 
    			var statusText = textField[i].innerText;
    			alert(statusText);
    			if(statusText  == "Completed") 
    			{picture[i].src = '/images/completed.jpg';}
    			else if (statusText == "Pending") 
    			{picture[i].src = '/images/pending.jpg'; }
    			else if (statusText == "Not Started") 
    			{picture[i].src = '/images/not_started.jpg'; }
    			}
    }
    
    function init() {
    	filter()
    	loadStatus()
    
    }
    
    window.onload=init
    </script>
    
    <table  border="0" datasrc="#Todaydata" class="style6" width="60%" cellspacing="0" cellpadding="0">
     <THEAD><TR>
    <TBODY>
    <TR>
      <TD><img src="" width="14" height="14" id="pic"></img></TD>
      <TD><div datafld="Name"></div></TD>
      <TD>(<span datafld="Status"></span>)</TD></TR>
    </TBODY>
    </TABLE>
    <table border="0" datasrc="#yesterdayData" class="style6"  cellspacing="0" cellpadding="0" width="60%">
      <thead>
        <tr>
      <tbody>
        <tr>
          <td><img src="" width="14" height="14" id="pic"></td>
          <td><div datafld="Name"></div></td>
          <td>(<span datafld="Status"></span>)</td>
        </tr>
      </tbody>
    </table>
    I'm not very sure about how the Tabular Data Control works so I hope someone cna enlighten me. My guess is the .reset() function that causes the image to not change. But I'm not very sure.

    Thanks in advance.

    Cheers,
    Jermms

    *EDIT*: Sorry for the double posting, I had no idea why 2 posts came out when I only posted once. Sorry!
    Last edited by Jermms; 12-27-2010 at 08:43 AM.

  • #9
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,189
    Thanks
    75
    Thanked 4,341 Times in 4,307 Posts
    Pure guess: If the images update later, it might just be a timing issue. The filter might take some time to complete, asynchronously.

    You might try this:
    Code:
    function init() {
    	filter()
    	loadStatus()
            setTimeout( loadStatus, 500 ); // do it again in half a second
    }
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • Users who have thanked Old Pedant for this post:

    Jermms (12-28-2010)

  • #10
    New to the CF scene
    Join Date
    Dec 2010
    Posts
    6
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Hi Old Pendant,

    Wow, that solved the problem. Thanks so much for your help!

    Cheers,
    Jermms


  •  

    Posting Permissions

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