Menu
I want to hide a button control inside a FormView trough JQuery.
The form section is defined in this way:
<body>
<div id="main">
<form id="_frmMain" runat="server">
<div id="contenitore">
<asp:FormView
ID="_fvMain"
runat="server"
DefaultMode="Edit"
Width="100%">
<EditItemTemplate>
<asp:Table CssClass="sub" runat="server">
<asp:TableRow CssClass="tr_button_list">
<asp:TableCell ColumnSpan="3">
<asp:Button
ID="_btnOk"
ClientIDMode="Static"
Text="Ok"
runat="server"
CssClass="butt_orange_small"
OnClientClick="javascript: return ShowSection('section1');" />
<asp:Button
ID="_btnCancel"
ClientIDMode="Static"
Text="Cancel"
runat="server"
CssClass="butt_orange_small"
OnClientClick="javascript: return ShowSection('section2');" />
I use this code:
$(function () {
var _btnOk = $("#_btnOk");
_btnOk.hide();
});
but it's not working. If I debug this script I found the hidden property of the _btnOk object to remain false even after the .hide() call.
BTW I cannot hide the button using the class reference since it will hide _btnCancel also and I need this to remain visibile.
337
Your problem is that asp:FormView create an iframe.
So jquery can't find your button, because it's not in main frame.
As said in this tutorial, to access element in an iframe with jquery you have to do something like this:
$("#_fvMain").contents().find("#_btnOk").hide();
Reference: this answer.
95
Your JQuery code is fine. Its probably a problem with the following:
Begin Edit
Are you sure that the id is resolving to the correct html tag? You should use the debug tools in the browser to navigate to the button and check the id. It might be that you are resolving to a different element on the form with the same name which is why you are not seeing the change. See Select an element in Chrome (ctrl+shift+C).
Also as I mentioned and everyone else did too using <%= _btnOk.ClientID %> is the best way to select the element id of an ASP.NET control. However, this will only resolve on the .ascx or .aspx form. This means that it will fail if you are using a javascript file like MyExternalScript.js which you reference in the page/control. This is because when the control/page is renederd by the ASP.NET engine it will replace the <%= _btnOk.ClientID %> string with the correct generated client id. It will not do this for external files like javascript files which means that <%= _btnOk.ClientID %> will stay as is in that file and JavaScript will correctly throw an exception as it has no idea what to do with that string.
Ways around this:
<script> element and assign it to a global variable. Then load your custom javascript file right after which can reference the now resolved client id. runat="server" tag, this will ensure that ASP.NET will render the control as is without changing the client id.End Edit
debugger; on a new line to your script which will stop processing at that point in your script if you have the development console open and you can step through starting at that point.$(document).ready(function(){/*your code*/}); which makes sure your script waits for the page to finish loading before executing._btnOk.toggle(false); and _btnOk.toggle(true); to hide and show the button respectively. Or just btnOk.toggle(); to switch the button to hidden or visible depending on the current state.Here is a self contained working example to show that the JQuery call itself is correct. The 2nd button hides or shows the first depending on the first buttons state.
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="AspFormTest.Default" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:Button
ID="_btnOk"
ClientIDMode="Static"
Text="Ok"
runat="server"/>
</div>
<button type="button" onclick="hideShowButton();">Hide or Show ok button</button>
<button type="button" onclick="hideShowButtonToggle();">Toggle button</button>
</form>
<script src="https://code.jquery.com/jquery-2.2.1.min.js"></script>
<script type="text/javascript" language="javascript">
function hideShowButton() {
var aspNetWayOfResolvingId = $("#<%= _btnOk.ClientID %>"); // use this if clientidmode is not static
var _btnOk = $("#_btnOk");
if(_btnOk.is(":visible"))
_btnOk.hide();
else
_btnOk.show();
}
function hideShowButtonToggle() {
var aspNetWayOfResolvingId = $("#<%= _btnOk.ClientID %>"); // use this if clientidmode is not static
var _btnOk = $("#_btnOk");
_btnOk.toggle();
}
</script>
</body>
</html>
Try to get your button like this:
var _btnOk = $("#<%= _btnOk.ClientID %>");
$(function () {
$('#contenitore input[type="button"][value="Ok"]').hide();
});
In the Asp.net you need to call the buttons using the following way
$("#<%= _btnOk.ClientID %>");
You can use by CSS class also.
Create a Dummy CSS class
<style>
.test{
}
</style>
Assign this .test class to the _btnOk so you can hide only that button not the _btnCancel
$(".test").hide();
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
