jQuery CSS changes lost after ASP.NET AJAX asynchronous postback

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?

This could help you: http://stackoverflow.com/questions/256195/jquery-document-ready-and-updatepanels/256253#256253 — Gerson Beltrán, Apr 02 '12 at 19:14
@Gerson - Thanks for the link! It got to me a reasonable solution. — Jagd, Apr 03 '12 at 15:19
Gerson - If you'd be so kind as to put that link as an answer then I'll vote it up and check it as the answer. — Jagd, Jun 22 '12 at 17:53

score 5 · Accepted Answer · edited May 23 '17 at 10:26

5

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?

edited May 23 '17 at 10:26

Community

1
1

answered Jun 24 '12 at 20:00

Gerson Beltrán

402
4
8

Does this need to be inside of a Script tag or a script reference tag or it doesn't matter? I.e. does it matter whether the script that has this is being referenced like – Alexander Ryan Baggett Aug 29 '13 at 19:01

Kevin B · Answer 2 · 2012-04-02T19:24:17.840

0

Try using some event delegation.

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

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

  });
}

Edit: As noted in comments, this will not maintain state. For simplicity, I would suggest using a global variable for that purpose, however you would need to run some kind of callback on the async call to apply the classes as needed based on previous state.

edited Apr 02 '12 at 19:24

answered Apr 02 '12 at 19:13

Kevin B

94,570
16
163
180

1

Only going to help halfway. The event binding will be saved (great!) but the #header being returned will not necessarily have the right class. Could store in a variable, get the state right before the POST and re-apply in the success callback, POST to server and have the server send back with correct class already rendered, etc.. – Greg Pettit Apr 02 '12 at 19:16

jQuery CSS changes lost after ASP.NET AJAX asynchronous postback

2 Answers2