jquery plugin cannot get getJSON working

Question

( function( $ ) {                

    function CleanQueryString( query )
    {
        return encodeURI( query ); 
    };

    function ConcatData( settings )
    {                               
        settings.concatUrl = settings.googleUrl;
        settings.concatUrl = settings.concatUrl.replace( "{key}", settings.googleApiKey );
        settings.concatUrl = settings.concatUrl.replace( "{country}", settings.country );     
        settings.concatUrl = settings.concatUrl.replace( "{query}", settings.cleanQuery );  
    };

    $.fn.GoogleSearchResult = function( options ) {  

        var settings = $.extend( {
            query: null,
            googleApiKey: "myapikey",
            googleUrl: "https://www.googleapis.com/shopping/search/v1/public/products?key={key}&country={country}&q={query}&alt=json",
            concatUrl: "",
            country: "UK",
            cleanQuery: ""
        }, options);

        return this.each( function() {  
            if( settings.query )
            {   
                var $t = $(this);

                settings.cleanQuery = CleanQueryString( settings.query );
                ConcatData( settings );    
                alert( settings.concatUrl ); // This alerts the correct url and I've checked that it returns json

                $.getJSON( settings.concatUrl, function( data ) {  
                    alert("hi"); // This never alerts                    
                    $t.html( data );                
                });
            }

            return false;    
        } );     
    };  
} )( jQuery );

I can't get my $.getJSON to work.. any ideas why that might not be returning anything:

https://developers.google.com/shopping-search/v1/getting_started

The url I send returns the correct data when I go straight to it.

Are you attempting to access JSON on a different server? If so, you need to load it on your own server using some kind of server-side script, and access *that* using `.getJSON`. [Google Shopping Search doesn't appear to offer JSON-P](https://developers.google.com/shopping-search/v1/getting_started) — Blazemonger, Feb 13 '13 at 14:24
Chain `.error(function(xhr, status, error) { alert("error: " + status +" " + error); })` that on to it, and see what the error message is — nbrooks, Feb 13 '13 at 14:25
yea, im using google search results api to get a result: https://developers.google.com/shopping-search/v1/getting_started — Jimmyt1988, Feb 13 '13 at 14:25
@JamesT Well, [that answers that](http://stackoverflow.com/q/5241088/901048). — Blazemonger, Feb 13 '13 at 14:27
That means that the error is because of the [same origin policy](http://en.wikipedia.org/wiki/Same_origin_policy) so you need to wrap your data as jsonp, as someone said — nbrooks, Feb 13 '13 at 14:27
Ahh it's coz im running it from my localhost.. I'll check that jsonp out. — Jimmyt1988, Feb 13 '13 at 14:28
jQuery.support.cors = true; Seemed to answer the question. Thanks buddy — Jimmyt1988, Feb 13 '13 at 14:37
This won't fix your problem of cross-domain but FWIW, here is a version I've come up with to simplify your code and gain a little performance. It also provides a debug option, and uses `$.ajax` instead of the shortcut `$.getJSON` so that an error method can be used (lack of error method is part of what took you so long to discover the issue). http://pastie.org/private/c0l8fyf0aqn4o4pvrjjwsg — JAAulde, Feb 13 '13 at 14:41

score 1 · Answer 1 · edited May 23 '17 at 10:24

1

Are you attempting to access JSON on a different server? If so, you need to load it on your own server using some kind of server-side script, and access that using .getJSON. Google Shopping Search doesn't appear to offer JSON-P.

If you can write a PHP page or some other server-side language, it's trivial to get and return the external JSON, which will now be on your own server and can be easily loaded using .getJSON.

edited May 23 '17 at 10:24

Community

1
1

answered Feb 13 '13 at 14:31

Blazemonger

90,923
26
142
180

It does support JSONP, though it doesn't say on that page. – nbrooks Feb 13 '13 at 14:36
jQuery.support.cors = true; This was the answer – Jimmyt1988 Feb 13 '13 at 14:37

score 0 · Answer 2 · answered Feb 13 '13 at 14:33

jQuery.support.cors = true;
$.getJSON( settings.concatUrl, function( data ) {  
    alert(data);                    
    $t.html( data );                
}).error(function(xhr, status, error) { alert("error" + status +" " + error); }) ;

Jquery cross domain support can be enabled with this setting.

score 0 · Answer 3 · answered Feb 13 '13 at 14:36

You need to use JSONP to transfer data from an external source. The Google API supports this, so in terms of your code, this is as simple as appending &callback=xyz to your url, where xyz is some function that the external server will wrap your code in.

https://www.googleapis.com/shopping/search/v1/public/products?key={key}&country={country}&q={query}&alt=json&callback=xyz

jQuery automatically looks for a callback named ?, so you can either use callback=? or specify a custom name by adding jsonp: xyz to your AJAX request params.

jquery plugin cannot get getJSON working

3 Answers3