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.
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.
-
I´m pretty sure the problem is that the element since is in the edit template, it doesn't exist as the page is being rendered, or recognized by the document.ready, if you use
function pageLoad(sender, args) {$(function () { var _btnOk = $("#_btnOk"); _btnOk.hide(); });maybe will work. – thepanch Commented Mar 31, 2016 at 18:31 -
Another way to it, add a "dummy" class to the element
CssClass="butt_orange_small dummyclass", and search for it, dummy class doesn't need to exist, we are using it just to search for it, then you can look for it by that class which will be unique. – thepanch Commented Mar 31, 2016 at 18:34 -
just to add more info, the "id" you set in the FormView will not be the last ID for the entire page, remember that since "btnOK" is nested inside a FormView (this will happen too with any bindable control) it will be taking his parents name plus a "" so the final ID will be "_frmMain__btnOk" or something like this, so the approach
$('#<%=btnOk.ClientID%>').hide()is the way to go. – thepanch Commented Mar 31, 2016 at 18:48 -
I tested your markup and your function and had no problem: the button was hidden correctly. To be sure that everything is loaded when the function is called, you can try
$(document).ready(function () { $("#_btnOk").hide(); });. And if any other script code is present in your markup, you can ment it out to make sure that it does not interfere with you current debugging (e.g. a parent of the button being hidden when your function is called). – Martin Parenteau Commented Apr 1, 2016 at 3:01 - @thepanch nope. the button exist when the document.ready event is triggered. As you can see the default mode is 'Edit'. I tried also the dummy class method and also this wasn't working. The ClientIDMode='static' attribute allows to predict the ID value. Debugging the script I clearly get the reference of the button object. – weirdgyn Commented Apr 6, 2016 at 18:03
8 Answers
Reset to default 4Your 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.
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 justbtnOk.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/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./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 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();
I see two conditions that would cause the hide function to fail:
A parent of the button is already hidden when your function is called (Why doesn't jQuery UI hide element with hidden parent?)
Your
butt_orange_smallclass style has adisplayproperty with the!importantflag. One solution would be to remove the!importantflag. If, for any reason, you must keep it in the class style, you can do this to hide the button:$("#_btnOk").attr('style','display:none !important');
You have to call your function after jquery loads. You can do that putting "()" after your function.
This is an example:
$(function () {
var _btnOk = $("#_btnOk");
_btnOk.hide();
})();
I believe this approach will be efficient:
$(document).ready(function(){
$("button[id*='_btnOk']").hide();
});