Jquery AJAX with ASP.NET WebMethod refreshing the entire page

Question

I am using Jquery Ajax to set the values of a Label and a ListBox in my form. I realize that values are set properly by the function. But just after that , the page just refreshes clearing all previously set values . Why is this happening ? Iam new to Jquery/Ajax. Am I missing any fundamentals here ? Thanks in Advance.

Iam pasting the entire code

        $(document).ready(function () {
            $('#Button1').bind('click', function clk() {
                $.ajax({
                    type: "POST",
                    url: "WebForm5.aspx/TestMethod",
                    data: "{}",
                    contentType: "application/json; charset=utf-8",
                    dataType: "json",
                    success: function (result) {
                        alert(result.d.ListBox.length);
                        for (var i = 0; i < result.d.ListBox.length; i++) {
                            alert(result.d.ListBox[i]);
                            $(document.createElement("option")).attr("value", result.d.ListBox[i]).html(result.d.ListBox[i])
   .appendTo('#<%=ListBox1.ClientID  %>');

                            $('#Label1').text(result.d.MyProperty);
                        }
                    }
                });
            })
        });

ShankarSangoli · Accepted Answer · 2011-08-09 19:36:49Z

8

Button1 in your code is an asp button which is a submit button. When you click on it, it will submit the page and refresh the whole page. If you want to stop the page from being submitted on button click return false, it will work.

$('#Button1').bind('click', function clk() {
                $.ajax({
                    type: "POST",
                    url: "WebForm5.aspx/TestMethod",
                    data: "{}",
                    contentType: "application/json; charset=utf-8",
                    dataType: "json",
                    success: function (result) {
                        alert(result.d.ListBox.length);
                        for (var i = 0; i < result.d.ListBox.length; i++) {
                            alert(result.d.ListBox[i]);
                            $(document.createElement("option")).attr("value", result.d.ListBox[i]).html(result.d.ListBox[i])
   .appendTo('#<%=ListBox1.ClientID  %>');

                            $('#Label1').text(result.d.MyProperty);
                        }
                    }
                });

  return false;
            })

edited Aug 9, 2011 at 19:36

answered Aug 9, 2011 at 19:28

ShankarSangoli

69.9k13 gold badges96 silver badges124 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Ananth Over a year ago

..Thanks ..Works perfectly..Could you please enlighten me why this happened and how "return false" did the trick ?

ShankarSangoli Over a year ago

Added the explaination in my answer take a look.

Dylan Hayes Over a year ago

Thank you so much! I was looking all over as to why my button was auto refreshing. I added the return false and it works exactly as expected.

Collectives™ on Stack Overflow

Jquery AJAX with ASP.NET WebMethod refreshing the entire page

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related