jQuery getJSON won't work on live url

Question

Possible Duplicate:
JSONP request: “Resource interpreted as Script but transferred with MIME type text/html”

Anyone can let me know what am I doing wrong here will be appreciated.

This is the code with json file on local URL / localhost. And this work with no problem

(function() {
    var json_url = 'http://localhost:8888/MOD/some-folder/app/mysql-to-json.php?page=index';

    $.getJSON(json_url, function(data){
        $.each(data, function(i, item) {
            $('#state-list').append('<li><a href="display.html?state=' + item.d_state  + '" data-transition="slide" rel="external">' + see_abbrv(item.d_state) + '</a></li>');
        });
        $('#state-list').listview('refresh'); 
    });
}) ();

But when I do this, and I just updated the json_url to live url from json_url from localhost.

The data won't show up. And there is warning when I tried to inspect page:

Resource interpreted as Script but transferred with MIME type text/html: "http://www.live-server.com/app/mysql-to-json.php?page=index&callback=jQuery18201751285600475967_1360047415705&_=1360047415772".

updated code with live url:

(function() {
    var json_url = 'http://www.live-server.com/app/mysql-to-json.php?page=index&callback=?';

    $.getJSON(json_url, function(data){
        $.each(data, function(i, item) {
            $('#state-list').append('<li><a href="display.html?state=' + item.d_state  + '" data-transition="slide" rel="external">' + see_abbrv(item.d_state) + '</a></li>');
        });
        $('#state-list').listview('refresh'); 
    });
}) ();

On the local code you did an ajax json call but on the live code you did a jsonp call which is totally different. — Musa, Feb 05 '13 at 07:09
Does the resource/path reside in your current application? In that case you should use relative path. — Sang Suantak, Feb 05 '13 at 07:14
Not sure if it's the only cause, but if you have control of the server you should set the mime type of the response to "application/javascript" for jsonp requests. Are you sure that url actually returns jsonp? Apparently if jQuery sees ?callback in the url it automatically treats the request as jsonp. — mockaroodev, Feb 05 '13 at 07:18
Here my URL http://www.charmchasers.com/app/mysql-to-json.php?page=index — Aditya Prakarsa, Feb 05 '13 at 07:21
Content-Type text/html try setting it to applicatio/json as suggested in my answer — HMR, Feb 05 '13 at 07:23
Have a look at this: http://stackoverflow.com/questions/11736431/make-cross-domain-ajax-jsonp-request-with-jquery/11736771#11736771 — Abdul Munim, Feb 05 '13 at 07:25
relative path would be: /app/mysql-to-json.php?page=index path starting with / is from root (http://www.charmchasers.com). That is assuming that your html file is located somewhere on http://www.charmchasers.com — HMR, Feb 05 '13 at 07:26

HMR · Accepted Answer · 2013-02-05T09:25:21.180

1

OP needed cross origin script and was almost there, we changed the PHP file to generate JSONP:

header('contentType: application/javascript');
print $_GET["callback"]."(". json_encode($rows) .");";

And changed the JavaScript back to include the parameter "&callback=?"

(function() {
    var json_url 
        = 'http://www.live-server.com/app/mysql-to-json.php?"
            +"page=index&callback=?';
    $.getJSON(json_url, function(data){
        $.each(data, function(i, item) {
            $('#state-list').append('<li><a href="display.html?state=' 
                + item.d_state  
                + '" data-transition="slide" rel="external">' 
                + see_abbrv(item.d_state) + '</a></li>');
        });
        $('#state-list').listview('refresh'); 
    });
}) ();

edited Feb 05 '13 at 09:25

answered Feb 05 '13 at 07:21

HMR

37,593
24
91
160

That get rid off the warning on page inspection, but the data still did not show up / still error. – Aditya Prakarsa Feb 05 '13 at 07:30
this error.. "Resource interpreted as Script but transferred with MIME type text/html: "http://www.live-server.com/app/mysql-to-json.php?page=index&callback=jQuery18201751285600475967_1360047415705&_=1360047415772"." – Aditya Prakarsa Feb 05 '13 at 07:35
yes.. – Aditya Prakarsa Feb 05 '13 at 07:37
It's not the script that needs to be there, it's the html or php page referring to the script. If you're using firefox you can use forcecors plugin to make xmlhttprequest to any site. After installing click on view=>toolbar=>add on bar. In the right bottom of your screen you can see "cors" when you click on that it should turn red. Now you can make xmlhttprequest from any site to any site. – HMR Feb 05 '13 at 07:41
I did add the header to php file, it is remove the warning, but the data still did not display or did not produce any output. – Aditya Prakarsa Feb 05 '13 at 07:48

score 0 · Answer 2 · answered Feb 05 '13 at 09:11

Add this on the header

header('Content-type: text/javascript');

and this on output generating json file if you use it and if it's on php.

print $_GET["callback"]."(". json_encode($rows) .")";

And this to the end of the url of json file

&callback=?

Thanks a million to MHR for resolving this problem.. Thanks a bunch bro.. :-)

jQuery getJSON won't work on live url

2 Answers2