JQuery scrolling issue when submiting a form

Question

I'm building an ASP.NET website and I'm puzzled with the behavior of one page, I've got a long form and a submit button, I've got the piece of javascript below in the page to handle scrolling the page back up upon submiting the form, the first time I click the submit button it works all the sequent clicks don't work at all, any idea why?

<script type="text/javascript">
    $(".thebutton").click(function(){
       $("html, body").animate({scrollTop: 200}, 1000); 
    });
</script>

Cheers, Thi

Answer 1

If your Submit button performs a full postback, I would view source on the second web page instance, and make sure that the script is still there.

Answer 2

Your script will run BEFORE the Post.

Imagine if you will:

Initial Page Load Bind Click event with jQuery

Click Button jQuery Click is raised html and body scrollTop are set to 200 during the "animate" the form is submitted

asp.net back end click event code is run page is reloaded.

string script = "$(function() { $('html, body').scrollTop(200); });";
ClientScript.RegisterStartupScript(this.GetType(), "scrollTop", script, true);

That should take care of what you want to accomplish.

Hope it helps.

Answer 3

Ahh,

Using an Ajax post makes this different that my post above.

Does your ajax call change the buttons on the page? I assume you are using an UpdatePanel with the buttons in qustion in it.

Since when you make the Ajax call, the controls in the UpdatePanel are being rebuilt, the DOM is seeing them as different objects and these new objects are no longer bound to the jQuery click function. You will need to re-bind these buttons click event after the ajax post to re-enable the functionality you are looking for.

Using jQuerys new "Live" Handlers should do the trick for you:

$(".thebutton").live("click", function() {
      $("html, body").animate({scrollTop: 200}, 1000);
});

Hope it helps.