tags:

views:

179

answers:

3
Q: 

jQuery $.get not returning data anymore

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.

A: 

I'm not sure why it's not returning data, but you might want to make sure the url $.get is going to is the one you think it is. You could use alert(url + "view/" + $(".votediv").attr("id") +".json"); for example - of course you can also see that in Firebug.

I believe $.get can sometimes return a status of 'success' even if it's not actually loading a url.

Alex King  2010-10-02 02:09:06
I have stated in my above post that I have already confirmed the url is correct by outputting the url and testing it manually.
jostster  2010-10-04 16:34:01
A: 

The square brackets enclosing the JSON would give jQuery some trouble. To prove it, I used the following HTML file and two PHP test case files.


<!DOCTYPE html>
<html>
<head>
<title>SO</title>
<script
  type="text/javascript"
  src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"&gt;
</script>
</head>
<body>
Output: <span id="output"></span>
<script type="text/javascript">
$.get(
  "/SO.php",
  function(data){
    $('#output').html(data.Votes.votecast);
  },
  "json"
);

</script>
</body>
</html>

First Case PHP [FAILS, no value shown in span. id="output"]


<?php
echo '[{"Votes":{"votecast":"up","sumvotes":"1","totalvotes":"1"}}]';

Second Case PHP [PASSES, value "up" shown in span, id="output"]


<?php
echo '{"Votes":{"votecast":"up","sumvotes":"1","totalvotes":"1"}}';
jtp  2010-10-02 02:10:40
@jtpresta I have changed the output to `{"Votes":{"sumvotes":"1","totalvotes":"1","votecast":"up"}}` and am still getting the same null issue.
jostster  2010-10-04 16:43:11
fyi jsonlint.com shows that [{"Votes":{"votecast":"up","sumvotes":"1","totalvotes":"1"}}] is proper json as well.
jostster  2010-10-04 21:31:02
@jostster - Awesome. Thank you for the heads up; I did not know about jsonlint.com. That's one of the great things about StackOverflow: everyone benefits. Glad you solved the issue!
jtp  2010-10-05 04:21:10
+1  A: 

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.

Magnar  2010-10-04 18:33:56
As mentioned in my question I have stated that I am querying a script on my server and not doing any cross domain query.
jostster  2010-10-05 16:04:38
@Magnar it looks like you are right. It turns out if I use www in my browser since I don't have www specified in my jQuery url it causes that issue. Why would www violate the same origin policy? Is there a jQuery function to get the browsers base url so I can use that?
jostster  2010-10-07 16:55:52
Same origin triggers on different subdomains as well. You can use relative URLs, just go to "/vote/".
Magnar  2010-10-07 19:21:20

related questions

Communicating between websites (using Javascript or ?)
Javascript Unit-testing?
How can I return a variable from a $.getJSON function
Is there an "exists" function for jQuery
Why do I receive a q[num] error when aborting a jQuery queue pipeline?
How do I fire an event when a iframe has finished loading in jQuery?
How to compare html entity with JQuery
Problems while submitting a UTF-8 form textarea with JQuery/AJAX
How do I get the coordinates of the caret in text boxes?
SimpleModal breaks ASP.Net Postbacks
How would you handle errors when using jQuery.ajax() ?
Where is the best jQuery "plugins" library on the web?
Where can I learn jQuery? Is it worth it?
Keeping key value pairs together in HTML <select/> with JQuery?
How to set encoding in .getJSON JQuery
What is a selector engine?
Escaping HTML strings with jQuery
jQuery AJAX vs. UpdatePanel
What's the best way to code a desktop application-like menu bar in Javascript?
Dynamic Alphabetical Navigation
Scrolling Overflowed DIVs with JavaScript
How do I add a pre tag inside a code tag with jQuery?
Graph visualization code in javascript?
Wrapping lists into columns
Interview Questions for an Intern