JQuery.get Syntax Error

Question

I have been going crazy trying to figure this out. I have a PHP script that returns true/false with the header set to Content-Type: text/plain.

When I use a simple .get like this:

$.get("ip.php");

I can see the call and the data loaded in firebug.

However when I try to add more complexity I get "SyntaxError: syntaxerror". This is the jquery I am using:

var hello;
$.get('ip.php', function(data){
   hello = data;
   console.log(hello);
});

if (hello == "false") {
    $( "#status").removeclass("working").addClass("notworking");
    $(".stat").html("<li class="title">STATUS: NOT WORKING</li>");
} else {
    $(".stat").html("<li class="title">STATUS: WORKING</li>");
}

What am I doing wrong? Thanks in advance for your help.

Answer 1

That is because AJAX calls are asynchronous — the conditional statement is evaluated before jQuery actually received a response from the server and updated the hello variable.

Therefore, the solution is to move the conditional statement into the success callback of $.get() .

p/s: Also, you are not escaping the string in .html() properly. Either use \\" to escape double quotes, or use single quotes, ie ' .

var hello;
$.get('ip.php', function(data){
    hello = data;
    if (hello == "false") {
        $( "#status").removeclass("working").addClass("notworking");
        $(".stat").html("<li class=\"title\">STATUS: NOT WORKING</li>");
    } else {
        $(".stat").html("<li class=\"title\">STATUS: WORKING</li>");
    }
});

Even better: use deferred objects instead, like .done() , .fail() , .always() and etc (whenever you see fit). They offer better versatility and allows you to check for the status of the AJAX call anywhere in your code:

var ip = $.get('ip.php'); /* Make GET request */

/* Deferred object */
ip.done(function(data){
    if (data == "false") {
        $( "#status").removeclass("working").addClass("notworking");
        $(".stat").html("<li class=\"title\">STATUS: NOT WORKING</li>");
    } else {
        $(".stat").html("<li class=\"title\">STATUS: WORKING</li>");
    }
}).fail(function(jqXHR, textStatus, errorThrown){
    // Optional
    // console.log('.get failed ' + textStatus + ' ' + errorThrown);
}).always(function(){
    // Optional
    // console.log('$.get completed regardless of status');
});

Answer 2

While the other answer is correct, it is not the source of the error you are seeing. The error is coming from these lines:

    $(".stat").html("<li class="title">STATUS: NOT WORKING</li>");
} else {
    $(".stat").html("<li class="title">STATUS: WORKING</li>");

Note the syntax highlighting. You're trying to use quote marks inside a string, which actually ends the string. You can either escape them like this:

    $(".stat").html("<li class=\"title\">STATUS: NOT WORKING</li>");
} else {
    $(".stat").html("<li class=\"title\">STATUS: WORKING</li>");

Or use single-quotes instead of double-quotes somewhere:

    $(".stat").html('<li class="title">STATUS: NOT WORKING</li>');
} else {
    $(".stat").html('<li class="title">STATUS: WORKING</li>');