Question

A little background:

I am trying to implement and AJAX powered SlickGrid. There isn’t much documentation so I used this example as a base.

In this example there is the following code that hits the desired web service to get the data:

req = $.jsonp({
                    url: url,
                    callbackParameter: "callback",
                    cache: true, // Digg doesn't accept the autogenerated cachebuster param
                    success: onSuccess,
                    error: function(){
                        onError(fromPage, toPage)
                    }
                    });
                req.fromPage = fromPage;
                req.toPage = toPage;

I’m not exactly sure what jsonp does but from what i’ve read it appears to be very similar to the ajax method in jQuery except it returns json and allows cross domain requests. The webservice that I happen to be calling only returns XML so I changed this chunk of code to:

req = $.ajax({
                url: "/_vti_bin/lists.asmx",
                type: "POST",
                dataType: "xml",
                data: xmlData,
                complete: onSuccess,
                error: function (xhr, ajaxOptions, thrownError) {
                    alert("error: " + xhr.statusText);
                    alert(thrownError);
                },
                contentType: "text/xml; charset=\"utf-8\""
            });
            req.fromPage = fromPage;
        req.toPage = toPage;

My issue is that my page errors out at req.fromPage = fromPage; because req is null.

Am I wrong to think that I can just replace my jsonp call with a call to the ajax method? Is req just not set because my ajax call hasn’t finished by the time that code is executed? How can I get around either of these issues?

If I comment out the last two lines and hard-code those values elsewhere everything runs fine.

Answer 1

Am I wrong to think that I can just replace my jsonp call with a call to the ajax method?

No, that should work just fine.

Is req just not set because my ajax call hasn’t finished by the time that code is executed?

Yes, that is correct.

The ajax methods starts the request and returns immediately. If you want to do something after the response has arrived you should do that in the success event handler.

You might actually want to use the success event instead of the complete event, as the complete event happens even if there is an error.

You could specify async: false, in your settings to make the ajax call wait for the response, but that means that the browser freezes while it’s waiting.