cannot retrieve data in Jquery after makin $.ajax call using Jsonp - ajax

Question

I've a function used to retrieve the data from my RESTFUL WCF Service. the returned data has to be JSON.
on the Client end I have a javascript function called autosuggest like below:
function autosuggest(location){
var uri= 'http://localhost:2043/Suggest.svc/GetAirportsjson?location='+location;
$.ajax({
url:uri,
dataType: 'jsonp',
jsonp: 'callback',
jsonpCallback: 'jsonpCallback(e)',
success: function(e){
alert("success");
}
}); };
the Service interface as:
[WebInvoke(Method = "GET", ResponseFormat = WebMessageFormat.Xml, BodyStyle = WebMessageBodyStyle.Bare, UriTemplate = "/GetAirportsXML?location={location}")]
[OperationContract]
List<Suggestions> GetAirportDataXml(string location);
[WebInvoke(Method = "GET", ResponseFormat = WebMessageFormat.Json, BodyStyle = WebMessageBodyStyle.Bare, UriTemplate = "/GetAirportsJSON?location={location}")]
[OperationContract]
List<Suggestions> GetAirportDataJson(string location);
And The response observed in Firebug for location=m is
[{"AirportCode":"MMZ","AirportName":"Maimana","AreaCode":"701","CountryCode":"AF","CountryName":"Afghanistan"},{"AirportCode":"MZR","AirportName":"Mazar-i-sharif","AreaCode":"701","CountryCode":"AF","CountryName":"Afghanistan"},{"AirportCode":"IMZ","AirportName":"Nimroz","AreaCode":"701","CountryCode":"AF","CountryName":"Afghanistan"},{"AirportCode":"TMR","AirportName":"Aguemar","AreaCode":"500","CountryCode":"DZ","CountryName":"Algeria"},{"AirportCode":"BMW","AirportName":"Bordj Badji Mokhtar","AreaCode":"500","CountryCode":"DZ","CountryName":"Algeria"},{"AirportCode":"IAM","AirportName":"In Amenas","AreaCode":"500","CountryCode":"DZ","CountryName":"Algeria"},{"AirportCode":"MUW","AirportName":"Mascara-Ghriss","AreaCode":"500","CountryCode":"DZ","CountryName":"Algeria"},{"AirportCode":"MZW","AirportName":"Mechria","AreaCode":"500","CountryCode":"DZ","CountryName":"Algeria"},{"AirportCode":"MQV","AirportName":"Mostaganem","AreaCode":"500","CountryCode":"DZ","CountryName":"Algeria"},{"AirportCode":"HME","AirportName":"Oued Irara Apt","AreaCode":"500","CountryCode":"DZ","CountryName":"Algeria"},{"AirportCode":"TMX","AirportName":"Timimoun","AreaCode":"500","CountryCode":"DZ","CountryName":"Algeria"},{"AirportCode":"TLM","AirportName":"Zenata","AreaCode":"500","CountryCode":"DZ","CountryName":"Algeria"}]
And I'll also Provide my service code which is
using System;
using System.Collections.Generic;
using System.Data;
using System.Data.SqlClient;
using System.ServiceModel.Activation;
namespace AutosuggestAPI.svc
{
// NOTE: You can use the "Rename" command on the "Refactor" menu to change the class name "Service1" in code, svc and config file together.
[AspNetCompatibilityRequirements(RequirementsMode = AspNetCompatibilityRequirementsMode.Allowed)]
public class Suggest : IService1
{
public string GetDateTime()
{
return DateTime.Now.ToString();
}
private static List<Suggestions> GetDistinct(List<Suggestions> suggestions)
{
var length = suggestions.Count;
var Arr = new Suggestions[length];
suggestions.CopyTo(Arr);
var dist = new HashSet<string>();
foreach (var suggestion in Arr)
{
if (!dist.Contains(suggestion.AirportCode.ToString()))
dist.Add(suggestion.AirportCode.ToString());
else
{
suggestions.Remove(suggestion);
}
}
return suggestions;
}
public List<Suggestions> GetAirportDataXml(string location)
{
var suggestions = new List<Suggestions>();
var val = string.Empty;
for (int i = 0; i < 2; i++)
{
val = i == 0 ? "AirPortName" : "AirPortCode";
SqlConnection conn = null;
try
{
// create and open a connection object
conn = new SqlConnection("Server=(local);DataBase=DBAirPortCodes;Integrated Security=SSPI");
conn.Open();
// 1. create a command object identifying
// the stored procedure
var cmd = new SqlCommand("sp_CheckCondition", conn) { CommandType = CommandType.StoredProcedure };
// 2. set the command object so it knows
// to execute a stored procedure
// 3. add parameter to command, which
// will be passed to the stored procedure
cmd.Parameters.Add(new SqlParameter("#lookup", val));
cmd.Parameters.Add(new SqlParameter("#searchfor", location));
var reader = cmd.ExecuteReader();
while (reader.Read())
{
var suggestion = new Suggestions()
{
_airportCode = Convert.ToString(reader["AirPortCode"]).Trim(),
_airportName = Convert.ToString(reader["AirPortName"]).Trim(),
_areaCode = Convert.ToString(reader["AreaCode"]).Trim(),
_countryCode = Convert.ToString(reader["CountryCode"]).Trim(),
_countryName = Convert.ToString(reader["CountryName"]).Trim()
};
suggestions.Add(suggestion);
}
}
finally
{
if (conn != null)
conn.Close();
}
}
var distinctList = GetDistinct(suggestions);
return distinctList;
}
List<Suggestions> GetAirportDataJson(string location)
{
List<Suggestions> suggestions = GetAirportDataXml(location);
return suggestions;
}
public List<Suggestions> GetAirportDataJsonp(string location)
{
return GetAirportDataXml(location);
}
public List<Suggestions> GetAllSuggestions()
{
var suggestions = new List<Suggestions>();
var val = string.Empty;
for (int i = 0; i < 2; i++)
{
val = i == 0 ? "AirPortName" : "AirPortCode";
SqlConnection conn = null;
try
{
// create and open a connection object
conn = new SqlConnection("Server=(local);DataBase=DBAirPortCodes;Integrated Security=SSPI");
conn.Open();
var cmd = new SqlCommand("sp_GetAllAirports", conn) { CommandType = CommandType.StoredProcedure };
var reader = cmd.ExecuteReader();
while (reader.Read())
{
var suggestion = new Suggestions()
{
_airportCode = Convert.ToString(reader["AirPortCode"]).Trim(),
_airportName = Convert.ToString(reader["AirPortName"]).Trim(),
_areaCode = Convert.ToString(reader["AreaCode"]).Trim(),
_countryCode = Convert.ToString(reader["CountryCode"]).Trim(),
_countryName = Convert.ToString(reader["CountryName"]).Trim()
};
suggestions.Add(suggestion);
}
}
finally
{
if (conn != null)
conn.Close();
}
}
var distinctList = GetDistinct(suggestions);
return distinctList;
}
}
}
The Problem is that the call is successful and I get the Data in Browser but I cannot catch it in Jquery or Javascript.
Can someone help?

Answer 1

You are passing wrong string to jsonCallback.
should be
function autosuggest(location){
var uri= 'http://localhost:2043/Suggest.svc/GetAirportsjson?location='+location;
$.ajax({
url:uri,
dataType: 'jsonp',
jsonpCallback: 'jsonpCallback',
success: function(e){
alert("success");
}
});
};
Also why you are overriding default callback parameter name with default value ?
EDITED: Seems you don't really understand how jquery handles jsonp stuff.
jquery create a function to handle return of jsonp request which returns json as plain text wrapped into this function call. you can provide no function at all, and that is preferable for jquery and more straitforward
take a look at the following example
Only parameters you need to provide is datatype of jsonp
var r = $.ajax({
url : uri
, dataType:'jsonp'
, success: function (e) {
viewModel.tweets(e.results);
}});
EDITED 2: Your service should handle 'callback' parameter, and if provided, wrap up response json in the function call provided
ie
Request: http://......../GetAirportsjson?location=....&callback=mycallback
Response: mycallback({ .... you real json response goes here .... })
Until you have this you are not doing proper jsonp response