Question

I have the code below in a document.ready, when I use Chrome’s debugger to see why nothing is happening, I see that for some reason the ajax call gets skipped over?

var latitude = $('#LatitudeHidden').val();
                var longitude = $('#LongitudeHidden').val();
                var from = $('#<%:FromTextBox.ClientID %>').val();
                var to = $('#<%:ToTextBox.ClientID %>').val();
                var type = $('#<%:TypeEnhancedDropDownList.ClientID %>').val();
                var specialLocation = $('#<%:SpecialLocationsEnhancedDropDownList.ClientID %>').val();

                var json = {
                    'latitude': latitude,
                    'longitude': longitude,
                    'from': from,
                    'to': to,
                    'type': type, 
                    'specialLocation': specialLocation
                };

                $.ajax({
                    type: "POST",
                    url: "List.aspx/GetFilteredLocations",
                    data: json,
                    contentType: "application/json; charset=utf-8",
                    dataType: "json",
                    error: function(msg)
                    {
                        console.log(msg);
                    },
                    success: function(msg)
                    {
                        console.log(msg.d);
                    }
                });

Answer 1

It seems like it is having trouble deserializing the json data…
You may need to stringify your data, even though you do have the datatype set to json.
There is a js library to accomplish this. Here is JSON js library to help

Try this (after including the JSON library into your page)

 $.ajax({
     type: "POST",
     url: "List.aspx/GetFilteredLocations",
     data: JSON.stringify(json),
     error: function(msg)
     {
        console.log(msg);
     },
     success: function(msg)
     {
        console.log(msg.d);
     }
 });