Why does my jquery.ajax() not fire success or error?

Question

I have been staring at this for 6 hours. I don't understand.

$.ajax({
    url: "http://www.band.dev:8888/datafeeder/hello_world",
    success: function( data ) {
        alert (data);
    },
    error: function(request, status, error) {
        alert(status + ' - ' + error);
    }
});

I'm running MAMP locally, and when I hit the URL directly it echos 'hello world', no problem. When I run this, I get a dialog box with 'error - '. I've tried adding dataType:'html' in there, no help. Thoughts?

-- EDIT --

So this is my ACTUAL problem. When I run this, neither success nor error are fired, and I can see that the JSON is correct when I hit the URL directly. (BTW, the relative url fix worked for the above bit of code.)

$( "#member_type" ).autocomplete({
        source: function( request, response ) {
            $.ajax({
                url: "/datafeeder/get_member_types/json",
                dataType: "jsonp",
                data: {
                    //maxNum: 12,
                    searchString: request.term
                },
                search: function(event, ui) {
                    alert('searching');
                },
                success: function( data ) {
                    alert (data);
                    response( $.map( data, function( item ) {
                        return {
                            label: item.type,
                            value: item.id
                        }
                    }));
                },
                error: function( request, status, error) {
                    alert (status + ' - ' + error);
                }
            });
        }
});

score 2 · Answer 1 · answered Sep 08 '11 at 21:46

2

You are probably hitting the same origin policy restriction which forbids you from sending AJAX requests to different domains than the one hosting your script. The best way to ensure that you are not violating this policy is to use relative urls for your AJAX calls:

$.ajax({
    url: "/datafeeder/hello_world",
    success: function( data ) {
        alert (data);
    },
    error: function(request, status, error) {
        alert(status + ' - ' + error);
    }
});

For this AJAX request to work, the HTML page hosting the this javascript must be hosted on http://www.band.dev:8888.

answered Sep 08 '11 at 21:46

Darin Dimitrov

1,023,142
271
3,287
2,928

I thought about that because my original background was in Flash development, and crossdomain policies are so necessary and common. But with this, I saw http://jqueryui.com/demos/autocomplete/#remote-jsonp for autocomplete inputs and they are pulling from a script hosted externally. Is this just because of the JSONP format they are returning? – Tim Sep 08 '11 at 21:50
@Tim, for JSONP to work your server must return JSONP, not `'hello world'`. A JSONP looks might look like this `someCallback({ value: 'hello world' })` where of course you could personalize the name of `someCallback` by passing it as request parameter. – Darin Dimitrov Sep 08 '11 at 21:53
http://stackoverflow.com/questions/2887209/what-are-the-differences-between-json-and-jsonp/2887218#2887218 this may help to understand the difference – Rafay Sep 08 '11 at 21:54
You may want to go to the jQuery website, select "How jQuery works." Read that first section. The reason is b/c you may need to insert your code inside the elusive $(document).ready(function() { .... }); // insert your code in the dots – RetroCoder Sep 10 '11 at 01:26
It was already in the ready() function. I know the database is properly returning the JSON object, I can see it when I hit the url directly. When I use the Chrome debugger, it says that the information is being returned as text/html instead of JSON. I've read elsewhere that I might need to config my Apache mimeTypes to handle JSON, but as far as I can tell this is already done (application/x-javascript, application/json). Other thoughts? – Tim Sep 10 '11 at 19:48

Why does my jquery.ajax() not fire success or error?

1 Answers1