In my user control i have below controls :
.ascx Page:
<div id="div1" runat="server">
<asp:Label ID="Lblname" Text="Name" runat="server"></asp:Label>
</div>
<div id="div2" runat="server">
<asp:TextBox ID="txtvalue" runat="server"></asp:TextBox>
</div>
<div id="div3" runat="server">
<asp:Button ID="btnClick" runat="server" Text="Click" />
</div>
aspx page
How to hide div1, div2 & div3 using c# or javascript
There is no need of javascript. You can easily put an
id="YourId" and runat="server". You can also add a Visible=False as default (or the other way if you want it to be visible as default). In .cs page, you can define and change the Visible value as you wish. So let's say you want it visible as a default only for administrator users, and you check in database if the user is an administrator with a true/false value (a bit value). then in PageLoad() you can perform a check like this:
if(LoggedUser.IsAdmin==true)
{
div1.Visible=true;
}
else
{
div1.Visible=false;
}
A C# implementation
You should be able to reference your divs by their IDs in the codebehind since you have runat set to server.
So, assuming you want this to occur on the page loading, to your Page_Load event, add:
div2.Visible = false;
You page renders html from your user controls as well as from master pages.
If you want to hide your elements then simply use this
$("#YouHTMLElement").attr("style","display:none");
One important thing: you need to specify clientidmode="static" on your divs because IDs of server controls changes when your html renders.
Updated: In C#, you need to do this
div1.Style.Add("display", "none");
Related
I have a problem, and looking for a solution for 2 days
Target : Create/edit client... in HTML build a dialog with and asp fields with clientIDMode static
<div id="divDialog" runat="server" clientidmode="Static" style="display: none;">
<div class="DialogFields">
<asp:Label ID="Label1" runat="server" Text="Firstname"></asp:Label>
<br />
<asp:TextBox ID="tbxFirstName" runat="server" ClientIDMode="Static"></asp:TextBox>
</div>
...
In script
$("#btnShowDialog").click(function () {
openDialog();
});
function openDialog() {
$("#divDialog").dialog('open');
$("#divDialog").parent().appendTo($("form:first"));
}
When I click the button btnShowDialog it works fine... But
Beneath it I have a gridview within it a edit button (asp:Linkbutton) with a event to the codebehind it looks like:
<asp:TemplateField>
<ItemTemplate>
<asp:LinkButton ID="Edit" OnCommand="Edit_Click" CommandArgument='<%#Eval("RelationID") %>'
runat="server"><img src="../images/Edit-item.png" alt="Edit" /></asp:LinkButton>
</ItemTemplate>
</asp:TemplateField>
In codebehind take the parameter from commandargument and fire LoadInfo (specific data to all the fields in de dialog).
LoadInfo(e.CommandArgument != null ? int.Parse(e.CommandArgument.ToString()) : -1);
but no way I get the dialog open.
I tried
ClientScript.RegisterStartupScript(this.GetType(), "Popup", "openDialog();", true);
and
ScriptManager.RegisterStartupScript(this.Page, this.GetType(), "script", "openDialog();", true);
after this LoadInfo, push btnShowDialog button and it opens the dialog and all data perfect in place.
Also tried the other way around as Directly to Jquery function, get all data loaded and open the dialog. 2 problems, loading in codebehind was not even started before the dialog opens. and I only can get a static function in the codebehind.
A lot of ground to cover for me, but can any body help me out (even for a part).
...Thanx
If I understand your question correctly, you are trying to fire some client scripts (openDialog) from the server side, but they wont fire?
Try placing your page in an update panel, lets assume that we name the update panel "MyUpdatePanel". And then refer to the update panel like this:
ScriptManager.RegisterStartupScript(MyUpdatePanel, MyUpdatePanel.GetType(), "MyUpdatePanelScript", "openDialog();", true);
I have a situation where i am performing some server action the click of the checkbox and then redirecting the user to another page. But the problem is, After i click the checkbox, it is taking time to redirect as it is slightly slow and hence the users are able to click on other checkboxes. I want to either disable the whole page or disable all the Check boxes. I wrote a javascript but it gets triggered only when the page is loaded again.
My Html :
<div>
<asp:CheckBox ID="checkbox1" runat="server" OnCheckedChanged="checkbox1_CheckedChanged" AutoPostBack="true" CssClass="chk-facet-checkbox"/>
<asp:CheckBox ID="checkbox2" runat="server" OnCheckedChanged="checkbox2_CheckedChanged" AutoPostBack="true" CssClass="chk-facet-checkbox"/>
<asp:CheckBox ID="checkbox3" runat="server" OnCheckedChanged="checkbox3_CheckedChanged" AutoPostBack="true" CssClass="chk-facet-checkbox"/>
</div>
<div id='blockerdiv'>
</div>
My Jquery :
if ($(".chk-facet-checkbox").is(":checked")) {
$('.blockerdiv').show();
//Code to show the 'blockerdiv' as an overlay blocking the whole page
// All we need to do is show the blockerdiv. There is already Code to take care of the overlay
}
Try adding:
$(".chk-facet-checkbox").attr("disabled", true);
and so:
if ($(".chk-facet-checkbox").is(":checked")) {
$('.blockerdiv').show();
//Code to show the 'blockerdiv' as an overlay blocking the whole page
// All we need to do is show the blockerdiv. There is already Code to take care of the overlay
$(".chk-facet-checkbox").attr("disabled", true);
}
This disables all checkbox inputs with that class.
You can Use jquery.blockui.js
Then simply use $.blockUI and $.unblockUI functions to block and unblock the UI according to your need.
in my asp.net application I have a page That has two iframes. Above these frames are a few link buttons. When these buttons are hit, they should change the src of the two iframes. Listed below is the client side code and javascript I am using to do this. The issue is when any of these buttons are hit, instead of just changing the src of one of the iframes, the whole page refreshes. (i can tell this is refreshing because the link buttons are not available till you log in on the first page shown in the main frame, after you log in the buttons become visible via a call to the parent - window.parent.loginSuccess() ). If one of them is then clicked, it sends you back to the log in page in the iframe and the buttons are are no longer visible.) Here is the code, does anyone see why this is happening? Thank you for your help.
<body id="bodysty">
<div id="fstyle" class="daform">
<form id="form1" runat="server">
<div id="master">
<div id="topthing"> <asp:LinkButton ID="lbtnControlPanel" onclientclick="CPhit()" runat="server" style="display:none">Control Panel</asp:LinkButton> <asp:LinkButton ID="lbtnAddClient" runat="server" onclientclick="AddClientHit()" style="display:none">Add Client</asp:LinkButton> <asp:LinkButton ID="lbtnManageClients" runat="server" onclientclick="ManageClientsHit()" style="display:none">Manage Clients</asp:LinkButton> <asp:LinkButton ID="lbtnAdmin" runat="server" onclientclick="ManageClientsHit()" style="display:none">Admin Options</asp:LinkButton></div>
<div id="leftcontrol">
<iframe id="LeftIframe" runat="server" ></iframe>
</div>
<div id="mainbodyform">
<iframe id="ContentIframe" runat="server" src="Login.aspx" class="mainiframe" ></iframe>
</div>
</div>
</form>
</div>
</body>
</html>
<script language="javascript">
function CPhit() {
document.getElementById("ContentIframe").src = "LoginNotes.aspx";
}
function AddClientHit() {
document.getElementById("ContentIframe").src = "NewCustomer.aspx";
}
function loginSuccess() {
document.getElementById('lbtnControlPanel').style.display = 'inherit'
document.getElementById('lbtnAddClient').style.display = 'inherit'
document.getElementById('lbtnManageClients').style.display = 'inherit'
document.getElementById('lbtnAdmin').style.display = 'inherit'
}
</script>
There is no code in the codebehind that deals with this page, its simply for navigation. Any ideas? Thank you for your help.
You need to cancel the default click action of the item you are clicking on.
Simple way is to return false on the click event.
onclientclick="CPhit(); return false;"
better way is preventDefault()
It might be related to the behaviour of the button Try
event.stopPropagation() or window.event.cancelBubble = true
in your JS functions
I have a hidden field in a User Control. At run time I assign the hidden fields ClientId to an anchor tag like this:
aClickSort1.HRef = string.Format("javascript:SortImage({0},{1});", divArrowUp1.ClientID, hiddenSort1.ClientID);
The thing is that when I try to get the hidden fields ClientId in client side code, it is undefined.
How can access it on the client side code?
Ps. The HiddenField is in a usercontrol
Regards Örvar
When you set Visible="false" to server side control, it will not be sent at all to the client.
Instead, set style="display: none;" or even better via CSS then it will be sent to the browser and still be hidden.
It seems that the reason is the non-visible container. If you have something like:
<asp:panel id="panel1" runat="server" Visible="false">
<asp:hiddenfield id="hiddenfield1 runat="server" value="123"/>
</asp:panel>
You cannot access the stuff in panel1 as things are not rendered for server side controls with visible="false" attribute.
You can set it into a div with style="display:none;" or just leave hiddenfield outside the non-visible container as it is not visible anyway.
You need to set hiddenSort1's ClientIdMode to Static.
Like this:
<asp:HiddenField ID="hiddenSort1" runat="server" ClientIDMode="Static" />
From javascript:
var hiddenSort1 = document.getElementById('hiddenSort1');
Correct me if I am wrong, but isn´t the Id generated and if you have the hidden field in a user control it will get the Id of:
myUserControlName$myHiddenFieldId
?
Hello all gurus in the area of ASP.NET AJAX and JavaScript!
Here's the deal: I have a user control (ascx) that currently contains a help Button and a ModalPopupExtender showing a Panel. The idea is that the user clicks the button and the help info is presented in a modal popup on top of the page, with another button to close it.
The help info can very well be larger than the window, so I have to resize the modal popup on show. When the control is coded as below, the Panel is resized initially, however; if the parent page has a validation error and is resent to the client, the javascript on top never executes.
Here's the control markup:
<script type="text/javascript">
// Adjust for popup y = 130 and a small gap.
var myAdjustedHeight = getPageHeight() - 150;
if (document.getElementById('<% =pnlPopUp.ClientID %>')) {
document.getElementById('<% =pnlPopUp.ClientID %>').style.height = myAdjustedHeight;
document.getElementById('<% =pnlScroll.ClientID %>').style.height = myAdjustedHeight - 20;
}
</script>
<asp:button id="btnHelp" runat="server" text="Help" />
<asp:updatepanel id="upPopUp" runat="server">
<contenttemplate>
<asp:panel id="pnlPopUp" runat="server" width="600">
<div class="header" style="float: left;">
Help
</div>
<asp:button id="btnClose" runat="server" text="Close" style="float: right; padding-bottom: 3px;" />
<asp:panel id="pnlScroll" runat="server" scrollbars="Vertical" style="clear: both;">
<asp:gridview id="grv" runat="server" autogeneratecolumns="true" showheader="false" gridlines="None" cellspacing="2" cellpadding="2">
</asp:gridview>
</asp:panel>
</asp:panel>
</contenttemplate>
</asp:updatepanel>
<ajaxtoolkit:modalpopupextender id="popUpExtender"
runat="server" backgroundcssclass="modalBackground" okcontrolid="btnClose"
targetcontrolid="btnHelp" popupcontrolid="pnlPopUp" x="100" y="130" />
(The GridView is filled with data in the Page_Load using a predefined DataSet in a basic fashion.)
I have tried to add this:
function pageLoad() {
document.getElementById('<% =popUpExtender.ClientID %>').add_shown(adjustHeight);
}
(where adjustHeight() is a function containing the code from the top) but when it fires I get null back for the ModalPopupExtender - and indeed it never seems to be included into the markup sent down the wire.
BTW, I need to add at least two instances of this help button to present help info for several elements on the page. Hence, I can't use the BehaviorID property of the ModalPopupExtender, since it is piped straight out to the page and I get an id collision.
So, how do I fix this? Am I to move the ModalPopupExtender to the Page or can I solve this within the ascx control?
If anyone has an idea on how to fix this, I would appreciate it.
Use this in your pageLoad:
$find('<% =popUpExtender.ClientID %>');
add_shown wouldn't exist for the HTML element, which document.getElementById returns.