Checkbox and AJAX: how to call onClick event method RSS

• • Reply
  

  versak21

  0 Points

  7 Posts

  Checkbox and AJAX: how to call onClick event method

  May 23, 2008 02:17 PM|LINK

  I have a web form wich has Upload file control on it. I also have a panel wich I want to enable/disable based on checkbox state. The method that does that switch is "cbPasswProtect_CheckedChanged2". Because of upload control I don't want to post back and trying to use AJAX updatePanel. The problem is that checkbox's event "OnCheckedChanged" doesn't fire until AutoPostBack is set to true but this is what I want to avoid. When I am using a button and it's onClick event everything works just fine. At the same time onClick event for checkbox returns error (method cbPasswProtect_CheckedChanged2 doesn't exist). Is there a way to fire this method from checkbox events without reloading the whole page?

  The code for UpdatePanel is below:

  <asp:UpdatePanel ID="UpdatePanel1" runat="server">
      <ContentTemplate>
      
  
      <tr runat="server" id="tr0" valign="top"><td align="right"> </td><td align="left">
          <asp:Button ID="Button3" onClick="cbPasswProtect_CheckedChanged2" runat="server" Text="Button" />
          <asp:CheckBox ID="cbPasswProtect" Checked="false" runat="server" Text="Password Protect"
           OnCheckedChanged="cbPasswProtect_CheckedChanged2"   />
          </td></tr>
  
  
      <tr runat="server" visible="false" id="tr1" valign="top"><td align="right">
          <asp:Label ID="Label2" runat="server" Text="Password"></asp:Label>
          </td><td align="left">
              <asp:TextBox ID="tbPassw1" Width="100" runat="server" TextMode="Password"></asp:TextBox>
          </td></tr>
      <tr runat="server" visible="false" id="tr2" valign="top"><td align="right">
          <asp:Label ID="Label3" runat="server" Text="Confirm Password "></asp:Label>
          </td><td align="left">
              <asp:TextBox ID="tbPassw2" Width="100" runat="server" TextMode="Password"></asp:TextBox>
              <asp:CompareValidator ID="passwCompare" runat="server" ControlToValidate="tbPassw1"
                  ControlToCompare="tbPassw2"
                  Operator="Equal" ErrorMessage="First and second Passwords do not match."
                  Display="Dynamic"></asp:CompareValidator>
          </td></tr>
          
  
      </ContentTemplate>
      </asp:UpdatePanel>

   
          <script runat="server" language="csharp">
              private void cbPasswProtect_CheckedChanged2(object sender, EventArgs e)
              {
                  tr1.Visible = true;
  	//...
              }
          </script>
   
  

   
• • Reply
  

  Dollarjunkie

  Participant

  1155 Points

  864 Posts

  Re: Checkbox and AJAX: how to call onClick event method

  May 23, 2008 02:47 PM|LINK

  <asp:CheckBox ID="cbPasswProtect" Checked="false" runat="server" Text="Password Protect"

  OnCheckedChanged="cbPasswProtect_CheckedChanged2" />

  .Net Web/Software Engineer
• • Reply
  

  cameron_w

  Contributor

  2288 Points

  338 Posts

  Re: Checkbox and AJAX: how to call onClick event method

  May 23, 2008 03:01 PM|LINK

   you need to set AutoPostBack="true" on the checkbox,

  there isn't a way to fire the event without loading the whole page, why not use Page.IsPostBack to control what your page does when it is first accessed vs when you post back
  

  Please: Don't forget to click "Mark as Answer" on the post that helped you.
  
  Cameron Waldron
  • Edited by cameron_w on May 23, 2008 03:04 PM
• • Reply
  

  DaSoul

  Member

  2 Points

  11 Posts

  Re: Checkbox and AJAX: how to call onClick event method

  May 23, 2008 03:10 PM|LINK

  This worked for me.  Place the checkbox outside the update panel.

  Setup a trigger in the update panel similar to

   

  <Triggers>
     <asp:AsyncPostBackTrigger ControlID="CheckBox1" EventName="CheckedChanged" />
  </Triggers>

   
  

   HTH

• • Reply
  

  versak21

  0 Points

  7 Posts

  Re: Checkbox and AJAX: how to call onClick event method

  May 26, 2008 09:45 PM|LINK

  Ok, thank you for the ideas. The solution is:

  ASP:

  <form id="form1" runat="server">
      <div>
          <asp:CheckBox AutoPostBack="true" ID="CheckBox1" runat="server"
              oncheckedchanged="CheckBox1_CheckedChanged" />
          <asp:ScriptManager ID="ScriptManager1" runat="server">
          </asp:ScriptManager>
          <asp:UpdatePanel ID="up1" runat="server">
          <ContentTemplate>
          <asp:Panel ID="Panel1" runat="server">
              <asp:Label ID="Label1" runat="server" Text="Test text N1"></asp:Label>
          </asp:Panel>
          </ContentTemplate>
          <Triggers>
          <asp:AsyncPostBackTrigger ControlID="CheckBox1" EventName="CheckedChanged" />
          </Triggers>
          </asp:UpdatePanel>
          <asp:FileUpload ID="FileUpload1" runat="server" />
      </div>
      </form>

    C#:

      protected void CheckBox1_CheckedChanged(object sender, EventArgs e)
      {
          if (this.CheckBox1.Checked)
          {
              this.Label1.Text = "Checked";
          }
          else {
              this.Label1.Text = "UN Checked";
          }
      }

   

  • Marked as answer by versak21 on May 26, 2008 09:46 PM