Run jQuery function on PostBack (ASP.NET)

Question

I have a form which is initially hidden via jQuery, and on click of a button two radio buttons appear (also hidden initially via jQuery). On click of one radio button, the user is redirected to another page (this works fine). On click of the other radio button "the form" is made visible again, via jQuery.

My problem comes when a field within 'the form' is validated server-side on submit, and the page is reloaded with the validation error message visible BUT the 'form' is now hidden (as per the initial jQuery below).

How can I make the form visible on postback? (I have already tried ASP Panels & AJAX UpdatePanel to no avail.)

** This is my jQuery: **

// Reveal Radio Fields
      $(".btn-leavecomment, .txt-leavecomment").toggle(function(){   
            $("#commenttype").stop().animate({ down: "+=300" }, 3000)      
            $("#commenttype").stop().slideDown("slow");      
       }, function(){
            $("#commenttype").stop().animate({ down: "-=300" }, 1400)      
            $("#commenttype").stop().slideUp("slow");  
      });     


      // Reveal Form on-click of one radio field in particular
      $(".reveal_ccform").toggle(function(){   
            $("#ccform_container").stop().animate({ down: "+=300" }, 4000)      
            $("#ccform_container").stop().slideDown("slow:4000");      
       }, function(){
            $("#ccform_container").stop().animate({ down: "-=300" }, 4000)      
            $("#ccform_container").stop().slideUp("slow:4000");
      }); 

Newly Added JavaScript implementation (as per Moar's suggestion) this is still not working, any ideas? :( :

JavaScript:

<script type="text/javascript">
        $(document).ready() {
            function isPostBack() 
            {
                if (!document.getElementById('clientSideIsPostBack'))
                {
                    return false;

                    if (document.getElementById('clientSideIsPostBack').value == 'Y' )
                    return true;
                    }

                // Reveal Comment Type
                $(".btn-leavecomment, .txt-leavecomment").toggle(function () {
                    $("#commenttype").stop().animate({ down: "+=300" }, 3000)
                    $("#commenttype").stop().slideDown("slow");
                }, function () {
                    $("#commenttype").stop().animate({ down: "-=300" }, 1400)
                    $("#commenttype").stop().slideUp("slow");
                });


                // Reveal Sign Guestbook Form
                $(".reveal_ccform").toggle(function () {
                    $("#ccform_container").stop().animate({ down: "+=300" }, 4000)
                    $("#ccform_container").stop().slideDown("slow:4000");
                }, function () {
                    $("#ccform_container").stop().animate({ down: "-=300" }, 4000)
                    $("#ccform_container").stop().slideUp("slow:4000");
                });

                // Hide 'Leave a Comment' button and 'Comment Type' div
                $('.reveal_ccform').click(function () {
                    $(".btn-leavecomment").stop().fadeOut("slow:1500"),
                    $('#commenttype').slideUp("slow:8000");
                });
            }
        }
    </script>

C#:

if (Page.IsPostBack)
        {
            Page.ClientScript.RegisterStartupScript(GetType(), "IsPostBack", script, true);

            //Second part of code will run if is postback = true
            ClientScriptManager cs = Page.ClientScript;
            Type csType = this.GetType();
            cs.RegisterClientScriptBlock(csType, "openForms",     "$(document).ready(openForms);", true);
        }  

Answer 1

This may sound rather annoying but to accomplish this

I would use hidden values Say when you open the form update the hidden value to 1,

Page HTML

input type="hidden" id="hiddenFormOpen" value="1" runat="server"

C# codebehind

if (IsPostBack)
    ClientScriptManager.RegisterClientScriptBlock(this.GetType, "myFunction",
        "openForm("+hiddenFormOpen+")", true);

Javascript Function

function openForm (val)
{
    if (val ==1)
    {
        Update form visibility here
    }
}

Second option would be to avoid doing a serverside post back and use JQuery to do an entirely client based one therefore eliminating the postback

Answer 2

I would recommend putting all of the javascript you have shown in a function. For sake of this example, lets say you place it in a function called

myFunction();

Then, in your code-behind, place this in one of the page events (I would recommend page_load)

if (IsPostBack)
    ClientScriptManager.RegisterClientScriptBlock(this.GetType, "myFunction", "$(document).ready(myFunction);", true);

This will inject javascript to the page that will run your function only if the page is a post back.

Answer 3

When a postback occurs, any changes you made to the page via jQuery will be lost.

I'm not sure if you're using UpdatePanels, but there are additional problems in that case. Read this: jQuery $(document).ready and UpdatePanels?

If you're not using UpdatePanels, I would say you just need to make the form visible on the server-side during the postback (form.visible).

The asp.net webforms model is really useful, however it was definitely not desigend with jQuery in mind. In my opinion, if you want to get the most of the web 2.0 type of approach, you might want to think about getting away from using postbacks/updatepanels and doing more with web services and so on... Personally, this is definitely pulling me inexorably towards MVC.