An update panel, a postback and jQuery

Question

An update panel, a postback and jQuery. Sounds like a bad joke, but here's my situation.

I've got two grids wrapped up in a MS update panel. The grids each have buttons in them that cause postback events to happen. under one grid is a div which is hidden by a jQuery function. And in one grid is a hyperlink which can cause that hidden div to show. Inside of the hidden div is a asp:button used for another postback.

Now is when I run into a problem. When I click either one of the buttons inside the grids, my div which is hidden by jQuery shows up. I don't want it to show up. In fact it should stay hidden until I call the method to make it show up. The hyperlink click event for the div does work, it's just that on a postback, the hidden div shows. Anyone know what could be causing this? Am I missing something on the postback or do I need more in the document.ready section of the jquery. Or is the MS ajax update panel screwing with things.

Here's a snippet of the jQuery to hide the div:

$(document).ready(function() {
   $("#actionDiv").hide();                 
});

Answer 1

$(document).ready(function() only gets called one time. You are doing a partial postback so you need to set the $("#actionDiv").hide(); each time.

<script language="javascript" type="text/javascript">
    function AfterPostBackInit() { $("#actionDiv").hide(); }

    // Run AfterPostBackInit() when the page loads and after every post-back.
    Sys.Application.add_load(AfterPostBackInit);
</script>

Answer 2

$(document).ready() won't fire after an MS AJAX panel is updated. If you can set the css on actionDiv before it goes to the browser that would be better for that issue.