Solved

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

Posted on 2014-07-19
19
288 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
Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

 
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

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Title # Comments Views Activity
Greetings C# program 17 69
Javascript to allow login/password authorization 4 31
is this a cms? 8 36
Get the number of current month days 2 11
This article describes how to create custom column layout styles for Bootstrap. The article uses 5 columns to illustrate the concept, but the principle can be extended to any number of columns.
This article discusses how to create an extensible mechanism for linked drop downs.
In this tutorial viewers will learn how to position overlapping items using z-index in CSS. They will also learn the restrictions on the z-index property.  Create a new HTML document with an internal stylesheet.: Create a div in CSS and name it Red.…
In this tutorial viewers will learn how to embed an audio file in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: : The declaration should display (CODE) HTML5 is supported by the most recent versions of all major browsers…

863 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

24 Experts available now in Live!

Get 1:1 Help Now