Solved

DOM, change <span> tag content... c# or js

Posted on 2014-07-19
19
285 Views
Last Modified: 2014-07-20
Question: How the text included in a <span> tag could be modified via code?

C# or java script solution will work.

Thank you.
    <td class="yearLableL" ><span class="spanYear">2013 YTD</span>

    </td>

Open in new window


Here, using code "2013 YTD" will change to "2014 YTD" forlexample.
0
Comment
Question by:Mike Eghtebas
  • 11
  • 8
19 Comments
 
LVL 13

Expert Comment

by:duncanb7
ID: 40206966
Is it what you want to start a code, please read the following javascript
The text will be changed from 2013 YTD to 2014 YTD after setTimeout time=1 second,

Hope understand your question completely.If not, please point it out
and also provide your problem code as attachment
Duncan
<html>
<meta http-equiv="Content-Type" content="text/html; charset=Big5">
<head>
<title>Title</title>
<style>
</style>

<script type="text/javascript">
function init()
{

window.setTimeout(function(){
document.getElementsByClassName('tap')[0].innerHTML='2014 YTD';
},1000);
}

</script>
<script type="text/javascript">
</script>
</head>
<body  onload="javascript:init()" >
<div class="tap">2013 YTD</div>
</body>
</html>

Open in new window

0
 
LVL 33

Author Comment

by:Mike Eghtebas
ID: 40206980
Hi Duncan,

This is great.

This code has to run in two different occasions:

1. When a page just loads.
2. When the year (via a DropList changes). Below is the droplist html.

        <asp:DropDownList ID="cboYear" runat="server"  Width="83">
            <asp:ListItem Text="2013" Value="2013" />
            <asp:ListItem Text="2014" Value="2014" />
        </asp:DropDownList>

Open in new window


I suppose, an event has to be added to this tag to handle the 2nd part. And the 1st part I remember from the past there was an event runs when a page uploads. You probably know both with no hesitation.

If so, I appreciate the additional help.

Regards,

Mike
0
 
LVL 13

Expert Comment

by:duncanb7
ID: 40206985
I just answered what you wrote in question post, and now I don't understand
what you want. Could you write it in step by step for task input requirement/condition and output requirement/condition at what language such as ASP, Javascript or C# so other experts could help on that


Duncan
0
 
LVL 33

Author Comment

by:Mike Eghtebas
ID: 40206991
I am using c#, asp.net.

For now staying with the original question, I included the code you gave me. It has not worked for me yet partially because you are referring to name 'tap' I do not have:

document.getElementsByClassName('tap')[0].innerHTML='2014 YTD';

so, I added  id="spanYearR"

<td class="yearLableR" ><span class="spanYear" [b]id="spanYearR"[/b]>2013 YTD</span></td>

Open in new window



and changed your code to:

<script type="text/javascript">
    function init() {

        window.setTimeout(function () {
            document.getElementsByID('spanYearR')[0].innerHTML = '2014 YTD';
        }, 1000);
    }

</script>

Open in new window


Please comment on this revised code because still is not working.

Thank you,

Mike
0
 
LVL 13

Expert Comment

by:duncanb7
ID: 40206993
tap is just example only for classname
0
 
LVL 13

Expert Comment

by:duncanb7
ID: 40206995
id is unique and no such as [0] format,
classname can be the same in many tags
id is unique only for one tag, if more tag with the same id
, only top tag with id  will be affected or updated depend on
the browser type.


try this
function init()
{

window.setTimeout(function(){
//document.getElementsByClassName('spanYear')[0].innerHTML='2014 YTD';
document.getElementById('spanYearR').innerHTML='2014 YTD';
},1000);
}
0
 
LVL 13

Expert Comment

by:duncanb7
ID: 40206998
getElementById not getElementsById

Duncan
0
 
LVL 13

Accepted Solution

by:
duncanb7 earned 500 total points
ID: 40207000
Please take a look into it
<html>
<meta http-equiv="Content-Type" content="text/html; charset=Big5">
<head>
<title>Title</title>
<style>

</style>

<script type="text/javascript">
function init()
{

window.setTimeout(function(){
//document.getElementsByClassName('spanYear')[0].innerHTML='2014 YTD';
document.getElementById('spanYearR').innerHTML='2014 YTD';
},1000);
}

</script>
<script type="text/javascript">
</script>
</head>
<body  onload="javascript:init()" >

<table><tr>
<td class="yearLableL" ><span class="spanYear" id="spanYearR">2013 YTD</span></td>
</tr></table>
</body>
</html>

Open in new window

0
 
LVL 33

Author Comment

by:Mike Eghtebas
ID: 40207008
Thank you so much for the time and effort. I am out of luck so far. I removed the timer and ran:
	float:left;  
}
</style>
<script type="text/javascript">
    function init() {

       // window.setTimeout(function () {
            document.getElementsByClassName('spanYear')[0].innerHTML='2014 YTD';
           document.getElementById('spanYearR').innerHTML = '2014 YTD';
     //   }, 1000);
    }
</script>
</head>
<body>

Open in new window


It hasn't work so far.

Consider:
	float:left;  
}
</style>
<script type="text/javascript">
    function init() {
          updateYear();   //<-- not sure about the syntax
    }

  function updateYear(){
          document.getElementsByClassName('spanYear')[0].innerHTML='2014 YTD';
           document.getElementById('spanYearR').innerHTML = '2014 YTD';
 }
</script>
</head>
<body>
.
.
.also updateYear() is to be called when a year value changes via the following droplist:


        <asp:DropDownList ID="cboYear" runat="server"  Width="83" OnChange="updateYear();">
            <asp:ListItem Text="2013" Value="2013" />
            <asp:ListItem Text="2014" Value="2014" />
        </asp:DropDownList>

Open in new window


I am not sure about the OnChange="updateYear();"> part.

BTW, I added alert("is running"); through out your code; I don't know where I have messed it up.

Mike
0
Enabling OSINT in Activity Based Intelligence

Activity based intelligence (ABI) requires access to all available sources of data. Recorded Future allows analysts to observe structured data on the open, deep, and dark web.

 
LVL 13

Expert Comment

by:duncanb7
ID: 40207012
Could you send us complete page or code and write down what you need ?

Duncan
0
 
LVL 33

Author Comment

by:Mike Eghtebas
ID: 40207015
Here is the complete code: (for what I want to accomplish please see my last post)
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="PercentageForm.aspx.cs" 

Inherits="ASPChartComparision.PercentageForm" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
    <title></title>
<style type="text/css">
body {
	text-align:center;
	background:rgb(64,64,64);
}
.fontAndBackgroundColor {
	color:white;
	/*border: 2px solid yellow;*/
	background:transparent;
}
.clear {
	clear:both;
}
.leftForm {
	width:412px;
	min-height:20px;
		float:left; 
} /*
.capationForm 
{
   text-align:left;
	width:412px;
	min-height:20px;
    float:left;    
    background-color:yellow;
   top:0px;

}
.capationSideForm {
	width:180px;
	min-height:20px;
    float:right;
    top:0px;
    left:0px;
}*/
.gap {
	width:8px;
	min-height:20px;
    float:left;
}
.hgap {
	width:1050;
	height:40px;
    float:left;
    background
}/*
.formCaptions {
	width:412px;
	min-height:20px;

}	*/
.rightForm {
	width:412px;
	min-height:20px;
    float:left;
}	


.annual 
{
	width:180px;
	min-height:20px;
    float:left;
}
.leftButton {
	width:319px;
	min-height: 60px;
	left:0px;
	float:left; 
}
.rightButton {
	width:319px;
	min-height: 60px;
	float:left; 
}
.middleButton {
	width:200px;
	min-height: 60px;
	float:left; 
}
.empty {
	width:160px;
	min-height: 60px;
	float:left; 
	/*border:1px solid grren;*/
}
.controls {
	width:1020px;
	min-height: 20px;
	float:left;
     text-align: left;

    }
    
    .table {
	width:1120px;
	/*border-bottom-color:Yellow;*/
    }
  .Panel3,  .optRollup {
display:inline-block;
background: transparent;
border:1px solid gray;
height:19px;
    margin:0px 0px 0px 0px;
}
.yearLableL, .yearLableR
{
    width:100px;
	min-height:30px;
   /* float:left;
    left:0px;
    background-color:White;*/
    float:left;
    background-color:White;
    border-bottom-width:10px;
    border-bottom-color:rgb(64,64,64);
    
    
}
.metricLableL, .metricLableR
{
    width:295px;
	min-height:30px;
	background-color:rgb(159,140,183);
   /* float:left;
    left:0px;
    background-color:White;*/
    float:left;
    margin:auto auto auto 5px;
    color:White;
}
.captionAnnual
{
    width:188px;
	min-height:30px;
	background-color:rgb(159,140,183);
    float:left;
    margin:auto auto auto 15px;
    color:White;
}
#yearLableL,  #yearLableR
{

 border-color:transparent;
  background-color:transparent;
  color:0;
  left:0px;
  margin:3px auto auto auto;
   font-size:20px;
  font-weight: bold;
  font-family:Arial;
}
.spanMetric {
  font-size:20px;
  font-weight: bold;
  font-family:Arial;
}
.spanYear
{
   font-size:18px;
  font-weight: bold;
  font-family:Arial; 
  color :0;  
}
#metricLableL, #metricLableR
{
   /*background-color:rgb(159,140,183);*/
   border-color:transparent;

   color:White;
   width:270px;
   height:20px;

 /* font-size:16px;
  font-weight: bold;
  font-family:Arial;
  
  
  
  
  
  border:1px solid green;*/
  padding:5px auto auto auto;
  margin:0px 20px auto 0px;
}  
#annualmetric
{
   background-color:Gray;
  font-size:20px;
  font-weight: bold;
  font-family:Arial;
}   
.CriteriaCaptionsLeft{
	width:120px;
	min-height: 20px;
	float:left; 
    text-align: left;
}

.CriteriaGeneral, .CriteriaDefault, .CriteriaSide, .CriteriaRight, .CriteriaLeft  {
	width:90px;
	min-height: 20px;
	float:left;  
}
</style>
<script type="text/javascript">
    function init() {

       // window.setTimeout(function () {
            document.getElementsByClassName('spanYear')[0].innerHTML='2014 YTD';
           document.getElementById('spanYearR').innerHTML = '2014 YTD';
     //   }, 1000);
    }
</script>
</head>
<body>

<form id="form1" runat="server">
<table border="0" class="table">
<tr >
    <td class="yearLableL" ><span class="spanYear">2013 YTD</span>
      <!--   <asp:TextBox ID="yearLableL" runat="server">2013 YTD</asp:TextBox>-->
    </td>
       <td class="metricLableL"><span class="spanMetric">Metric Name</span>
       <!--  <asp:TextBox ID="metricLableL" runat="server">Metric Name</asp:TextBox>-->
    </td>
    <td class="gap"></td>
    <td class="yearLableR" ><span class="spanYear" id="spanYearR">2013 YTD</span>
      <!--   <asp:TextBox ID="yearLableR" runat="server">2013 YTD</asp:TextBox>-->
     </td>
       <td class="metricLableR"><span class="spanMetric">Metric Name</span>
      <!--  <asp:TextBox ID="metricLableR" runat="server">Metric Name</asp:TextBox>-->
    </td>
    <td class="gap"></td>
    <td class="captionAnnual"><span class="spanMetric">Metric Name</span>
    
    </td>
    
</tr>
        <tr>
            <td  class="leftForm">
                <asp:GridView ID="gwRightForm" runat="server" AutoGenerateColumns="False" 
                        BackColor="White" BorderColor="#DEDFDE" BorderStyle="None" BorderWidth="1px" 
                        CellPadding="4" DataKeyNames="MedCtrID" DataSourceID="LeftFormSQL" 
                        Font-Names="Arial" Font-Size="Small" ForeColor="Black" 
                    GridLines="Vertical">
                <AlternatingRowStyle BackColor="White" />
                <Columns>
                <asp:BoundField DataField="Med_Center" HeaderText="Med Ctr" ReadOnly="True" 
                    SortExpression="Med_Center">
                <ItemStyle HorizontalAlign="Left" Width="72px" Wrap="False" />
                </asp:BoundField>
                <asp:BoundField DataField="LastYearCount" DataFormatString="{0:F0}" 
                    HeaderText="2013" SortExpression="LastYearCount">
                <ItemStyle Wrap="False" />
                </asp:BoundField>
                <asp:BoundField DataField="01" DataFormatString="{0:F0}" HeaderText="01" 
                    SortExpression="01">
                <ItemStyle Wrap="False" />
                </asp:BoundField>
                <asp:BoundField DataField="02" DataFormatString="{0:F0}" HeaderText="02" 
                    SortExpression="02" />
                <asp:BoundField DataField="03" DataFormatString="{0:F0}" HeaderText="03" 
                    SortExpression="03" />
                <asp:BoundField DataField="04" DataFormatString="{0:F0}" HeaderText="04" 
                    SortExpression="04" />
                <asp:BoundField DataField="05" DataFormatString="{0:F0}" HeaderText="05" 
                    SortExpression="05" />
                <asp:BoundField DataField="06" DataFormatString="{0:F0}" HeaderText="06" 
                    SortExpression="06" />
                <asp:BoundField DataField="07" DataFormatString="{0:F0}" HeaderText="07" 
                    SortExpression="07" />
                <asp:BoundField DataField="08" DataFormatString="{0:F0}" HeaderText="08" 
                    SortExpression="08" />
                <asp:BoundField DataField="09" DataFormatString="{0:F0}" HeaderText="09" 
                    SortExpression="09" />
                <asp:BoundField DataField="10" DataFormatString="{0:F0}" HeaderText="10" 
                    SortExpression="10" />
                <asp:BoundField DataField="11" DataFormatString="{0:F0}" HeaderText="11" 
                    SortExpression="11" />
                <asp:BoundField DataField="12" DataFormatString="{0:F0}" HeaderText="12" 
                    SortExpression="12" />
                </Columns>
                <FooterStyle BackColor="#CCCC99" />
                <HeaderStyle BackColor="#6B696B" Font-Bold="True" ForeColor="White" />
                <PagerStyle BackColor="#F7F7DE" ForeColor="Black" HorizontalAlign="Right" />
                <RowStyle BackColor="#F7F7DE" Width="25px" Wrap="False" />
                <SelectedRowStyle BackColor="#CE5D5A" Font-Bold="True" ForeColor="White" />
                <SortedAscendingCellStyle BackColor="#FBFBF2" />
                <SortedAscendingHeaderStyle BackColor="#848384" />
                <SortedDescendingCellStyle BackColor="#EAEAD3" />
                <SortedDescendingHeaderStyle BackColor="#575357" />
                </asp:GridView>
            </td>
            <td class="gap">
            </td>
            <td class="rightForm">
                <asp:GridView ID="gwLeftForm" runat="server" AutoGenerateColumns="False" 
                    BackColor="White" BorderColor="#DEDFDE" BorderStyle="None" BorderWidth="1px" 
                    CellPadding="4" DataKeyNames="MedCtrID" DataSourceID="LeftFormSQL" 
                    Font-Names="Arial" Font-Size="Small" ForeColor="Black" GridLines="Vertical" 
                    Width="400px">
            <AlternatingRowStyle BackColor="White" />
            <Columns>
                <asp:BoundField DataField="Med_Center" HeaderText="Med Ctr" ReadOnly="True" 
                    SortExpression="Med_Center">
                <ItemStyle HorizontalAlign="Left" Width="72px" Wrap="False" />
                </asp:BoundField>
                <asp:BoundField DataField="LastYearCount" DataFormatString="{0:F0}" 
                    HeaderText="2013" SortExpression="LastYearCount">
                <ItemStyle Width="72px" Wrap="False" />
                </asp:BoundField>
                <asp:BoundField DataField="01" DataFormatString="{0:F0}" HeaderText="01" 
                    SortExpression="01">
                <ItemStyle Width="25px" Wrap="False" />
                </asp:BoundField>
                <asp:BoundField DataField="02" DataFormatString="{0:F0}" HeaderText="02" 
                    SortExpression="02" />
                <asp:BoundField DataField="03" DataFormatString="{0:F0}" HeaderText="03" 
                    SortExpression="03" />
                <asp:BoundField DataField="04" DataFormatString="{0:F0}" HeaderText="04" 
                    SortExpression="04" />
                <asp:BoundField DataField="05" DataFormatString="{0:F0}" HeaderText="05" 
                    SortExpression="05" />
                <asp:BoundField DataField="06" DataFormatString="{0:F0}" HeaderText="06" 
                    SortExpression="06" />
                <asp:BoundField DataField="07" DataFormatString="{0:F0}" HeaderText="07" 
                    SortExpression="07" />
                <asp:BoundField DataField="08" DataFormatString="{0:F0}" HeaderText="08" 
                    SortExpression="08" />
                <asp:BoundField DataField="09" DataFormatString="{0:F0}" HeaderText="09" 
                    SortExpression="09" />
                <asp:BoundField DataField="10" DataFormatString="{0:F0}" HeaderText="10" 
                    SortExpression="10" />
                <asp:BoundField DataField="11" DataFormatString="{0:F0}" HeaderText="11" 
                    SortExpression="11" />
                <asp:BoundField DataField="12" DataFormatString="{0:F0}" HeaderText="12" 
                    SortExpression="12" />
                </Columns>
                <FooterStyle BackColor="#CCCC99" />
                <HeaderStyle BackColor="#6B696B" Font-Bold="True" ForeColor="White" />
                <PagerStyle BackColor="#F7F7DE" ForeColor="Black" HorizontalAlign="Right" />
                <RowStyle BackColor="#F7F7DE" Width="25px" Wrap="False" />
                <SelectedRowStyle BackColor="#CE5D5A" Font-Bold="True" ForeColor="White" />
                <SortedAscendingCellStyle BackColor="#FBFBF2" />
                <SortedAscendingHeaderStyle BackColor="#848384" />
                <SortedDescendingCellStyle BackColor="#EAEAD3" />
                <SortedDescendingHeaderStyle BackColor="#575357" />
                </asp:GridView>
                <asp:SqlDataSource ID="LeftFormSQL" runat="server" 
                    ConnectionString="<%$ ConnectionStrings:ROD_July18ConnectionString %>" 
                    SelectCommand="spPercentageForm" SelectCommandType="StoredProcedure">
                <SelectParameters>
                    <asp:Parameter DefaultValue="101" Name="Metric_ID" Type="Int32" />
                    <asp:Parameter DefaultValue="2013" Name="YYYY" Type="String" />
                    <asp:Parameter DefaultValue="1" Name="RegionID" Type="Int32" />
                </SelectParameters>
                </asp:SqlDataSource>
            </td>
    <td class="gap">
    </td>
    <td class="annual fontAndBackgroundColor">
   <asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False" 
            DataKeyNames="StatTypeID" DataSourceID="SideFormSQL"  Width="180px" 
            BackColor="White" BorderColor="#DEDFDE" BorderStyle="None" BorderWidth="1px" 
            CellPadding="4" Font-Names="Arial" Font-Size="Small" ForeColor="Black" 
            GridLines="Vertical">
            <AlternatingRowStyle BackColor="White" />
            <Columns>
                <asp:BoundField DataField="LastYearCount" HeaderText="2013" 
                    SortExpression="LastYearCount" DataFormatString="{0:n0}" >
                <ItemStyle HorizontalAlign="Right" />
                </asp:BoundField>
                <asp:BoundField DataField="CurrYearCount" HeaderText="2014" 
                    SortExpression="CurrYearCount" DataFormatString="{0:n0}" >
                <ItemStyle HorizontalAlign="Right" />
                </asp:BoundField>
                <asp:BoundField DataField="IncreaseOverLastYear" HeaderText="%" 
                    SortExpression="IncreaseOverLastYear" DataFormatString="{0:F0}" />
            </Columns>
            <FooterStyle BackColor="#CCCC99" />
            <HeaderStyle BackColor="#6B696B" Font-Bold="True" ForeColor="White" />
            <PagerStyle BackColor="#F7F7DE" ForeColor="Black" HorizontalAlign="Right" />
            <RowStyle BackColor="#F7F7DE" />
            <SelectedRowStyle BackColor="#CE5D5A" Font-Bold="True" ForeColor="White" />
            <SortedAscendingCellStyle BackColor="#FBFBF2" />
            <SortedAscendingHeaderStyle BackColor="#848384" />
            <SortedDescendingCellStyle BackColor="#EAEAD3" />
            <SortedDescendingHeaderStyle BackColor="#575357" />
            </asp:GridView>
            <asp:SqlDataSource ID="SideFormSQL" runat="server" 
                ConnectionString="<%$ ConnectionStrings:ROD_July18ConnectionString %>" 
                SelectCommand="spAuunuaCountMedCtr" SelectCommandType="StoredProcedure">
             <SelectParameters>
                        <asp:Parameter DefaultValue="2" Name="StatType_ID" Type="Int32" />
                        <asp:Parameter DefaultValue="2013" Name="YYYY" Type="String" />
                        <asp:Parameter DefaultValue="1" Name="RegionID" Type="Int32" />
                    </SelectParameters>
                </asp:SqlDataSource>
            </td>
	</tr>
    <tr class="controls fontAndBackgroundColor">
        <td>
        <asp:Label 
            ID="Label4" runat="server" Text="Region:" 
            style="font-family: Arial; font-size: small" Height="22px"></asp:Label>
        <asp:DropDownList ID="cboRegion" runat="server" Width="83">
            <asp:ListItem Text="Region 1" Value="1" />
            <asp:ListItem Text="Region 2" Value="2" />
            <asp:ListItem Text="Region 3" Value="3" />
        </asp:DropDownList>&nbsp&nbsp&nbsp&nbsp
        <asp:Label ID="Label5" runat="server" Text="Data Year:" 
            style="font-size: small; font-family: Arial" Height="22px"></asp:Label>
        <asp:DropDownList ID="cboYear" runat="server"  Width="83">
            <asp:ListItem Text="2013" Value="2013" />
            <asp:ListItem Text="2014" Value="2014" />
        </asp:DropDownList>
        &nbsp&nbsp&nbsp&nbsp
             <asp:Label ID="Label6" runat="server" Text="Rollup:"  style="font-size: small; font-family: Arial" Height="22px"></asp:Label>
            <asp:Panel ID="optRollup" Class="optRollup" runat="server"  >
            <asp:RadioButton ID="RadioButton1" name="Rollup" Text="Monthly" runat="server"  style="font-family: Arial; font-size: small" GroupName="Rollup" />&nbsp
           <asp:RadioButton ID="RadioButton2"  name="Rollup" Text="YTD" Checked="true" runat="server"  style="font-family: Arial; font-size: small" GroupName="Rollup"/>&nbsp&nbsp
        </asp:Panel>&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp
              <asp:Label ID="Label7" runat="server" Text="Location:"  style="font-size: small; font-family: Arial" Height="22px"></asp:Label>
<asp:Panel ID="Panel3" Class="Panel3" runat="server"  >
             <asp:RadioButton ID="RadioButton3"  name="location" Text="SA" runat="server" style="font-family: Arial; font-size: small"  GroupName="Location" />
             <asp:RadioButton ID="RadioButton4" name="location" Text="Med Ctr" Checked="true" runat="server" style="font-family: Arial; font-size: small" GroupName="Location" />
            <asp:RadioButton ID="RadioButton5" name="location" Text="MOB" runat="server" style="font-family: Arial; font-size: small" GroupName="Location" />&nbsp&nbsp
            <asp:RadioButton ID="RadioButton6" name="location" Text="RA" runat="server" style="font-family: Arial; font-size: small"  GroupName="Location" />&nbsp&nbsp
        </asp:Panel>
        </td>
       <td class="leftButton fontAndBackgroundColor">
                    <asp:Panel ID="Panel1" runat="server" GroupName="optLeft">
                     <asp:Button ID="Button1" Name="opt" runat="server" Text="1" Height="30px" 
                            Width="103px" TabIndex="1"  />
                     <asp:Button ID="Button2" Name="opt" runat="server" Text="3" Height="30px" 
                            Width="103px" TabIndex="3" />
                     <asp:Button ID="Button3" Name="opt" runat="server" Text="5" Height="30px" 
                            Width="103px" TabIndex="5" /><br />
                     <asp:Button ID="Button4" Name="opt" runat="server" Text="2" Height="30px" 
                            Width="103px" TabIndex="2" />
                     <asp:Button ID="Button5" Name="opt" runat="server" Text="4" Height="30px" 
                            Width="103px" TabIndex="4" />
                     <asp:Button ID="Button6" Name="opt" runat="server" Text="6" Height="30px" 
                            Width="103px" TabIndex="6" />
                 </asp:Panel>
    </td>
	<td class="middleButton fontAndBackgroundColor">
         <img src="images/Button.png" width="200px" height="60px" />
        <!-- <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>-->
    </td>
 	<td class="rightButton right fontAndBackgroundColor">
                <asp:Panel ID="Panel2" runat="server">
                     <asp:Button ID="Button7" runat="server" Text="7" Height="30px" 
                         Width="103px" TabIndex="7" />
                     <asp:Button ID="Button8" runat="server" Text="9" Height="30px" 
                         Width="103px" TabIndex="9" />
                     <asp:Button ID="Button9" runat="server" Text="11" Height="30px" 
                         Width="103px" TabIndex="11" /><br />
                     <asp:Button ID="Button10" runat="server" Text="8" Height="30px" 
                         Width="103px" TabIndex="8" />
                     <asp:Button ID="Button11" runat="server" Text="10" Height="30px" 
                         Width="103px" TabIndex="10" />
                     <asp:Button ID="Button12" runat="server" Text="12" Height="30px" 
                         Width="103px" TabIndex="12" />
                 </asp:Panel>   
    </td>
  <td class="empty " >

   </td>
</tr>
<tr class="controls">
<td></td>
</tr>
<tr>
<td class="CriteriaCaptionsLeft fontAndBackgroundColor">
    <asp:Label ID="Label1" runat="server" Text="Criterial type:"></asp:Label><br />
    <asp:Label ID="Label2" runat="server" Text="Region ID"></asp:Label><br />
    <asp:Label name="MetricLeft" ID="Label3" runat="server" Text="Metric/Stat ID"></asp:Label><br />
    <asp:Label ID="YYYY" runat="server" Text="YYYY"></asp:Label>
</td>
<td class="CriteriaLeft fontAndBackgroundColor">      
    <asp:TextBox ID="criterialtype_Left" runat="server" Height="14px" ></asp:TextBox>
    <asp:TextBox ID="metricId_Left" runat="server" Height="14px" ></asp:TextBox>
    <asp:TextBox ID="regionId_Left" runat="server" Height="14px" ></asp:TextBox>
    <asp:TextBox ID="yYYYRight_Left" runat="server" Height="14px" ></asp:TextBox>
    </td>
    <td class="CriteriaRight fontAndBackgroundColort">      
        <asp:TextBox ID="criterialtype_Right" runat="server" Height="14px" ></asp:TextBox>
        <asp:TextBox ID="metricId_Right" runat="server" Height="14px" ></asp:TextBox>
        <asp:TextBox ID="regionId_Right" runat="server" Height="14px" ></asp:TextBox>
        <asp:TextBox ID="yYYYRight_Right" runat="server" Height="14px" ></asp:TextBox>
    </td>
    <td class="CriteriaSide fontAndBackgroundColor">      
         <asp:TextBox ID="criterialtype_Side" runat="server" Height="14px"></asp:TextBox>
        <asp:TextBox ID="metricId_Side" runat="server" Height="14px" ></asp:TextBox>
        <asp:TextBox ID="regionId_Side" runat="server" Height="14px" ></asp:TextBox>
        <asp:TextBox ID="yYYYRight_Side" runat="server" Height="14px" ></asp:TextBox>
    </td>
    <td class="CriteriaGeneral fontAndBackgroundColor">      
            <asp:TextBox ID="criterialtype_General" runat="server" Height="14px" ></asp:TextBox>
            <asp:TextBox ID="metricId_General" runat="server" Height="14px" ></asp:TextBox>
            <asp:TextBox ID="regionId_General" runat="server" Height="14px" ></asp:TextBox>
            <asp:TextBox ID="yYYYRight_General" runat="server" Height="14px" ></asp:TextBox>
    </td>
    <td class="CriteriaDefault fontAndBackgroundColor">      
            <asp:TextBox ID="criterialtype_Default" runat="server" Height="14px" ></asp:TextBox>
            <asp:TextBox ID="metricId_Default" runat="server" Height="14px" ></asp:TextBox>
            <asp:TextBox ID="regionId_Default" runat="server" Height="14px" ></asp:TextBox>
            <asp:TextBox ID="yYYYRight_Default" runat="server" Height="14px" ></asp:TextBox>
        </td>
        </tr>
    </table>
    </form>

</body>
</html>

Open in new window

0
 
LVL 33

Author Comment

by:Mike Eghtebas
ID: 40207020
I think the problem is elsewhere, I tired this code. It is not working. I guess I need to enable js in my browser:

<script type="text/javascript">
    function init() {
        alert('Hello, World!')
    }
</script>

Open in new window


Mike
0
 
LVL 13

Expert Comment

by:duncanb7
ID: 40207021
try this
 onChange="javascript:updateYear();"
Duncan
0
 
LVL 13

Expert Comment

by:duncanb7
ID: 40207022
Supposed there is option select on each browser (FF/IE/Chrome) for javascript enable

Duncan
0
 
LVL 33

Author Comment

by:Mike Eghtebas
ID: 40207026
I have good and bad news.

Good news is that

onChange="javascript:updateYear();"

along with

<script type="text/javascript">
    function init() {
        alert('Hello, World 1!')
    }
    function updateYear() {
        alert('Hello, World 2!')
    }
</script>

updateYear() works. I also included           document.getElementsByClassName('spanYear')[0].innerHTML='2014 YTD'; in it, it updates the innerHtnl okay.

The bad news is that init() is not working.

Mike
0
 
LVL 13

Expert Comment

by:duncanb7
ID: 40207032
Where you call init() ? I did not see it. You can delete init() if it is not
useful.
0
 
LVL 33

Author Comment

by:Mike Eghtebas
ID: 40207038
Remember I wrote about:

1. When a page just loads.
2. When the year (via a DropList changes). Below is the droplist html.

the 2nd part you solved it by onChange="javascript:updateYear();" instruction.

But, the 1st part is to be handled by init().

Thank you for your help. I will close this question now. I will figure it out somehow why init() not working later.

Mike
0
 
LVL 33

Author Comment

by:Mike Eghtebas
ID: 40207042
I got it.

I needed to include

window.onload = init;

also in my <javascript> tag because it was not included in my body tag

<body onload="javascript:init();"

Mike
0
 
LVL 13

Expert Comment

by:duncanb7
ID: 40207064
Be Reminded, I put it into <body onload="javascript:init();"> in previous post that works
when page loading is finished, it will call init();
 If you don't need it, just delete it

Thanks for your points

Have a nice day

Duncan
0

Featured Post

How your wiki can always stay up-to-date

Quip doubles as a “living” wiki and a project management tool that evolves with your organization. As you finish projects in Quip, the work remains, easily accessible to all team members, new and old.
- Increase transparency
- Onboard new hires faster
- Access from mobile/offline

Join & Write a Comment

Suggested Solutions

Real-time is more about the business, not the technology. In day-to-day life, to make real-time decisions like buying or investing, business needs the latest information(e.g. Gold Rate/Stock Rate). Unlike traditional days, you need not wait for a fe…
This article discusses how to create an extensible mechanism for linked drop downs.
In this tutorial viewers will learn how add a scalable full-width header using CSS3. Create a new HTML document with an internal stylesheet. Set a tiled background.:  Create a new div and name it Header. Position it with position:absolute at the top…
The viewer will the learn the benefit of plain text editors and code an HTML5 based template for use in further tutorials.

708 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

19 Experts available now in Live!

Get 1:1 Help Now