I have an <asp:Panel> that is hidden with css display: none; and I'd like to show the panel when I have an error. Setting the style to 'block' in the javascript isn't working.
document.getElementById('<%= UxErrorPanel.ClientID %>').style.display = 'block';
<asp:Panel CssClass="alert alert-danger hidden" ID="UxErrorPanel" runat="server">
<asp:Label runat="server" ID="UxLabelErrorHeader" Text="Unable to connect to the Stripe payment provider"></asp:Label>
<br />
<asp:Label runat="server" ID="UxLabelErrorMessage"></asp:Label>
</asp:Panel>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script type="text/javascript">
function HidePanel() {
document.getElementById('<%= pnlMain.ClientID %>').style.display = 'block';
}
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:Button ID="btnPushMe" runat="server" OnClientClick="HidePanel(); return false;" Text="Push Me" />
<asp:Panel ID="pnlMain" runat="server" style="display: none;">
<label>Going to be hidden, soon.</label>
</asp:Panel>
</div>
</form>
</body>
</html>
This was me just playing around. But I think you can take this HTML/JS and get your own solution.
Edit: To add some more context with the change... I've had similar issues with CSS classes hiding an element via visibility attribute rather than display, which is why I set the style="display: none;" on the Panel. Note, IntelliSense might try to tell you this is not an attribute you can set, but just ignore that. ASP controls can be a pain, sometimes.
If you're using jQuery, you can just use .toggle() or. fadeToggle() for some extra animations.
Related
I have a textbox in my asp.net that accepts different values, I wrote a script that every time I press F5 button,the values in textboxes be cleaned.When I run the code and press F5,the textboxes values exist. How can I solve this?
<%# Page Language="C#" AutoEventWireup="true" CodeBehind="default.aspx.cs" Inherits="wellDesigned0428._default" %>
<!DOCTYPE html>
<script runat="server"></script>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<link href="~/StyleSheet1.css" rel="stylesheet" type="text/css" media="screen" />
</head>
<body>
<form id="form1" runat="server">
<div class="body">
<div class="content ">
<asp:TextBox ID="txtCodePers" runat="server" CssClass="textbox" AutoPostBack="True" OnTextChanged="txtCodePers_TextChanged" MaxLength="4" ></asp:TextBox>
<asp:TextBox ID="txtName" runat="server" CssClass="textbox"></asp:TextBox>
</div>
</form>
<script type="text/javascript">
document.onkeydown = fkey;
document.onkeyup = fkey;
document.onkeypress = fkey;
function fkey(e) {
if (e.keyCode == 116) {
alert("f5 pressed");
document.getElementById("txtCodePers").value = "";
document.getElementById("txtName").value = "";
}
}
</script>
</body>
</html>
I think the issue is the id that you are using txtCodePers, it's the id from server side. Either set the clientid or check what is the id for the txtCodePers using vew source.
More than this, I would not recommend you to override the default behavior of f5 which is refresh. What if user users mouse? or uses the browser button for refresh.
The ClientID of your TextBox is not the same as given in the ID-property. So your javascript will not find the elements.
You can either use the ClientID in your script or in your simple case add the ClientIDMode-property to your textboxes:
ClientIDMode="Static"
This will result in the same ClientID as your ID and you don't have to change your javascript.
Any one please tell me how to set the value of textbox.
function moreFieldsEditFunction(ExtraFname, ExtraFvalue) {
document.getElementById('<%= TextBox1.ClientID %>').value =ExtraFvalue;
}
<asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
It is not working
I don't think that you are a million milles off to be honest, I have taken your code and put it into a web form with a button that can be clicked to call the function and it works, without seeing your mark up it will be difficult to diagnose but it should look something like this:
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<script type="text/javascript">
function moreFieldsEditFunction(ExtraFname, ExtraFvalue) {
document.getElementById('<%= TextBox1.ClientID %>').value = ExtraFvalue;
}
</script>
</head>
<body>
<form id="form1" runat="server">
<input type="button" onclick="moreFieldsEditFunction('TEST', 'TEST2')" value="Click Me" />
<asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
</form>
</body>
</html>
This should work.
i am working on a webpage ,on that i have some fields and through that want to generate balloon popup on hover.The build is getting successful but the balloon popup is not visible at run time please help.
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Untitled Page</title>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:ScriptManager ID="ScriptManager2" runat="server">
</asp:ScriptManager>
<table><tr><td>First Name:</td><td><asp:TextBox ID="txtfirst" runat="server"></asp:TextBox></td></tr>
<tr><td>Middle Name:</td><td><asp:TextBox ID="txtmiddlename" runat="server"></asp:TextBox></td></tr>
<tr><td>Last Name:</td><td><asp:TextBox ID="txtlast" runat="server"></asp:TextBox></td></tr>
</table>
<cc1:BalloonPopupExtender ID="BalloonPopupExtender1" runat="server" TargetControlID="txtfirst" BalloonPopupControlID="pan1" BalloonSize="Medium" BalloonStyle="Rectangle" DisplayOnMouseOver="true" UseShadow="true">
</cc1:BalloonPopupExtender>
<cc1:BalloonPopupExtender ID="BalloonPopupExtender2" runat="server" TargetControlID="txtmiddlename" BalloonPopupControlID="pan2" BalloonSize="Small" BalloonStyle="Cloud" DisplayOnMouseOver="true" >
</cc1:BalloonPopupExtender>
<cc1:BalloonPopupExtender ID="BalloonPopupExtender3" runat="server" TargetControlID="txtlast" BalloonPopupControlID="pan3" UseShadow="true" DisplayOnFocus="true" CustomClassName="oval" CustomCssUrl="~/CSS/Custom.css">
</cc1:BalloonPopupExtender>
<asp:Panel ID="pan1" runat="server">
Enter your First Name
</asp:Panel>
<asp:Panel ID="pan2" runat="server">
Enter your Middle Name
</asp:Panel>
<asp:Panel ID="pan3" runat="server">
Enter your Last Name
</asp:Panel>
</div>
</form>
</body>
</html>
From looking at the HTML code, it looks like you are missing a tag that allow you to use the balloon stuff.
include the following after the form tag;
<ajax:ToolkitScriptManager ID="toolkit1" runat="server"></ajax:ToolkitScriptManager>.
I am not familiar with the library you are using but this link may help if the above doesn't work.
http://www.codeproject.com/Questions/409451/how-to-use-balloonpopupextender-ajax
i have the following code:
<asp:Content ID="Content1" ContentPlaceHolderID="ContentPlaceHolder1" runat="Server">
<script src="Js/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$("#propertyimage").mouseover(function () {
$("#lnkedit").hide();
});
$("#propertyimage").mouseout(function () {
$("#lnkedit").show();
});
});
</script>
<div class="ddldemo">
<asp:Repeater ID="rptproperty" runat="server">
<ItemTemplate>
<div style="width: 165px;">
<asp:Image ID="propertyimage" runat="server" ImageUrl='<%#Eval("image1") %>'" />
<asp:LinkButton runat="server" ID="lnkedit" Text="Edit"></asp:LinkButton>
</div>
</ItemTemplate>
</asp:Repeater>
</div>
</asp:Content>
all code is in content place holder
when i take mouse over to the image button is not hide/show .
how can i solve this?
The issue is your element doesn't have an ID. The ID attribute in your code is the server side ASP.NET ID, it's not the HTML ID attribute. For the client side ID use ClientID:
<asp:Image ID="propertyimage" ClientID="propertyimage" runat="server" ImageUrl='<%#Eval("image1") %>'" />
Same with your LinkButton:
<asp:LinkButton runat="server" ID="lnkedit" ClientID="lnkedit" Text="Edit"></asp:LinkButton>
When debugging code like this, remember to view the source in the browser, to see the actual HTML that the browser is receiving.
If you have multiple of these, then a fixed ID is not going to work but it must be unique. In that case, you will need to use something else such as a class, but you'll also need to add logic to get the button relative to the image.
You can't do that when you have controls in an ItemTemplate. The unique client id of the control is not going to be #propertyimage. It can't be since you could have multiple user controls with the same button name. ASP.Net will generate a unique id that is relevant to the control tree. In this case getting the clientid is not going to work since you are in a repeater control and you can't hav emultiple controls with the same client id.
You can do this with classes though. Here is an example I put together on jsFiddle. It uses a class to identify the repeater, then uses the jquery next() method to select the next anchor element and show/hide it. Try altering your code like so:
<script src="Js/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$(".propertyImage").mouseover(function () {
$(this).next("a").hide();
});
$(".propertyImage").mouseout(function () {
$(this).next("a").show();
});
});
</script>
<div class="ddldemo">
<asp:Repeater ID="rptproperty" runat="server">
<ItemTemplate>
<div style="width: 165px;">
<asp:Image ID="propertyimage" class="propertyImage" runat="server" ImageUrl='<%#Eval("image1") %>'" />
<asp:LinkButton runat="server" ID="lnkedit" Text="Edit"></asp:LinkButton>
</div>
</ItemTemplate>
</asp:Repeater>
</div>
Be careful, I don't know much about ASP, but I see "template" and "repeater"? So there seems to be a good chance for you to create several inputs with the same ID.
Try this :
<script src="Js/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$("#propertyimage").mouseover(function () {
$(this).next().hide();
});
$("#propertyimage").mouseout(function () {
$(this).next().show();
});
});
</script>
<div class="ddldemo">
<asp:Repeater ID="rptproperty" runat="server">
<ItemTemplate>
<div style="width: 165px;">
<asp:Image class="propertyimage" runat="server" ImageUrl='<%#Eval("image1") %>'" />
<asp:LinkButton runat="server" class="lnkedit" Text="Edit"></asp:LinkButton>
</div>
</ItemTemplate>
</asp:Repeater>
</div>
I want to increased height of panel in div click.
<script language="javascript" type="text/javascript">
function getheight(this)
{
document.getElementById('Panel1').style.height="200px";
}
</script>
<div id="flip" onclick="getheight(this)"><div>
<div>
<asp:Panel ID="Panel1" runat="server" BorderStyle="Dotted" Height="50px" Width="125px" ScrollBars="Horizontal">
</asp:Panel>
</div>
this is a server side control , so you won't find an element with ID ='Panel1'.
if you view source the generated html of this page you will find the real ID use it in the
document.getElementById function
you can use document.getElementById('<%=Panel1.ClientID %>'); to automatically insert the
correct ID in your script
Try this..
<script language="javascript" type="text/javascript">
function getheight(this)
{
document.getElementById('Panel1').setAttribute("style", "height:200px;");
}
</script>
Since this is a Server Side control, you need to set the ClientIDMode = "Static" to prevent .NET from assigning a generated one.
<script language="javascript" type="text/javascript">
function getheight(this)
{
document.getElementById('Panel1').style.height="200px";
}
</script>
<div id="flip" onclick="getheight(this)">
<asp:Panel ID="Panel1" runat="server" BorderStyle="Dotted"
Height="50px" Width="125px" ScrollBars="Horizontal" ClientIDMode="Static" />
</div>