Question

This works fine:

            $.getJSON("http://localhost:59396/xxxWeb/
CarouselHandler.ashx?action=getproducts&ids=" + ids,
                function(data) {

                    carousel.size(allProductIDs.length);

                    if (numberOfImagesLeftToShow <
numberOfImagesToDisplay) {
                        first += (numberOfImagesToDisplay -
numberOfImagesLeftToShow);
                    }

                    var d = 0;
                    for (var i = first; i <= last; i++) {

                        if (d != undefined) {
                            // add data using index of the array
returned by JSON (which starts at 0)
                            carousel.add(i, decode(data[d].ImageTag));
                        }

                        // set to last ProductID showing in Carousel
                        if (i == last) { lastProductID = parseFloat
(data[d].ProductID); }

                        d++;
                    }
                }
            );

This does not work, I get no pictures rendered after trying to add the
&format=json&jsoncallback=? :

            $.getJSON("http://localhost:59396/xxxWeb/
CarouselHandler.ashx?action=getproducts&ids=" + ids +
"&format=json&jsoncallback=?",
                function(data) {

                    carousel.size(allProductIDs.length);

                    if (numberOfImagesLeftToShow <
numberOfImagesToDisplay) {
                        first += (numberOfImagesToDisplay -
numberOfImagesLeftToShow);
                    }

                    var d = 0;
                    for (var i = first; i <= last; i++) {

                        if (d != undefined) {
                            // add data using index of the array
returned by JSON (which starts at 0)
                            carousel.add(i, decode(data[d].ImageTag));
                        }

                        // set to last ProductID showing in Carousel
                        if (i == last) { lastProductID = parseFloat
(data[d].ProductID); }

                        d++;
                    }
                }
            );

Same for here, calling to our dev server.

$.getJSON("http://xxxdev/xxx/CarouselHandler.ashx?
action=getproducts&ids=" + ids + "&format=json&jsoncallback=?",
                function(data) {

No idea why. No errors, nothing. The data received back is no different then the first example when I was calling localhost. So it’s valid JSON, that’s not the issue here. It’s that my function(data) is not being fired when I intruduce the querystring param. Without it, it works fine and function(data) is called.

Adding a “&jsoncallback=?” or “&callback=?” got rid of the Access to
restricted URI denied” code: “1012 but I get no data showing in my
plug-in when adding either of those querystring params to my url. So
I don’t get it. I thought that it’s supposed to automatically
replace ? with function(data) in my case?? Do I need to send
something back in the response or something?? I ask because certain
APIs such as yahoo require an _ in front. But so does this mean I
also need to supply something in my json response? I thought all you
need to do is just add the callback param in your request.

Answer 1

Your service needs to support jsonp which means the response has to be wrapped inside the callback key to represent a javascript function that the client executes.

As a summary, if your server responds with this at present

 { "x": 10, "y": 15} 

to support jsonp it needs to respond with

callbackFunction( { "x": 10, "y": 15} )

where callbackFunction is the name specified in the querystring.

See my answer here for more info