Appending Div after AJAX post

Question

I'm struggling to understand why the following is occurring. I am calling a very simple webservice as shown below. For some reason, my jquery appends the div, but it vanishes immediately? Apologies for the poorly formatted thread...

Also, using jquery 1.7.1 as provided by VS2013

<WebMethod()>
Public Function GetTime() As String
    Dim time As String = ""
    time = Now().TimeOfDay.ToString

    Return time
End Function

My AJAX below

 function CallWebServiceFromJquery() {

         $.ajax({
             type: "POST",
             url: "WebService.asmx/GetTime",
             data: "{}",
             contentType: "application/json; charset=utf-8",
             dataType: "json",
             success: setTime,
             error: OnError

         });

     }

Success function

function setTime(data, status) {
         //alert(data.d);
         $("#time").css("visibility", "visible")
         $("#time").append("<h1>" + data.d + "</h1>")
     }

Lastly, the onclick

<asp:Button ID="btnCallWebService" runat="server" OnClientClick="CallWebServiceFromJquery()" Text="Call Webservice" />

Answer 1

The button click itself is causing a postback, hence why the appended div seems to disappear. You need to stop the default event behaviour using preventDefault() :

<asp:Button OnClientClick="CallWebServiceFromJquery(event)" ...

function CallWebServiceFromJquery(e) {
    e.preventDefault();
    $.ajax({
        // ajax settings...
    });
}

Answer 2

Make sure CallWebServiceFromJquery returns false . Based on your description of the div appearing and disappearing, your page is doing a postback.