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:
- Resolve the Id you want on the page itself in a
<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.
- Use a css class as a pointer to the control. There does not have to be any actual css markup for that class, just add it to the control and reference it from the javascript (jquery).
- If using AJAX then use a pure HTML button control and also omit the
runat="server" tag, this will ensure that ASP.NET will render the control as is without changing the client id.
End Edit
- You are setting the button to hidden correctly but this is part of a form post operation back to the server. ASP.NET server side code does not keep track of the button state with a form post so when the form is reloaded from the server the state is actually reset including the state of the button. This makes it appear as if the JQuery action had no effect on the button.
- There is more than one script that executes OR your script is executed 2 times. This could happen if you have multiple events setup to fire.
- You are not loading JQuery before you try to hide the button. Make sure that you have a script reference to JQuery and that it is being loaded before your script, this is as simple as making sure the order on the page is correct, JQuery should be at the top and then scripts that rely on it.
- Make sure that the JQuery selector actually resolves. I provided 2 ways to resolve your JQuery selector in the sample below.
- Make sure your script is actually running by debugging it in your browser. With Chrome you use F12 to open the development console, find you script and place a break point. Alternatively you can also add
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.
- Last possibilities is that you are trying to run your script when your page is loaded but the script is at the top of your page without a wrapper around document ready. This means you try to resolve a button that has not yet been loaded in your html. To fix this wrap your script with
$(document).ready(function(){/*your code*/}); which makes sure your script waits for the page to finish loading before executing.
- JQuery version - make sure you are using the latest, I think this functionality was added in version 1.4.
- Alternate to show/hide - you can also use
_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>
