Simple ajax call getting exception

Question

I'm having this ajax call:

<script src="js/jquery-1.11.0.js"></script>
  <script type="text/javascript">
        $(document).ready(function () {
            // Add the page method call as an onclick handler for the div.
            $("#Result").click(function () {

                $.ajax({
                    type: "POST",
                    url: "Default.aspx/GetDate",
                    data: "{}",
                    contentType: "application/json; charset=utf-8",
                    dataType: "json",
                    success: function (msg) {
                        // Replace the div's content with the page method's return.
                        $("#Result").html(msg.d);
                    }
                });
            });
        });
</script>

HTML:

<div id="Result">Click here for the time.</div>

Webmethod:

<WebMethod()> _
<ScriptMethod(ResponseFormat:=ResponseFormat.Json)>
    Public Shared Function GetDate() As String
        Return DateTime.Now.ToString()
    End Function

When I run this I'm getting error in console as:

Failed to load resource: the server responded with a status of 500 (Internal Server Error)

Can anyone say what and where am I going wrong? and If I download the sample provided and it works fine which is mentioned here in this example by Encosia.

Answer 1

Dont know what happened but this solved my issue by adding :

<script src="http://code.jquery.com/jquery-migrate-1.2.1.min.js"></script>

Answer 2

Not an expert but I encountered this in some of my works. Here's for you to test:

$(document).on("click", "#Result", function(){
    var data = {};
    $.post("Default.aspx/GetDate", data, function(msg,status){
        $(this).html(msg.d);
        console.log(msg);
    })
})