Load the Pagemethods by button click in jQuery

Question

<script type="text/javascript">
    $(document).ready(function() {
        $('#loadbtn').click(function() {    // can 't load  
            opts = {
                title: 'ABCD',
                series: [{
                    neighborThreshold: 0
                }],
                axes: {
                    xaxis: {
                        //smethg
                    },
                    yaxis: {

                        //smethg
                    }
                },

            };
            PageMethods.LoadAsset(LoadSucc, LoadFail); //Want to load by button click event
            function LoadSucc(obj) {
                 goog = obj;
                //Something
                alert("Data loaded");
            }

            function LoadFail() {
                alert("Data missing");
            }
        });
    });
</script>

In my C# code

[System.Web.Services.WebMethod]
public static Array LoadAssetAssignView()
{
    //something
    return something;
}

ASP:

<asp:Button runat="server" ID="loadbtn" Text="Load"   /> 

Actually the function starts working in the document ready function. I want to load the function when my button is clicked. How do I do this?

Answer 1

I think you missing to declare the method in html. Example:

<div>
Your Name :
<asp:TextBox ID="txtUserName" runat="server"></asp:TextBox>
<input id="btnGetTime" type="button" value="Show Current Time"
    onclick = "ShowCurrentTime()" />
</div>

then call the jQuery:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js" type="text/javascript"></script>
<script type = "text/javascript">
function ShowCurrentTime() {
    $.ajax({
        type: "POST",
        url: "CS.aspx/GetCurrentTime",
        data: '{name: "' + $("#<%=txtUserName.ClientID%>")[0].value + '" }',
        contentType: "application/json; charset=utf-8",
        dataType: "json",
        success: OnSuccess,
        failure: function(response) {
            alert(response.d);
        }
    });
}
function OnSuccess(response) {
    alert(response.d);
}
</script>

And last the pagemethod. You can reference by this link: http://www.aspsnippets.com/Articles/Call-ASPNet-Page-Method-using-jQuery-AJAX-Example.aspx