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>
Related
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 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>
I have text box with datepicker and a custom validator under validation group meant for a Save button at the end of a web page. The problem is the javascrip function is being called on Save but not on this text box value change. What am I doing wrong?
Text Box:
<td valign="middle">
<asp:TextBox ID="txtPassingDate" runat="server" Width="106px" Text='<%# Bind("PassingDate") %>'></asp:TextBox>
<img style="width: 17px; height: 16px" id="IMG1" onclick="javascript:calendarPicker('ContentPlaceHolder1_txtPassingDate');"
alt="Select Date" src="../Images/show-calendar.gif" border="0" />
</td>
Validator:
<asp:CustomValidator runat="server" ID="valCusRangePassingDate" ValidationGroup="Save"
Display="Dynamic" ControlToValidate="txtPassingDate" ClientValidationFunction="CompareDateRange"
ErrorMessage="Only last three months reimbursement is allowed" ForeColor="Red"
Font-Bold="False"></asp:CustomValidator>
Note: There are other custom vlidator JS functions also associated with the same text box.
The Save button on which currently my JS is being called:
<asp:Button ID="Save" Text="Save" runat="server" OnClick="Save_Click" ValidationGroup="Save"
OnClientClick="return ConfirmSave()" />
You can use Client Side validation check in your TextBox value change event.
function textbox_change()
{
if(Page_ClientValidate('Save'))
{
//Your Code
}
else
{
//your code
}
}
Page_ClientValidate is function for validation from client side. you can pass your validation group as a parameter.
The problem is that your asp.net control does not see the change when your control is manipulated by the datepicker. Adding this code should solve your problem:
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" ></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/jquery-ui.min.js" ></script>
<script type="text/javascript">
$(document).ready(function () {
$('.datepicker').datepicker({
onSelect: function () {
this.fireEvent && this.fireEvent('onchange') || $(this).change();
}
});
});
</script>
<asp:TextBox ID="txtPassingDate" runat="server" Width="106px" CssClass="datepicker" Text='<%# Bind("PassingDate") %>'></asp:TextBox>
This will fire the onChange event of your control when the datepicker value is selected. This example is using the actual jQueryUI datepicker, which is probably much better and easier to use than the CalendarPicker you are using.
I am using jQuery confirmation box within my listView and the confirmation box displayed with the user clicks delete.
The problem that I am faced with, is that when the user clicks OK it, the lvAlbums_ItemDeleting event is not fired.
Below is the .aspx code:
<link href="jQuery/jquery-ui.css" rel="stylesheet" type="text/css" />
<link href="jQuery/jquery-ui-1.7.2.custom.css" rel="stylesheet" type="text/css" />
<script src="https://www.google.com/jsapi?key=" type="text/javascript"></script>
<script type="text/javascript">
google.load("jquery", "1");
google.load("jqueryui", "1");
</script>
<script type="text/javascript">
$().ready(function () {
$('#dialogContent').dialog({
autoOpen: false,
modal: true,
title: "MySql Membership Config Tool",
width: 300,
height: 250
});
});
function rowAction(uniqueID) {
$('#dialogContent').dialog('option', 'buttons',
{
"OK": function () { __doPostBack(uniqueID, ''); $(this).dialog("close"); },
"Cancel": function () { $(this).dialog("close"); }
});
$('#dialogContent').dialog('open');
return false;
}
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<div id="thumbs">
<asp:ListView ID="lvAlbums" runat="server" GroupItemCount="15" DataKeyNames="album_id">
<LayoutTemplate>
<table id="groupPlaceholderContainer" runat="server" border="0" cellpadding="0" cellspacing="0"
style="border-collapse: collapse; width: 100%;">
<tr id="groupPlaceholder" runat="server">
</tr>
</table>
</LayoutTemplate>
<GroupTemplate>
<tr id="itemPlaceholderContainer" runat="server">
<td id="itemPlaceholder" runat="server">
</td>
</tr>
</GroupTemplate>
<ItemTemplate>
<div>
<asp:Image ID="Image1" runat="server" ImageUrl='<%# "ThumbNail.ashx?ImURL=/uploads/"+Eval("photo_file_name") %>'
Width="130" Height="150" BorderStyle="None" />
<asp:Label ID="lblPhotoTitle" runat="server" Text='<%# Eval("album_name") %>' CssClass="photoTitle"></asp:Label>
<br />
<asp:Button ID="btnDeleteAlbum" runat="server" Text="Delete Album" Width="144px" OnClick="lvAlbums_ItemDeleting" OnClientClick="javascript:return rowAction(this.name);"
CommandName="Delete" />
</div>
</ItemTemplate>
</asp:ListView>
</div>
<div class="pager">
<asp:DataPager ID="DataPager1" runat="server" PagedControlID="lvAlbums" PageSize="12">
<Fields>
<asp:NextPreviousPagerField ShowFirstPageButton="true" ShowPreviousPageButton="true"
ShowLastPageButton="false" ShowNextPageButton="false" ButtonCssClass="first"
RenderNonBreakingSpacesBetweenControls="false" />
<asp:NumericPagerField CurrentPageLabelCssClass="current" NextPreviousButtonCssClass="next"
NumericButtonCssClass="numeric" ButtonCount="10" NextPageText=">" PreviousPageText="<"
RenderNonBreakingSpacesBetweenControls="false" />
<asp:NextPreviousPagerField ShowFirstPageButton="false" ShowPreviousPageButton="false"
ShowLastPageButton="true" ShowNextPageButton="true" ButtonCssClass="last" RenderNonBreakingSpacesBetweenControls="false" />
</Fields>
</asp:DataPager>
</div>
</div>
<div id="dialogContent">
<h3>confirm</h3>
<p>Click ok to accept</p>
</div>
</form>
</body>
Firebug throws the following error:
__doPostBack is not defined
[Break On This Error] "OK": function () { __doPostBa...ID, ''); $(this).dialog("close"); },
If anyone could provide a solution with the above, it would be greatly appreciated.
I have spent days looking at different jQuery confirmation box examples but this is the best I can do. Ideally I would want to be use http://jqueryui.com/demos/dialog/#modal-confirmation within gridviews, dataViews and ListViews but can't find examples which exactly provide steps to follow.
Thanks
Or you could use this:
protected void Page_PreRender(object sender, EventArgs e)
{
//If the page doesn't have a control that causes a postback, __doPostBack() won't be output
//as a function definition. One way to override this is to include this line in your Page_PreRender():
Page.ClientScript.GetPostBackEventReference(this, string.Empty);
//This function returns a string calling __doPostBack(); but also forces the page to output
//the __doPostBack() function definition.
}
<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);