Question

I have the following in C#:

<asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode="Conditional">
    <ContentTemplate>
        <span id="header" class="hideMe">
            (other irrelevant tags and controls)
        </span>
        <div>
            (other irrelevant tags and controls)
        </div>
        <asp:Button ID="btnSubmit" runat="server" Text="Submit" OnClick="btnSubmit_Click" />
    </ContentTemplate>
    <Triggers>
        <asp:AsyncPostBackTrigger ControlID="btnSubmit" />
    </Triggers>
</asp:UpdatePanel>

And the following jQuery

if ($) {
  $(document).ready(function () {

    $('#header').click(function ($e) {
      if ($(this).hasClass('hideMe')) {
        $('#header').removeClass('hideMe');
        $('#header').addClass('showMe');
      }
      else {
        $('#header').removeClass('showMe');
        $('#header').addClass('hideMe');
      }
    }

  });
}

The jQuery works just fine (ie – if I click upon the header span and the hideMe class is current then it’ll remove hideMe and add showMe, and vice-versa).

However, when I click upon the btnSubmit then an asynchronous postback occurs and causes the header span to reset to its original state (which would be with the hideMe class applied).

How do I go about getting the header span to remain in the state that it was when the submit button is clicked and to not revert back to the state that it was at page load?

Answer 1

What has worked for me:

$(document).ready(function() { 
    // bind your jQuery events here initially 
}); 

var prm = Sys.WebForms.PageRequestManager.getInstance(); 

prm.add_endRequest(function() { 
    // re-bind your jQuery events here 
}); 

Taken from: jQuery $(document).ready and UpdatePanels?