JQuery, OData and Async question

Question

First, forgive me my ignorance; this is probably a stupid question, but I am not as well versed in ajax as I need to be.

In CRM 2011 on premise, on a specific form, I attach the jQuery.js as a web resource/script attachment.  JQuery is working properly, as I have some other jQuery functions that work properly.  I then have a function registered on a field change that calls an OData request, wrapped in $.ajax().  

My understanding is that, since the oData call is wrapped in $.ajax, which is supposed to be asynchronous by default,  the GET as well as the success/error callbacks should run asynchronously.  However, the browser freezes until my entire process completes, so it is not actually running asynchronously (but I need it to).  Can someone please point out what I am doing or assuming incorrectly?

onFieldChange:

function copyClientGroup() {    
  // do stuff like validate that id has a value   
  retrieveRecord(id, "lsuag_contactgroupSet", copyClientGroup_Success, copyClientGroup_Failed)
}

function retrieveRecord(id, odataSetName, successCallback, errorCallback) {
    if (!id) {    //id is required
        alert("record id is required.");
        return;
    }
    if (!odataSetName) { //odataSetName is required, i.e. "AccountSet"
        alert("odataSetName is required.");
        return;
    }

    //Asynchronous AJAX function to Retrieve a CRM record using OData
    $.ajax({
        type: "GET",
        contentType: "application/json; charset=utf-8",
        datatype: "json",
        url: serverUrl + ODATA_ENDPOINT + "/" + odataSetName + "(guid'" + id + "')",
        beforeSend: function (XMLHttpRequest) {
            //Specifying this header ensures that the results will be returned as JSON.             
            XMLHttpRequest.setRequestHeader("Accept", "application/json");
        },
        success: function (data, textStatus, XmlHttpRequest) {
            if (successCallback) {
                successCallback(data.d, textStatus, XmlHttpRequest);
            }
        },
        error: function (XmlHttpRequest, textStatus, errorThrown) {
            if (errorCallback)
                errorCallback(XmlHttpRequest, textStatus, errorThrown);
            else
                errorHandler(XmlHttpRequest, textStatus, errorThrown);
        }
    });
}

The success callback function has some additional server calls that take several seconds to run, so the wait time is really slow, when a background process would be sufficient.  What do I need to do differently?

Thanks,

Sarah

Answer 1

Try adding the async option to the ajax call:

    $.ajax({
        type: "GET",
        contentType: "application/json; charset=utf-8",
        async: true,
        datatype: "json",
        url: serverUrl + ODATA_ENDPOINT + "/" + odataSetName + "(guid'" + id + "')",
        beforeSend: function (XMLHttpRequest) {
            //Specifying this header ensures that the results will be returned as JSON.            
            XMLHttpRequest.setRequestHeader("Accept", "application/json");
        },
        success: function (data, textStatus, XmlHttpRequest) {
            if (successCallback) {
                successCallback(data.d, textStatus, XmlHttpRequest);
            }
        },
        error: function (XmlHttpRequest, textStatus, errorThrown) {
            if (errorCallback)
                errorCallback(XmlHttpRequest, textStatus, errorThrown);
            else
                errorHandler(XmlHttpRequest, textStatus, errorThrown);
        }
    });

---

Brian http://www.netrisoft.net

Answer 2

Thanks, Brian,

That doesn't make a difference :(