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);
        }

P6345uk · Answer 1 · 2014-10-22T12:27:30.523

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

score 3 · Answer 2 · answered Jun 19 '11 at 17:51

3

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.

answered Jun 19 '11 at 17:51

MoarCodePlz

5,086
2
25
31

Hi Moar. I added the code-behind into the page_load event and put the JavaScript into a function like you said, but it still isn't working. See newly added JavaScript above – Dan Jun 20 '11 at 18:55
@Dan after looking through the code you posted I couldn't find a function titled "openForms" Am I missing something? – MoarCodePlz Jun 20 '11 at 20:00
Yes sorry, I was inbetween trying different things, should have reverted back, the function openforms is just another name for IsPostBack function, I had too many things called IsPostBack it was confusing me (think I had a var, the funct name and then calling it in c# at once stage). My Apologies. I'm just not sure on the syntax and how to tell the elements open in JavaScript. – Dan Jun 21 '11 at 08:16
The next two steps you could do would be the following: 1) Open up your page in the Chrome developer tools and see if there are any javascript errors. 2) Open up your page in the Chrome developer tools and check and see if the function you're injecting ($(document).ready(openForms);) is actually making it to the page properly enclosed in script tags. If you pass both of these tests then try calling openForms(); in the console in the developer tools and see if it does what you want it to do. – MoarCodePlz Jun 21 '11 at 13:20

score 1 · Answer 3 · edited May 23 '17 at 12:01

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.

Run jQuery function on PostBack (ASP.NET)

3 Answers3