Correctly Enabling/Disabling an ASP.Net Button Control via Javascript

Inside of an AJAX Update Panel I have this control:

 <asp:Button ID="buttonDiscard" runat="server" Text="Discard" Enabled="false" style="font-size:10px" OnClientClick="return GetConfirmation();" OnClick="buttonDiscard_Click" />

The part highlighted in bold is something I just added.  It's simply calling this:

    function GetConfirmation() {
      debugger
      var answer = confirm('Are you absolutely sure you want to throw away this past editing you have done?');
      if (answer)
      {
        alert("Okay, now will run server-side code")
      }
      else
      {
        return false;
      }
    }

On the page, this button is enabled & disabled depending on several things.  That Javascript code *appears* to be working correctly in that I can visually see the button becoming enabled & disabled as I would expect.  BUT the problem is that the client-side GetConfirmation function is NOT being executed.  It's as if the client-side event handler is somehow being removed from the button.

When I added a test button that I just left enabled constantly, it did call this client-side function!

Any ideas why I'm experiencing what I am?

Robert


Robert Werner
Vancouver, BC
www.mwtech.blogspot.com
www.pocketpollster.com/beta
-1
rmdw
5/4/2009 11:23:36 PM
asp.net.client-side 24353 articles. 0 followers. Follow

12 Replies
2940 Views

Similar Articles

[PageSpeed] 58

  

    Protected Sub buttonDiscard_Click(ByVal sender As Object, ByVal e As System.EventArgs) Handles buttonDiscard.Click
        ScriptManager.RegisterStartupScript(Me, Me.GetType(), "confirmation", "GetConfirmation();", True)
    End Sub
 
When you ask a question, remember to click "Mark As Answer" when you get a reply which answers your question.
0
Kulrom
5/5/2009 12:27:51 AM

<asp:ScriptManager ID="ScriptManager1" runat="server" EnablePartialRendering="false">

 from this http://forums.asp.net/t/1069384.aspx?PageIndex=3

0
mo
5/5/2009 2:24:33 AM

I think that I did not explain the problem properly.  I don't believe there's anything wrong with my client-side code.

To get to the root of this problem please download this demo project I just created.  When you run it, it's fairly self-explanatory. Clearly there's something wrong with the approach I'm using to enable the first button.

Incidentally, to see how things will work when the button is enabled, just go to the Page_Load event handler and comment out the two lines of code within.  Then run the project again.

My belief is that if I can figure out how to properly enable the button with client-side code then the Javascript code attached to that button will run once more.

Robert

 


Robert Werner
Vancouver, BC
www.mwtech.blogspot.com
www.pocketpollster.com/beta
-1
rmdw
5/5/2009 3:47:30 AM

did you try this?

<asp:ScriptManager ID="ScriptManager1" runat="server" EnablePartialRendering="false">

-1
mo
5/5/2009 3:56:35 AM

how about

<asp:Button ID="Button2" runat="server" Text="Enable Delete Button" OnClientClick="enableDelete();return false;" />

-1
mo
5/5/2009 4:08:40 AM

 Hi rmdw,

As per the demo you provided, it's obvious behaviour. Look at your code..

<asp:Button ID="Button2" runat="server" Text="Enable Delete Button" OnClientClick="enableDelete();" />

what it will do is call javascript function then postback the page. So, it will first enable the button and then return the response from serverside which again make it disabled. The solution is very easy.. Just stop it to postback the page. using return false;

<asp:Button ID="Button2" runat="server" Text="Enable Delete Button" OnClientClick="enableDelete();return false;" /> 


Please mark as Answer if it helps u. Thanks!

Parth Patel
Techsture Technologies
Software Developer
Ahmedabad
-1
Coool
5/5/2009 4:25:05 AM

Your EnablePartialRendering="false" didn't seem to change anything.

Modifying OnClientClick of Button 2 as you did, seemed to resolve the immediate problem.  A question though: Why did the Delete button become disabled immediately after the server-side code was run?  I put a breakpoint on the server-side code in Page_Load and Button1.Enabled = false;  was NOT executed.  So what on earth is disabling the Delete button again?

There's clearly something I'm not understanding here!

Robert

 


Robert Werner
Vancouver, BC
www.mwtech.blogspot.com
www.pocketpollster.com/beta
-1
rmdw
5/5/2009 4:28:24 AM

Parth,

I'm reading your posting after I posted my last one.  I now understand what you mean.  OnClientClick has to return false or else the server-side code is executed.

Tell me something though, why is Button1 being disabled again after running the server-side code?  As I just stated previously, I put a break point on  Button1.Enabled = false  and it is definitely NOT being run again.

Making progress but still confused about this remaining issue,

Robert


Robert Werner
Vancouver, BC
www.mwtech.blogspot.com
www.pocketpollster.com/beta
-1
rmdw
5/5/2009 4:33:39 AM

glad to solve the problem ^_^

you can put the return false in the enableDelete()

and change enableDelete to return enableDelete()

-1
mo
5/5/2009 4:52:03 AM

 hi rmdw,

Whenever postback occurs, asp.net load page control value and property from ViewState and value which is posted back to the server. Now, any of the style property is not posted back to the server, nor any server side code is set it enabled on post back, so obviously it's not going to enable the button1.

What you can do is use one hidden Asp Control and then set value of it whenever button is enabled. Check the value of hidden asp control on server side and on the bases of that enable and disable button on postback. like

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
  <title></title>

  <script type="text/javascript">
    function confirmation() {
      var answer = confirm("Are you sure you want to do this?");
	    if (answer)
        alert("About to run server-side code...");
	    else
        return false;  
	  }

	  function enableDelete() {
	    $get('<%= hdnButton1State.ClientID %>').value = "1";
        $get('<%= Button1.ClientID %>').removeAttribute('disabled');
	  }
  </script>
</head>

<body>
  <form id="form1" runat="server">
    <asp:ScriptManager ID="ScriptManager1" runat="server" />
    <asp:UpdatePanel ID="UpdatePanel1" runat="server">
      <ContentTemplate>
        <h2>Why does the second button not enable the first button?</h2>
        <br />
        <asp:Button ID="Button1" runat="server" Text="Delete" OnClick="Button1_Click" OnClientClick="return confirmation();" />
        <br /><br />
        <asp:HiddenField ID="hdnButton1State" runat="server" Value="" />
        <asp:Button ID="Button2" runat="server" Text="Enable Delete Button" OnClientClick="enableDelete();return false;" />
        <br /><br /><br /><br />
        <asp:Label ID="Label1" runat="server" Text="Server-side code executed!" Visible="false" />
      </ContentTemplate>
    </asp:UpdatePanel>
  </form>
</body>
</html>
   
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;

namespace Confirmation_Dialog_Box
{
  public partial class _Default : System.Web.UI.Page
  {
    protected void Page_Load(object sender, EventArgs e)
    {
      // Comment out these next two lines to see the code run normally
        if (hdnButton1State.Value == "1")
            Button1.Enabled = true;

      if (!IsPostBack)
        Button1.Enabled = false;
    }

    protected void Button1_Click(object sender, EventArgs e)
    {
      Label1.Visible = true;
    }
  }
}
 
Please mark as Answer if it helps u. Thanks!

Parth Patel
Techsture Technologies
Software Developer
Ahmedabad
0
Coool
5/5/2009 4:55:22 AM
as simple as put this property in button 1 

EnableViewState="false"

-1
mo
5/5/2009 4:59:11 AM

Thanks gents.  I created the test project to demonstrate to you the problem I'm having in my main project.  When now trying to implement the same code in my main project, I can't get the client-code to fire at all.  Instead it just immediately executes the server-side code.  Ughhhh.

Well, it's late here in Vancouver.  I'm going to get some sleep and try again tomorrow.

Thank you both for your help!

Robert

 


Robert Werner
Vancouver, BC
www.mwtech.blogspot.com
www.pocketpollster.com/beta
-1
rmdw
5/5/2009 5:03:06 AM
Reply: