0

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?

Akshay Khandelwal
  • 1,570
  • 11
  • 19
  • Try adding console.log(e) to your success function and see if you actually get anything, or just an error. Me thinks you are returning json when jsonp is expected. – adeneo Apr 29 '12 at 20:13
  • I want it to be json but service is not on the same domain. hence using jsonp.Also success function is not hit at all. nothing logged after addding console.log(e) – Akshay Khandelwal Apr 29 '12 at 20:18
  • There is a pretty good probablity that the problem is the returned data. And to use cross domain jsonp the REST service you are using must support it, and return valid jsonp, not json as that will not work. You could do this on the serverside, as that would be really simple, or you could use a service like Yahoo's YQL to convert the data to jsonp. The best option however would probably be to make the REST service support jsonp if you have access to it. – adeneo Apr 29 '12 at 22:06
  • @adeneo: Provided the Service Code, can you now tell me how exactly do I need to make changes to my service? – Akshay Khandelwal May 06 '12 at 20:59

1 Answers1

0

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

vittore
  • 17,449
  • 6
  • 44
  • 82
  • I need to override the default Callback so that I can access data returned and Make changes according to my application – Akshay Khandelwal Apr 29 '12 at 20:03
  • Tried but doesnt work. Still cannot get the data. and noticed that jsonpCallback is never called. – Akshay Khandelwal Apr 29 '12 at 20:09
  • what you have in your success handler in e – vittore Apr 29 '12 at 20:46
  • you can access jsondata in success method by using variable "e". Can u give jsonpCallback method to analyze more?? – pradeep cs Apr 30 '12 at 14:48
  • @poineer - see updated answer with link to live example using jsonp and twitter api call – vittore Apr 30 '12 at 18:10
  • Sorry Vittore but even this does not work. I still am unable to Get the Data in a specific Jquery variable. Please Help. The Success Handler is never Hit. The data comes in from the Server. I can see it in Fiddler but not in any javascript variable. – Akshay Khandelwal May 02 '12 at 22:10
  • So again, you are saying that if you use my latest code snapshot, you see that response from server looks like `jquery12345678({...json...})` but your success handler is never called ? – vittore May 03 '12 at 12:28
  • @vittore I did exactly as you said but the success handler is never called! And I am not using any 3rd party API. So I need to make changes to My API? My service? – Akshay Khandelwal May 06 '12 at 20:49
  • can you paste what you really get in response to the call i wrote ? – vittore May 07 '12 at 00:51
  • i didnt analyzed your code before , but you didn't seem to have any code to handle `callback=mycallback` query string parameter – vittore May 07 '12 at 00:52