Facing difficulty with javascript getelementbyid - c#

If some one have any suggestion or other way kindly help.
I have
1 Textbox
1 Label
1 LinkButton
when I'll click to lnk_NameEdit button txtUserName will visible and lblusername buttons must unvisible and the text in lable will display in TextBox
<td width="237" class="value_td" style="border: 0; border-top: 1px solid #afc0f3;">
<asp:Label ID="lblusername" runat="server" Text="Santosh"></asp:Label>
<asp:TextBox ID="txtUserName" runat="server" Width="300" Visible = "false">
</asp:TextBox>
</td>
<td width="64" class="epotions_td" style="border: 0; border-top: 1px solid #afc0f3;">
<span>
<asp:LinkButton ID="lnk_NameEdit" runat="server" CommandName="Edit" OnClientClick = 'ControlVisible();'>Edit</asp:LinkButton>
</span>|
</td>
<script language="javascript" type="text/javascript">
function ControlVisible() {
var lbl = document.getElementById("<%= lblusername.ClientID %>");
var txt = document.getElementById("<%= txtUserName.ClientID %>");
lbl.visible = false;
txt.visible = true;
}
</script>
<td width="237" class="value_td" style="border: 0; border-top: 1px solid #afc0f3;">
<asp:Label ID="lblusername" runat="server" Text="Santosh"></asp:Label>
<asp:TextBox ID="txtUserName" runat="server" Width="300" Visible = "false">
</asp:TextBox>
</td>
and I have 1 LinkButton
<td width="64" class="epotions_td" style="border: 0; border-top: 1px solid #afc0f3;">
<span>
<asp:LinkButton ID="lnk_NameEdit" runat="server" CommandName="Edit" OnClientClick = 'ControlVisible();'>Edit</asp:LinkButton>
</span>|
</td>
when I'll click to lnk_NameEdit button txtUserName will visible and lblusername buttons must unvisible and the text in lable will display in TextBox
<script language="javascript" type="text/javascript">
function ControlVisible() {
var lbl = document.getElementById("<%= lblusername.ClientID %>");
var txt = document.getElementById("<%= txtUserName.ClientID %>");
lbl.visible = false;
txt.visible = true;
}

try this,
lbl.style.visibility="visible";
txt.style.visibility="hidden";

Assuming the rest of the code is correct, lbl and txt will be dom elements. Dom elements do not have visible properties, but you can hide them by setting their styles' display properties:
lbl.style.display = "none";
EDIT
Make sure you run this code after your dom is ready. That you were getting null from document.getElementById probably means that you were running this script right in your head section. As a result, your dom had not yet been parsed, and your label and textbox didn't exist yet.
The easiest way to fix this is to put the script section at the very end of your body. Another way would be to call ControlVisible from your body's onload: <body onload="ControlVisible()">

There is a big difference between server executed code and client side code.
In the moment you have a mix.
You can set the visibility of an element in client side (javascript) setting the display property
http://www.w3schools.com/jsref/prop_style_display.asp
Take a look at this tutorial: http://www.javascriptkit.com/javatutors/dom3.shtml
You can change this piece og code from this:
lbl.visible = false;
txt.visible = true;
to this:
lbl.style.display= "none";
txt.style.display= "block";
If you are working with server side code (e.g Load event, asp. net button click, etc) you can use the visible property of your object.
Sample fiddle: http://jsfiddle.net/WzTSR/

Your Textbox with ID txtUserName has Visible = "false" which means it's not being sent to the browser - thus you get client side error.
Change this to:
<asp:TextBox ID="txtUserName" runat="server" Width="300" style="display: none;">
Which will still make it invisible by default, then change the lines to:
lbl.style.display = "none";
txt.style.display = "";

Related

Disable asp imagebutton

I am trying to get the image button in this table to get hidden via the code behind in C# (so that I can hide it after an action).
<asp:UpdatePanel runat="server" ID="upEmpListContainer" UpdateMode="Conditional"
OnPreRender="upEmpListContainer_PreRender" OnInit="upEmpListContainer_Oninit">
<ContentTemplate>
<asp:ListView ID="lvEmpList" OnItemDataBound="lvEmpList_ItemDataBound" OnDataBound="lvEmpList_DataBound"
OnLayoutCreated="lvEmpList_LayoutCreated" runat="server" OnPreRender="lvEmpList_PreRender">
<LayoutTemplate>
<table class="formData_tb" cellspacing="0" style="margin: 0px; width: 100%;">
<tr>
<th colspan="9" class="currentManagerLabel" style="text-align: center">
<span>Currently displaying
<asp:Label ID="lblManager" runat="server" />
employees </span>
<asp:ImageButton ID="DrillUp" AlternateText="Move up in reporting heirarchy" runat="server"
CommandName="DrillDown" ImageUrl="~/images/icoDoubleArrowUp.gif" OnCommand="butDrillDown_Click" />
</th>
</tr>
</table>
</LayoutTemplate>
</asp:ListView>
</ContentTemplate>
</asp:UpdatePanel>
I just can't seem to access it from its ID. I've tried DrillUp.Enabled = false; but Visual Studio is saying that it can't resolve symbol 'DrillUp'.
Your imagebutton is inside layout template, you cant access it directly.
Try this
ImageButton b = (ImageButton)lvEmpList.FindControl("DrillUp");
b.Visible = false;
In your code behind method lvEmpList_ItemDataBound, you need to use the following:
((e.Item.FindControl("DrillUp")) as ImageButton).Visible = false;
Also, you should add a check that this is done only for the DataItem items like this:
if (e.Item.ItemType == ListViewItemType.DataItem)
{
((e.Item.FindControl("DrillUp")) as ImageButton).Visible = false;
}
Try to:
1-remove that imagebutton from aspx
1-clean the solution
2- Write manually again that asp:imagebutton...
It will work fine

How to display DIV popup on Gridview row click event in asp.net

I am using a web page which contains a grid view with the list of datas in that. I want to display the selected grid view row details into a popup or dialogue window on row click event.For that I have created one DIV and design it with proper control values. But I am not able to display the DIV on row click event.
Here is my Source code:
<div id="divPopup" runat="server" style="border:1px solid black;display:none ">
<fieldset>
<legend>Disabling User Account</legend>
<table style="height: 112px; font-weight: 700; font-size: medium; font-family: Cambria; color: #000000; width: 316px">
<tr>
<td>
<asp:Label ID="lblGlobalId1" runat="server" Text="Global ID" />
</td>
<td>
</td>
<td>
<asp:Label ID="lblGlobalIdValue1" runat="server" Text="80007929" />
</td>
</tr>
.......
.......
<asp:Button ID="btnContinue1" runat="server" Height="26px" style="font-weight: 700"
Text="Continue" Width="92px" />
</table>
</fieldset>
</div>
.aspx Code is,
protected void grdADActionList_RowDataBound(object sender, GridViewRowEventArgs e)
{
foreach (GridViewRow gvr in grdADActionList.Rows)
{
e.Row.Attributes["onmouseover"] = "this.style.cursor='hand';this.style.background='#eeff00';";
e.Row.Attributes["onmouseout"] = "this.style.textDecoration='none';this.style.background='#ffffff';";
e.Row.Attributes["onclick"] = ClientScript.GetPostBackClientHyperlink(this.grdADActionList, "Select$" + e.Row.RowIndex);
}
}
protected void grdADActionList_SelectedIndexChanged(object sender, EventArgs e)
{
//lblGlobalIDValue.Text = "278900078";
//lblGivenNameValue.Text = "Surya";
//lblEmailValue.Text = "surya#abc.com";
divPopup.Visible = true;
}
On page load event I am disabling that DIV visibility and on SelectedIndexChanged event I am enabling the DIV control visibility but the DIV control could not appear on the page. Can you please let me know How can i display the DIV popup control on my page? also I want to display it on the page center.
Please suggest me about the problem and tell me the solution for the same.
Thanks.

Iframe autoresizing height from codebehind in C#

My html page is
<iframe runat="server" id="iframe1" width="100%" height="100%" scrolling="no" frameborder="0"></iframe>
.cs content in my pageload event
iframe1.Attributes["src"] = "http://default.com/";
//iframe1.Attributes["height"] = "100%";
//iframe1.Attributes["width"] = "100%";
iframe1.Attributes.Add("style","width:100%;height:100%;");
But its not working
i want to display whole page content but my height of iframe is not taking the height of http://default.com/
I don't know how to autoresize iframe on .cs page but It's another option like put your iframe in datalist control like...
<asp:DataList ID="dtlhtml" runat="server" Width="100%">
<ItemTemplate>
<table cellpadding="0" cellspacing="0" width="100%">
<tr>
<td>
<iframe src='<%#Eval("html") %>' width="713" id="iframe1"
frameborder="0" onLoad="autoResize 'iframe1');">
</iframe>
</td>
</tr>
</table>
</ItemTemplate>
</asp:DataList>
Put javascript code as...
<script language="JavaScript">
function autoResize(id)
{
var newheight;
var newwidth;
if (document.getElementById(id))
{
newheight = document.getElementById(id).contentWindow.document.body.scrollHeight;
newwidth = document.getElementById(id).contentWindow.document.body.scrollWidth;
}
document.getElementById(id).height = (newheight) + "px";
document.getElementById(id).width = (newwidth) + "px";
}
</script>
And put on .cs page.
DataTable dt1 = new DataTable();
dt1.Columns.Add("html");
DataRow dr = dt1.NewRow();
dr["html"] = "";//Any dynamic url path
dt1.Rows.Add(dr);
dtlhtml.DataSource = dt1;
dtlhtml.DataBind();
NOTE:
This will not work in local host ..please try it on online.
I assume you don't want 'scrolling', so why not disable it?
<iframe src="/default.asp" width="100%" height="100%" scrolling="no"></iframe>
or try
iframe1.Attributes.Add("scrolling","no");
Edit: Try
PlaceHolder1.Controls.Add(new LiteralControl("<iframe src='mypage.aspx' width='100%' height='100%' scrolling='no'></iframe>"));
or
iframe1.Attributes["src"] = "http://www.asp.net";
Since you are using runat="server" so you can access the attributes like height and width from code behind.
Try
Updated Answer
iFrame1.Attributes.Add("height","100%");
iFrame1.Attributes.Add("width","100%");
set scrolling ="no" inside tag as suggested by Paul

Finding Div present inside the data list on runtime

I need to find the div which belongs my current clicked Link button from the code behind file in c#. Then i need to apply the class for that div. So far i tried to access by html table cell. But i cant able to access my div. So please any valuable suggestion to find the div?
<asp:DataList ID="DataList1" runat="server" OnItemCommand="DataList1_ItemCommand" style="width:100%">
<ItemTemplate>
<div runat="server" id="DivContent" style="padding-top: 25px; height: 65px;" align="center"
onmouseover="this.className='MsgClick'" onmouseout="this.className=''" >
<asp:LinkButton ID="LinkButton2" runat="server" Text='<%# Eval("UserName") %>' CommandName="show"
class="InnerMenuFont"></asp:LinkButton>
<asp:Label ID="Label1" runat="server" Text='<%# Eval("AdminId") %>' Visible="False"></asp:Label>
<br />
</div>
<hr style="width: 80%" />
</ItemTemplate>
</asp:DataList>
In the above code i need to access the current div in the id "DivContent"
.MsgClick
{
background-image: url('Images/AdminHighlight.png');
background-repeat: no-repeat;
vertical-align: top;
margin-right: -38px;
padding-right: 30px;
}
above code is my class file.
use below code
Control objDiv = e.Item.FindControl("DivContent");
hope it will help you
Might be wrong, but I don't believe it's possible to access a div from code behind if the div is part of a data bound control (DataList, GridView, etc), even if you have runat="server" set.
You can however swap the div for asp:Panel - which renders as a div when the page is served up to the browser. e.g.
<asp:Panel ID="DivContent" runat="server">
div content... LinkButton, Label etc...
</asp:Panel>
When the LinkButton is clicked, you can find the asp:Panel in your code behind using the item index of the DataList to which the LinkButton belongs:
LinkButton OnClick event:
protected void LinkButton2_Click(object sender, EventArgs e)
{
// Get the Link Button which has been clicked.
LinkButton btn = (LinkButton)sender;
// Get the DataListItem in the DataList which contains the LinkButton which was clicked.
DataListItem listItem = (DataListItem)btn.NamingContainer;
// Get the ItemIndex of the DataListItem.
int itemIndex = listItem.ItemIndex;
// Find the asp:Panel in the DataListItem of the DataList (e.g. DataList1).
Panel currentPanel = (Panel)DataList1.Items[itemIndex].FindControl("DivContent");
}
You should then hopefully be able to change style settings form code behind.
You could possibly use the CssClass property to change what you need:
...
Panel currentPanel = (Panel)DataList1.Items[itemIndex].FindControl("DivContent");
currentPanel.CssClass = "NewClassName";
Just did this myself good sir. There is a much simpler solution!
From your c# code behind, a div would be refereed to as type HtmlGenericControl.
You will need to add a onitemdatabound="DataList1_ItemDataBound" to your DataList control markup.
Inside your itemdatabound event you can modify the div.
protected void DataList1_ItemDataBound(object sender, DataListItemEventArgs e)
{
// Find the div control as htmlgenericcontrol type, if found apply style
System.Web.UI.HtmlControls.HtmlGenericControl div = (System.Web.UI.HtmlControls.HtmlGenericControl)e.Item.FindControl("DivContent");
if(div != null)
div.Style.Add("border-color", "Red");
}

How can i make a disabled control back to enable using Javascript

I have done a code to disable a control when user clicks on a control. On my form i am having a TextBox and a DropDown. When user clicks on a TextBox i will disable the DropDown like that when click on DropDown i will disable the TextBox which works fine.
But when the user clicks on Disabled control i would like to enable that control. Means if i click on TextBox which was disabled i would like to Enable it like that for dropdown too..
My sample Script is as follows
<script type="text/javascript">
function toggleDropDownList1()
{
var d=document.getElementById("<%= DropDownList4.ClientID %>");
if(d.disabled)
{
d.disabled=false;
}
else
{
document.getElementById("<%= TextBox1.ClientID %>").disabled = true;
}
}
function toggleDropDownList2()
{
document.getElementById("<%= DropDownList4.ClientID %>").disabled = true;
}
</script>
Design
<asp:TextBox ID="TextBox1" runat="server" onclick="toggleDropDownList2();"></asp:TextBox>
<asp:DropDownList ID="DropDownList4" runat="server" onclick="toggleDropDownList1();">
<asp:ListItem Text="One" Value="1"></asp:ListItem>
<asp:ListItem Text="One" Value="1"></asp:ListItem>
</asp:DropDownList>
Apparently Firefox, and perhaps other browsers, disable DOM events on form fields that are disabled, and any event that starts at the disabled form field is completely canceled and does not propagate up the DOM tree.
So, if you want to achieve something like that, you will probably have to do it with a workaround.
Instead of actually disabling the field try to style the fields to look as if they are disabled, that way you can still capture the click event.
The idea is to place a div in front of dropdown list, and this div accept the onclick event.
The issue here is that the div can not place so easy in front of dropdown list. To place it you need to do that dynamically and use the absolut position.
I make here a small code, and test it and working. I have left the background color RED on div to see where it is. Some details I left it to you, eg to find the width and height of your control list, I place the onclick, you can place back the double click, And just remove the red background.
<script type="text/javascript">
function toggleDropDownList1()
{
var MyDiv = document.getElementById("DivForClick");
MyDiv.style.display = "none";
var d=document.getElementById("<%= DropDownList4.ClientID %>");
if(d.disabled)
{
d.disabled=false;
}
else
{
document.getElementById("<%= TextBox1.ClientID %>").disabled = true;
}
}
function toggleDropDownList2()
{
document.getElementById("<%= DropDownList4.ClientID %>").disabled = true;
var MyDdl = document.getElementById("<%= DropDownList4.ClientID %>");
var MyDiv = document.getElementById("DivForClick");
MyDiv.style.display = "block";
MyDiv.style.left = MyDdl.style.left;
MyDiv.style.top = MyDdl.style.top;
// need to find the height/width
// MyDiv.style.height = MyDdl.style.height;
// MyDiv.style.width = MyDdl.style.width;
}
</script>
and the asp code.
<asp:TextBox ID="TextBox1" runat="server" onclick="toggleDropDownList2();"></asp:TextBox>
<br /><br />
<div id="DivForClick" onclick="toggleDropDownList1();" style="z-index:999;position:absolute;left:0;top:0;height:20px;width:40px;background-color:Red;display:none;">
</div>
<asp:DropDownList ID="DropDownList4" runat="server" onclick="toggleDropDownList1();" style="z-index:2;">
<asp:ListItem Text="One" Value="1"></asp:ListItem>
<asp:ListItem Text="Two" Value="2"></asp:ListItem>
</asp:DropDownList>
Do you mean
function toggleIt() {
var d=document.getElementById("<%= DropDownList4.ClientID %>");
var t =document.getElementById("<%= TextBox1.ClientID %>");
d.disabled=!d.disabled
t.disabled=!t.disabled
}
<asp:TextBox ID="TextBox1" runat="server" onclick="toggleIt();"></asp:TextBox>
<asp:DropDownList ID="DropDownList4" runat="server" disabled="disabled" onclick="toggleIt();">
<asp:ListItem Text="One" Value="1"></asp:ListItem>
<asp:ListItem Text="One" Value="1"></asp:ListItem>
</asp:DropDownList>

Categories