How to call a service reference from jquery?

Question

I have added a service reference to my asp.net web application (originally it was just a straight html site and we converted it to a web application)

We need to access a WCF service via jquery/ajax and not from within any .cs files. So far we haven't been able to get jquery to hit the service by any means, even before it was converted to a web app (converted in hopes that it would be easier to add service reference and call it)

I have the WCF service running in a separate solution running on my desktop and the web app open separately. My service is called SchoolService and is located in the Service References folder.

How in jquery do I call that service reference?

This is what we used from a demo that also did not work:

<script type="text/javascript">
    $(document).ready(function () {
        var schoolsCache = {}, lendersCache = {}, schoolsXhr, lendersXhr;

        $('#Schools').autocomplete({
            source: function (request, response) {
                var term = request.term;
                if (term in schoolsCache) {
                    response(schoolsCache[term]);
                    return;
                }
                if (schoolsXhr != null) {
                    schoolsXhr.abort();
                }
                schoolsXhr = $.getJSON('SchoolService.svc/GetSchools', request, function (data, status, xhr) {
                    schoolsCache[term] = data.d;
                    if (xhr == schoolsXhr) {
                        response(data.d);
                        schoolsXhr = null;
                    }
                });
            }
        });
     });
</script>

I have also tried this line which did not work:

schoolsXhr = $.getJSON('http://localhost:8000/SchoolService/GetSchools', request, function (data, status, xhr) {

Here is the interface in my WCF sdervice:

using System.Collections.Generic;
using System.ServiceModel;
using System.ServiceModel.Web;
using MyApp.DomainModel;

namespace MyAppService
{
        [ServiceContract]
        public interface ISchoolService
        {
                [OperationContract]
                [WebGet(ResponseFormat = WebMessageFormat.Json)]
                IList<School> GetSchools(string term);

                [OperationContract]
                [WebGet(ResponseFormat = WebMessageFormat.Json)]
                School GetSchool(string schoolName);
        }
}

What are the necessary specific steps needed to make this work? The goal is to let user type into textbox, use jquery autocomplete, which uses the ajax call to service to pull back data that contains the typed text... surely this has been done before?

CD

looks like its a same origin policy issue. you need to implement JSONP to work aroud this issue — Kishore, Nov 29 '11 at 17:15
its a general issue with cross domain ajax requests check this link http://stackoverflow.com/questions/3506208/jquery-ajax-cross-domain because. i suppose your web application is on one port and you are making wcf service calls on a different port and its a cross domain for a browser — Kishore, Nov 29 '11 at 17:28
Yea, that's the term that has been coming up left and right trying to do this. The service is running on a specific port and the site just can't hit it. I'm checking out this example now to figure out how to implement: http://jasonkelly.net/2009/05/using-jquery-jsonp-for-cross-domain-ajax-with-wcf-services/ If you have any better examples I'd appreciate it — CD Smith, Nov 29 '11 at 17:45

score 1 · Answer 1 · answered Nov 29 '11 at 17:15

1

You can take a look at this CodeProject article. The author is discussing exactly this profile a WCF service and JQuery client.

answered Nov 29 '11 at 17:15

renick

3,873
2
31
40

This is no help, I'm not using REST – CD Smith Nov 29 '11 at 17:19

score 0 · Accepted Answer · answered Dec 22 '11 at 18:18

No one was able to answer this but we figured it out. It had nothing to do with jsonp or cross domain.

The call from javascript makes a $.getJSON call to the url. The url is the relative url to a .svc file in the project. The .svc file is nothing more than a passthru which constructs a connection to the referenced service and makes the call and then returns back to the ajax call.

How to call a service reference from jquery?

2 Answers2