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>
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.
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.
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>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="server">
<script type="text/javascript">
function Test1(w) {
document.getElementById('<%=TextBox1.ClientID%>').style.width = w;
return false;
}
Test1(10); // This line arises an error. Why ?
</script>
<asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
<input id="Button1" type="button" value="button" onclick="Test1(10)" />
</asp:Content>
I get error when the function Test1(10) is called from the script. But when it called on the click of button, it works fine. How can I call the function from the script(OR how I can access the onload() function in an ASP.NET Content Page)?
When your call to "Test1()" inside the <script> block happens, that input field is not yet part of the DOM. Thus the call to getElementById() will return null and the first line of the function will fail.
If you move the <script> block to after the text box, it should work.
edit — also you may want to explicitly append "px" to your width.
try this
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="server">
<script type="text/javascript">
function Test1(w) {
document.getElementById('<%=TextBox1.ClientID%>').style.width = w;
return false;
}
window.onload = function() {
Test1(10); // This line arises an error. Why ?
}
</script>
<asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
<input id="Button1" type="button" value="button" onclick="Test1(10)" />
</asp:Content>
It's because the textbox doesn't exist when you execute Test1 in the script. You either have to place the call in a document.ready function or move it further down the page, after the textbox.
First of all you every time you want to execute javascript code, even directly from the tag ether from events you have to wait to load the dom level.
So can do something like :
<script type="text/javascript">
window.onload =function()
{ /* code */ }
</script>
Or execute your code in the "onload" event of the body tag:
like
<body onload="Test1(10);">
</body>
Or if you use JQuery you can use the above :
<script type="text/javascript">
$(document).ready(function(){
/* Code to execute */
});
</script>
<asp:Content ID="BodyContent" runat="server" ContentPlaceHolderID="MainContent">
<script type="text/javascript">
function Incrementer()
{
debugger;
var txtBox = document.getElementById('ctl00_MainContent_TextBox1').value;
alert(txtBox);
}
</script>
<asp:TextBox ID="TextBox1" runat="server" Text="0"></asp:TextBox><br />
<asp:Button ID="Button1" runat="server" Text="Up" OnClientClick="Incrementer();"/>
<asp:Button ID="Button2" Text="Down" runat="server"/>
</asp:Content>
I am unable to capture the textbox in JavaScript. What is the problem?
I've re tagged this ASP.net as well because it's quite specific to this problem.
When an ASP.net textbox control is rendered on a page it is assigned a dynamic ID that can change. There is a property for controls, ClientID that provides you with the controls assigned ID so you can use it in your scripts.
Use as follows:
<script type="text/javascript">
function Incrementer()
{
debugger;
var txtBox = document.getElementById('<%=TextBox1.ClientID%>').value;
alert(txtBox);
}
</script>
Try this
var txtBox = document.getElementById('<%=TextBox1.ClientID%>').value;
alert(txtBox);