Question

I am using jQuery-1.4.2 with CakePHP and a few days ago I had this working fine but now it isn’t. I don’t remember changing anything. I am taking the URL generated from the javascript and putting that directly into the browser and I am able to see the results in my browser however javascript is just getting a return value of null. Anyone have ides?

<script type="text/javascript">
    $(document).ready(function() {
        var url = "http://mysite.com/vote/";

        $.get(url + "view/" + $(".votediv").attr("id")  +".json" ,
                function(data,textStatus, XMLHttpRequest) {
                    console.log(data);
                    console.log(textStatus);
                    console.log(XMLHttpRequest);
                    if(data.Votes.votecast != undefined) {

                        $(".vote."+data.Votes.votecast).addClass("current");
                    }
                },"json");
        $('.vote').click(function () {
            if ($(this).hasClass("current")) {
                alert("You have already voted for this option!");
            } else {

                var error = false;

                if ($(this).hasClass("up")) {

                    $.post(url + "edit/" + $(".votediv").attr("id")  +".json", {'vote': 'up'},
                        function(data) {
                            console.log(data);
                        }, "json");
                    //alert("Voted Up!");
                }
                else if($(this).hasClass("down")) {
                    $.post(url + "edit/" + $(".votediv").attr("id")  +".json", {'vote': 'down'},
                        function(data) {
                            console.log(data);
                        }, "json");
                    //alert("Voted Down!");
                }
                //removes all the votes
                $(this).parent().children().removeClass("current");

                if(!error) {
                    $(this).addClass("current");
                } else {
                    alert("There was an error");
                }
            }
            return false;
        });
    });
</script>

Output from debug console in browser is

null
success

XMLHttpRequest
    abort: function () {x&&h.call(x);
    onabort: null
    onerror: null
    onload: null
    onloadstart: null
    onprogress: null
    onreadystatechange: function () {}
    readyState: 4
    responseText: ""
    responseXML: null
    status: 0
    statusText: ""
    upload: XMLHttpRequestUpload
    withCredentials: false
    __proto__: XMLHttpRequestPrototype

TypeError: Result of expression 'data' [null] is not an object.
Failed to load resource: cancelled

The output my php script does is

{"Votes":{"votecast":"up","sumvotes":"1","totalvotes":"1"}}

I’m wondering why I keep getting null data. Any ideas? I am not doing a cross domain query. I am only querying a script on my domain.

EDIT:

I have changed the JSON output to display as {"Votes":{"votecast":"up","sumvotes":"1","totalvotes":"1"}} and jsonlint.com says it is valid JSON however it still does not work and jQuery says the result is null.

Answer 1

I see that you are specifying the URL in the start of your script:

var url = "http://mysite.com/vote/";

Could it be that your are violating the same origin policy? Ie. that you can only do ajax calls to the originating server.

That would give you the symptoms you describe: a blank response, but the URL works when tried manually through the browser.