jquery ajax returns no transport on a RESTful webservice

Question

I have a RESTful webservice which i can successfully ping on the published server to return test as a demo. I Tried to then put some code in a method to call, but it seems to fail on the AJAX call. I dont know where the error is, as i dont the server running on localhost. I know the webservice is being called correctly as syntax is the same as test in design

I had a similar way i was doing it, but it wasnt RESTful, so i migrated all the data accordingly, so i know the code inside the method works correctly.

Below Is posted the AJAX call:

$.ajax({
            type: 'GET',
            url: WEBSERVICE_URL + 'getWebFormDesignFieldContents',
            data: JSON.stringify({
                'pr_id': LOGGED_IN_PR_ID,
                'fe_name': opts,
                '_count': 200,  //this might need to be adjusted slightly.  I may want to make it more OR less.
                '_also_search_fe_desc': true,
                'opts': opts
            }),
            contentType: 'application/json; charset=utf-8',
            dataType: 'jsonp',
            success: function (result) {
                //success
                var r = $(result.getWebFormDesignFieldContentsResult)[0];
                var div = $("<div class='modal'>").html(r.d);
                /*
                var d = document.createElement("div");
                d.className = "modal";
                d.appendChild(r[0]);
                */
                $("div.modal").replaceWith(div);
                $("div.modal #queryInput").val(opts);
                $("div.modal").css({
                    top: $(window).height() / 2 - $("div.modal").height() / 2,
                    left: $(window).width() / 2 - $("div.modal").width() / 2
                });
                $("div.modal").fadeIn();
            },
            error: function (result) {
                //error
                //alert("Error: "+result.statusText);
                alert(result.statusText);

                //$("div.modal").replaceWith($("<div class = 'modal'>").html(result.responseText));
                //$("div.modal").fadeIn();
                $("div.overlay").fadeOut();
            }
        });

Webservice Interface:

[OperationContract]
    [WebInvoke(Method = "POST",
        ResponseFormat = WebMessageFormat.Json,
        BodyStyle = WebMessageBodyStyle.Wrapped,
        UriTemplate = "getWebFormDesignFieldContents")]
    string getWebFormDesignFieldContents(WebFormFieldClass inputData);

Webservice Function

public string getWebFormDesignFieldContents(string pr_id, string fe_name, string _count, string _also_search_fe_desc, string opts)
    {
       int count = Convert.ToInt32(_count);
       bool also_search_fe_desc = Convert.ToBoolean(_also_search_fe_desc);
       ...
    }

 [DataContract]
public class WebFormFieldClass
{
    [DataMember]
    public string pr_id { get; set; }
    [DataMember]
    public string fe_name { get; set; }
    [DataMember]
    public int count { get; set; }
    [DataMember]
    public string also_search_fe_desc { get; set; }
    [DataMember]
    public string opts { get; set; }
}

Answer 1

EDIT :

Ok Your problem was this your are passing a JSON object as data with GET.

But Sorry, With a GET request you use query string parameters. If you want to send an entire JSON object you should use POST.

Also your URIParameter add a leading slash '/' like this

  /getWebFormDesignFieldContents

url: URL+'/getWebFormDesignFieldContents',

You have two options either make a POST request or use GET pass your paramters like 'pr_id' etc as a UriTemplate parameter

I Have Tested at my end like this :

 <script src="Jquery-1.7.2.js" type="text/javascript"></script>
<script type="text/javascript">
    var URL = 'http://localhost:11431/Service1.svc/getWebFormDesignFieldContents';
    $.ajax({           
        type: 'POST',
        contentType: 'application/json',
        data: JSON.stringify({
            'pr_id': 'ss',
            'fe_name': 'ss',
            '_count': 22,  //this might need to be adjusted slightly.  I may want to make it more OR less.
            '_also_search_fe_desc': true,
            'opts': 'kk'
        }),     
        url: URL,

        success: function (data) {
            alert(data);
        },
        error: function (xhr, status, message) {
            alert("Error: " + status + " " + message);
        }
    });


</script>

My IService1.svc

 [OperationContract]
    [WebInvoke(Method = "POST",
     ResponseFormat = WebMessageFormat.Json,
     BodyStyle = WebMessageBodyStyle.Wrapped)]

    string getWebFormDesignFieldContents(string pr_id, string fe_name, string _count, string _also_search_fe_desc, string opts);

Answer 2

This issue is coming from the browser, or so it seems. All this information was correct, but the errors and issues i was getting are from IE and its hate for ajax. Another issue with this, is that we had to add a bunch of references to the the ASP to allow the program to handle information from the target successfully.