$.holdReady is having no affect on $(document).ready()

Question

How do I use holdReady along with doc ready? I need to make sure that holdReady gets fired before doc.ready, I am trying below but no luck as loadTab3() is still getting fired before storeContentList?

$.holdReady(true);

tab3Data = storeContentList('getArticleTypelistById', 'atid', '88', '5', '123');

$.holdReady(false);

$(document).ready(function () {
   //  tab3Data gets used in loadTab3 function below.
   loadTab3();
});


 function storeContentList(webServiceName, parameterName, parameterValue, noOfItems, IDstoExclude) {
        var inputParameters = webServiceName.toLowerCase() + ':' + parameterName.toLowerCase() + ':' + parameterValue + ':noofitems:' + noOfItems + ':excludeids:' + IDstoExclude;
        var clientcode = getCryptoToken(inputParameters);
        eval("data={" + parameterName.toLowerCase() + ":" + parameterValue + ", noofitems:" + noOfItems + ", excludeids:'" + IDstoExclude + "',clientcode:'" + clientcode + "' }");
        $.ajax({
            url: 'https://abc/Service.svc/' + webServiceName,
            dataType: 'jsonp',
            async: false,
            data: data,
            success: function (data) {
                //tab3Data = JSON.stringify(data);
                tab3Data = data;
                console.log('tab3Data in storeContentList function:' + tab3Data);
                return data;
            },
            error: function (data) {
                console.log('err occured');
            }
        });
    }

What do you mean by "holdready gets fired"? `holdready` is not an event. — Barmar, May 08 '14 at 10:35
loadTab3() is still getting fired before streContentList method. — user3045352, May 08 '14 at 10:35
@user3045352: Given your code snippet, that is absolutely impossible. Is `storeContentList` asynchronous (AJAX?) by any chance? If so, you need to move `$.holdReady(false)` into the asynchronous callback. — Matt, May 08 '14 at 10:36
@user3045352: in which case, like I said, you need to move `$.holdReady(false)` into the callback for the AJAX request. If you edit your question to include the body of `storeContentList`, we can show you exactly where to put it. — Matt, May 08 '14 at 10:38
possible duplicate of [How to return the response from an AJAX call?](http://stackoverflow.com/questions/14220321/how-to-return-the-response-from-an-ajax-call) — Liam, May 08 '14 at 10:43
ajax is asynchronous. You shouldn't release the hold until ajax has completed. — Liam, May 08 '14 at 10:44

score 0 · Answer 1 · edited Jun 20 '20 at 09:12

Don't use `async: false` as an AJAX option.

... never. ever. Synchronous AJAX requests are bad. They lock up the browser. There is hardly ever a reason to use them. Avoid them at all costs. I cannot emphasise this enough.

I discuss it in detail here, but the TL;DR is that JSONP, as a transport, does not support synchronous requests.

The ideal solution would be to do away with $.holdReady completely, and embrace the asynchronous nature of AJAX. Basically, your async: false option is being ignored, and the AJAX request is happening asyncronously.

$(document).ready(function () {
    storeContentList();
});


 function storeContentList(webServiceName, parameterName, parameterValue, noOfItems, IDstoExclude) {
        var inputParameters = webServiceName.toLowerCase() + ':' + parameterName.toLowerCase() + ':' + parameterValue + ':noofitems:' + noOfItems + ':excludeids:' + IDstoExclude;
        var clientcode = getCryptoToken(inputParameters);
        eval("data={" + parameterName.toLowerCase() + ":" + parameterValue + ", noofitems:" + noOfItems + ", excludeids:'" + IDstoExclude + "',clientcode:'" + clientcode + "' }");
        $.ajax({
            url: 'https://abc/Service.svc/' + webServiceName,
            dataType: 'jsonp',
            data: data,
            success: function (data) {
                loadTab3(data); // Now pass data as an parameter to `loadTab3`; modify your code accordingly.
            },
            error: function (data) {
                console.log('err occured');
            }
        });
    }

Then change your declaration of loadTab3 from function loadTab3() to function loadTab3(tab3Data).

However, as you need to persist the response in a variable, the easiest (and most transparent way for the rest of your application) to do this would be to continue to use $.holdReady like so;

$.holdReady(true);

var tab3Data;

storeContentList('getArticleTypelistById', 'atid', '88', '5', '123');

$(document).ready(function () {
   //  tab3Data gets used in loadTab3 function below.
   loadTab3();
});


 function storeContentList(webServiceName, parameterName, parameterValue, noOfItems, IDstoExclude) {
        var inputParameters = webServiceName.toLowerCase() + ':' + parameterName.toLowerCase() + ':' + parameterValue + ':noofitems:' + noOfItems + ':excludeids:' + IDstoExclude;
        var clientcode = getCryptoToken(inputParameters);
        eval("data={" + parameterName.toLowerCase() + ":" + parameterValue + ", noofitems:" + noOfItems + ", excludeids:'" + IDstoExclude + "',clientcode:'" + clientcode + "' }");
        $.ajax({
            url: 'https://abc/Service.svc/' + webServiceName,
            dataType: 'jsonp',
            data: data,
            success: function (data) {
                tab3Data = data;

                $.holdReady(false);
            },
            error: function (data) {
                console.log('err occured');
            }
        });
    }

But i do need to store the data in a variable and get it out from "Ajax Success" so that i can re use it. is there a way? — user3045352, May 08 '14 at 11:16

$.holdReady is having no affect on $(document).ready()

1 Answers1

Don't use async: false as an AJAX option.

Don't use `async: false` as an AJAX option.