views:

29

answers:

1

I have a small form with a checkbox and a couple text fields in an update panel. When the user checks the checkbox the text fields are prepopulated with values. When the user unchecks the checkbox, the text fields are cleared. The update panel updates when the user clicks the check box

I've also added a small javascript that unchecks the checkbox when the user manually modifies any of the textboxes.

My problem is that the textboxes don't prepopulate after manually modifying them. Here's the steps I take

  1. Click the Checkbox (this causes an asynchronous postback and the textboxes are populated)
  2. Modify the contents of a textbox (this causes a javascript to run and uncheck the checkbox with DOM Scripting, no asynchronous postback takes place)
  3. Click the Checkbox again (this should cause an asynchronous postback, and the textboxes should revert to their values in step 1 but nothing happens)

Step 3 does cause a postback though. The problem is that the CheckChanged event does fire on the server side until the user clicks the checkbox a second time. This makes sense considering, according to the server, nothing has changed in step 3. Still, is there an event that will fire every time a checkbox is clicked?

ASP.net Code

<asp:UpdatePanel ID="upContact" runat="server" UpdateMode="Conditional">
     <ContentTemplate>
          <div class="Form ContactForm" style="width: 470px;">
                <div style="text-align: right;">
                     <asp:CheckBox ID="cbxUseInfo" runat="server" CssClass="UsePreset" AutoPostBack="true" OnCheckedChanged="cbxUseInfo_CheckChanged" Text="Use my info" />
                </div>
                <div class="InputPair">
                     <label>First Name</label>
                     <asp:TextBox runat="server" ID="txtContactFirst" MaxLength="20" /> 
                </div>
                <div class="InputPair">
                     <label>Last Name</label>
                     <asp:TextBox runat="server" ID="txtContactLast" MaxLength="100" /> 
                </div>
           </div>
       </ContentTemplate>
</asp:UpdatePanel>

JQuery

        $(function() {
            function setupPresetReset() {
                $('.ContactForm input[type="text"]').change(function clearPresets() {
                    $('.UsePreset input', $(this).parents('.ContactForm')).attr('checked', false);
                });
            }

            setupPresetReset();
            Sys.WebForms.PageRequestManager.getInstance().add_endRequest(function(sender, e) {
                setupPresetReset();
            });
        });

C#

        protected void cbxUseInfo_CheckChanged(Object sender, EventArgs e)
        {
            if (cbxUseInfo.Checked)
            {
                txtContactFirst.Text = AppUser.Current.FirstName.Trim();
                txtContactLast.Text = AppUser.Current.LastName.Trim();
            }
            else
            {
                txtContactFirst.Text = string.Empty;
                txtContactLast.Text = string.Empty;
            }
        }
A: 

You can bind the click event to any target. So simply doing something like

$(':checkbox').click(function() {
  //for server side response
  $.ajax(); //....
});

http://http://api.jquery.com/jQuery.ajax/

This will fire every time you click a check-box. Of course, you'll have to be more explicit with your selector if you want to target a specific check-box

DKinzer
Sorry, I wasn't clear. I need a server side event. Thanks though.
Antilogic
OK, but clicking a check box is an client side event. To make something happen on the server side. Just replace '//do something' with an ajax call.
DKinzer
runat="server" makes client-side events server-side events. However the checkbox doesn't have a server-side click event
Antilogic

related questions