.JQuery .ajax how do I call WCF method with return value?

Question

I have been able to call WCF methods with .ajax. How do I call a method that returns a value? I need to call this method to see if data is ready and if not wait one second. The WCF method is:

 [OperationContract]
        [WebGet]
        public bool IsDataReady(string requestGUID)
        {
            if (Global.publicDataDictionary.Keys.Contains(requestGUID))
                return true;
            else return false;
        }

My JavaScript so far is:

$(document).ready(function() {
            var input = {requestGUID:"<%=guid %>"};
            console.log(input);

            $.ajax({
                url: "http://www.blah.com/services/TestsService.svc/IsDataReady",
                type: "GET",
                contentType: "application/json; charset=utf-8",
                data: input,
                dataType: "json",
                success: function(data) {

                }
            });

EDIT2: I broke out the 2nd ajax call into a method but my logging is showing that the call to 2nd web service never passes a requestGUID. Can't i use the same input variable?

   var guid = "<%= this.guid%>";
        // var input = '{"SbiId":"' + guid + '"}';
        // var input = {requestGUID:"ca222cf7-be5e-431a-ab93-9a31e8ae2f4a"};

        function callUpdateGrid(input) {
            console.log(input);
            $.ajax({
                url: "http://www.blah.com/services/TestsService.svc/GetContactsDataAndCountbyGUID",
                type: "GET",
                contentType: "application/json; charset=utf-8",
                data: input,
                dataType: "json",
                success: function (data) {
                    var mtv = $find("<%= RadGrid1.ClientID %>").get_masterTableView();
                                console.log(data);
                                mtv.set_dataSource(data.d.Data);
                                mtv.dataBind();
                            }
            });
        }


        function CallIsDataReady(input) {
            $.ajax({
                url: "http://www.blah.com/services/TestsService.svc/IsDataReady",
                type: "GET",
                contentType: "application/json; charset=utf-8",
                data: input,
                dataType: "json",
                success: function (data) {
                    if (!data) {
                        setTimeout(function (inputInner) { CallIsDataReady(inputInner); }, 1000);
                    }
                    else {
                        //Continue as data is ready
                        callUpdateGrid(input);
                    }
                }
            });
        }

        $(document).ready(function () {
            var input = { requestGUID: "<%=guid %>" };

            CallIsDataReady(input);

        });

EDIT2: I broke out the 2nd ajax call into a method but my logging is showing that the call to 2nd web service is never getting called:

url: "http://www.blah.com/services/TestsService.svc/GetContactsDataAndCountbyGUID",

else {
                            //Continue as data is ready
                            callUpdateGrid(input);
                        }

Answer 1

When you view source on this page is:

var input = {requestGUID:"<%=guid %>"};

showing correctly in the javascript? If you put a breakpoint in your IsDataReady method, do you see if requestGUID has a value? Is your service on the same domain as the page calling it?

EDIT: In your service change: [WebGet] to:

[WebGet(
RequestFormat=WebMessageFormat.Json,
ResponseFormat=WebMessageFormat.Json]

Read up on RESTful web services: http://www.codeproject.com/Articles/105273/Create-RESTful-WCF-Service-API-Step-By-Step-Guide

Answer 2

The return value will be contained in the data parameter passed to the success callback setup in your ajax call.

You will need to check the value here, then if false, setup a timeout, which on expiry will attempt the ajax call again.

It would be best IMO to wrap up the Ajax call inside a function, that you can call in a recursive fashion when the timeout has expired. e.g.

    function CallIsDataReady(input){
        $.ajax({
            url: "http://www.blah.com/services/TestsService.svc/IsDataReady",
            type: "GET",
            contentType: "application/json; charset=utf-8",
            data: input,
            dataType: "json",
            success: function(data) {
                if (!data){
                    setTimeout(function(){CallIsDataReady(input);}, 1000);
                }
                else{
                  //Continue as data is ready
                }
            }
        });
    }
    $(document).ready(function() {
        var input = {requestGUID:"<%=guid %>"};
        console.log(input);

        CallIsDataReady(input);
    });