How can I load this ASP.NET div after the page has been loaded?

Question

There is a div on my page currently that makes a lot of requests to the server, so the pages takes about 10 seconds to load. We don't always need this data, so I want to be able to have the page load with all of the info except for this one div. Once the page is loaded 100% I want it to load this div (maybe show a loading...).

I've made an ajax request from my TrackingData.aspx as a test, but I can't seem to get this to work.

My JavaScript

 function ShowCurrentTime() {
    $.ajax({
        type: "POST",
        url: "TrackingData.aspx/GetCurrentTime",
        data: '{name: "' + $("#<%=txtUserName.ClientID%>")[0].value + '" }',
        contentType: "application/json; charset=utf-8",
        dataType: "json",
        success: OnSuccess,
        failure: function(response) {
            alert("bye");
        }
    });
}
function OnSuccess() {
    alert("hi");
}

And the HTML

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

The C# code is simply

public static string GetCurrentTime(string name)
{
    return "Hello " + name + Environment.NewLine + "The Current Time is: "
        + DateTime.Now.ToString();
}

There is a TrackingData.aspx in the same folder, and it has a method GetCurrentTime. This is just a test method, but I should be able to do the rest on my own once I get this working.

Answer 1

You need to add this before your static method (GetCurrentTime):

[System.Web.Services.WebMethod]

And to avoid some faults you can use json stringify for your data:

data: { name: JSON.stringify($("#<%=txtUserName.ClientID%>")[0].value)}