How To Call A Function Of Webform Through Jquery With Ajax?

I want to call a function to change the values in text boxes of division named 'firstdivision' in WebForm1 through jquery with ajax. This is the code i wrote but it's not working :

Solution 1:

Remove .cs from url and #

$("#firstDivision").load
                    (
                      {
                          url: "WebForm1.aspx/Search",
                          async: "true",
                          success: function(msg) { alert("Done Successfully"); },
                          error: function(x, e) { alert("The call got failed due to " + x.msg); }
                      }
                    );

Solution 2:

onclick="javascript:Search()" in your HTML is probably complicating it.

try the below code and let us know how it goes;

<scripttype="text/javascript">

    $('document').ready
    (
        function ()
        {
            $("#btn_Search").click
            (
                function (e)
                {
                    e.preventDefault();
                    $("#firstDivision").load
                    (
                      {
                          checkURL: "WebForm1.aspx.cs/#Search",
                          async: "true",
                          success: function (msg) { alert("Done Successfully"); },
                          error: function (x, e) { alert("The call got failed due to " + x.msg); }
                      }
                    );
                }
            );
        }
    )

</script><inputid="btn_Search"type="button"value="Search" /><br />

Solution 3:

Ok, first thing first - syntax is bad (especially "function ...... ... .... () ..... { etc.), this code should work (using JSfiddle http://jsfiddle.net/ajynnoff/ ) I had to hardcode $("#firstDivision").text("this should come from ajax - just simulating here"); but I think you'll get the picture.

$('document').ready(function () {
     $("#btn_Search").click(function (e) {
         e.preventDefault();
         console.log("clicked");
         $("#firstDivision").load("/echo/html/", function (response, status, xhr) {
             if (status == "error") {
                 var msg = "Sorry but there was an error: ";
                 $("#ajax_status").html(msg + xhr.status + " " + xhr.statusText);
             } elseif (status == "success") {
                 var msg = "Success: ";
                 $("#ajax_status").html(msg + xhr.status + " " + xhr.statusText);


                 $("#firstDivision").text("this should come from ajax - just simulating here");

             }
         });
     });
 });

Personally I would use "pure" ajax http://api.jquery.com/jquery.ajax/ for start,end, error etc. instead of load - to get the best parts :)