7

The following is the HTML containing the call to the JavaScript function responsible for issuing the AJAX call. I understand that anchor tags are not supposed to have a value attribute but I'm using it with jQuery's .attr("value") method.

<a href="javascript:;" onclick="ajaxTest();" title="Execute AJAX" value="executeAJAX">Execute AJAX</a>

The following is the JavaScript function. If it is of any significance, it is contained in a .js file all by itself.

function ajaxTest() {
    $.ajax({
        type: "POST",
        url: "doAJAX",
        data: {"selectedScope": "5",
               "selectedView": "6"},
        dataType: "text",
        success: function(responseData) {
            $("#replaceThis").append(responseData);
        }
    });
}

Everytime the link is clicked, a "syntax error" message appears in Firefox's web console. The JavaScript seems to be working as intended, however.

I just want to understand why I am getting the error.

I should add that I'm using jQuery 1.7.1.

I've performed a search and the only resolution I've found was that the keys for the "data" option should be enclosed in double quotes so I've implemented that but I'm still getting the syntax.

Thanks.

EDIT:

Looking at the Firebug console, the code above doesn't trigger an error like it did in Firefox's console, however, I saw the following in the XML part of the POST Request:

XML Parsing Error: syntax error Location: moz-nullprincipal:{1d13df07-25fb-4058-9f82-ce1bef3c8949} Line Number 1, Column 1:
alskdfjlaksjdfjasdfl
^

The "alskdfjlaksjdfjasdfl" is simply what I've set up my servlet to return as I test this stuff out.

This is somewhat weird because it seems like jQuery is trying to parse the response as XML although I've explicitly stated it to be text.

2
  • It doesn't look like you're closing the data object. data: {"selectedScope": "5", "selectedView": "6", <-- needs to have a } before the last comma
    – Jemaclus
    Commented Dec 1, 2011 at 21:23
  • Having the same problem, firefox ajax tries to parse the text data.
    – Fantastory
    Commented Sep 26, 2013 at 10:47

6 Answers 6

16

I recently encountered the same issue. jQuery appeared to be handling the data and the dataType correctly, but instead it was Firefox returning the syntax error, which explains why your code was executing as intended but still printing an error to the console.

If you look in the developer console, you can see that Firefox is interpreting the plain text data as another format (likely XML). Firefox tires to parse the data as XML, but can't because it's not valid XML which results in "Syntax error" being printed to the console.

The resolution to this problem for me was editing the server so it returned the below header:

Content-Type: "text/plain"

This only appeared to be an issue with Firefox, Chrome did not encounter this issue. There is a Firefox bug here which seems to touch on the issue.

8
function ajaxTest() {
    $.ajax({
        type: "POST",
        url: "doAJAX",
        data: {"selectedScope": "5",
               "selectedView": "6"          <---- here (drop comma, add bracket)
               },
        dataType: "text",
        success: function(responseData) {
            $("#replaceThis").append(responseData);
        }
    });
}
7
  • 1
    Sometimes you just need fresh eyeballs. Commented Dec 1, 2011 at 21:26
  • 1
    Thanks for the quick response! Sorry, that was just a copy-and-paste error. I've fixed the bracket in my original question and it's still triggering a syntax error.
    – Deity
    Commented Dec 1, 2011 at 21:37
  • Your URL looks a little funny "doAJAX", not doAjax? Commented Dec 1, 2011 at 21:41
  • Ah, I'm using JSPs so that's just the name of the servlet for handling AJAX requests.
    – Deity
    Commented Dec 1, 2011 at 21:47
  • That should be the actual URL, unless it's simply /doAJAX. Dunno. Commented Dec 1, 2011 at 21:50
2
function ajaxTest() {
    $.ajax({
        type: "POST",
        url: "doAJAX",
        data: {
            "selectedScope": "5",
            "selectedView": "6"
        }, // <-- need closing curly brace and comma
        dataType: "text",
        success: function(responseData) {
            $("#replaceThis").append(responseData);
        }
    });
}

EDIT

I got it working here on jsFiddle.

Additionally, try changing

<a href="javascript:;" ... 

to

<a href="javascript:void();"...`

EDIT 2

I got it working an alternative way as well. (using Firefox 8.0.1 and Jquery 1.7.1)

See it in action here.

6
  • Thanks for the quick response! Sorry, that was just a copy-and-paste error. I've fixed the bracket in my original question and it's still triggering a syntax error.
    – Deity
    Commented Dec 1, 2011 at 21:37
  • Thanks. I'll go ahead and try that. I've also updated the question with further information to see if that helps.
    – Deity
    Commented Dec 1, 2011 at 21:59
  • Maybe try changing dataType: "text" to dataType: "text/html" too.
    – Yes Barry
    Commented Dec 1, 2011 at 22:01
  • Weirdly enough, changing the dataType to "text/html" would cause the append to fail.
    – Deity
    Commented Dec 1, 2011 at 22:05
  • The "syntax error" message is still showing up in the Firefox console. The weird thing is that it's not even showing in the Firebug console. I think at this point, I might just go ahead and chalk it up to the fact that I'm sending back gibberish as my response. Hopefully, when I switch to sending back meaningful XML or JSON data, this won't be too much of a problem. Thanks for sticking with me, though!
    – Deity
    Commented Dec 1, 2011 at 22:20
2

It's your data-object that is the problem, you are missing a trailing }

Edit:

Not sure if its the problem, but I think you can skip the quotation around your keys in the data-object (and around the values as well if you only intend to send numbers, keep them if you intend to send strings for instance):

Edit 2:

According to jQuery documentation, .append() expects a DOM element, HTML string, or jQuery object. Thus, I've created a DOM text-node of your response, and append that instead of just the text string. Note that the edit is untested.

function ajaxTest() {
    $.ajax({
        type: "POST",
        url: "doAJAX",
        data: {
           selectedScope: 5,
           selectedView: 6
        },
        dataType: "text",
        success: function(responseData) {
            $("#replaceThis").append(document.createTextNode(responseData));
        }
    });
}
3
  • Thanks for the quick response! Sorry, that was just a copy-and-paste error. I've fixed the bracket in my original question and it's still triggering a syntax error.
    – Deity
    Commented Dec 1, 2011 at 21:39
  • Thanks. I've updated my question with further information to see if it'll help narrow down the problem.
    – Deity
    Commented Dec 1, 2011 at 21:56
  • Thanks. I tried this out and the "syntax error" message is still appearing. I can even replace the whole line with alert("Success!"); and it'll still trigger the error (only in Firefox's console though).
    – Deity
    Commented Dec 1, 2011 at 22:25
1

That's because you forgot to put a } on the data parameter. Try this:

function ajaxTest() {
    $.ajax({
        type: "POST",
        url: "doAJAX",
        data: {"selectedScope": "5",
               "selectedView": "6"},
        dataType: "text",
        success: function(responseData) {
            $("#replaceThis").append(responseData);
        }
    });
}

One recommendation: When you have issues like this. Use the Google Closure Compiler Service. It will tell you exactly where your problem is. Or Firebug, if you use Firefox.

1
  • Thanks for the quick response! Sorry, that was just a copy-and-paste error. I've fixed the bracket in my original question and it's still triggering a syntax error. I will check out Google's Closure Compiler Service though.
    – Deity
    Commented Dec 1, 2011 at 21:38
0
function ajaxTest() {
    $.ajax({
        type: "POST",
        url: "doAJAX",
        dataType: "html",
        data:{
               "selectedScope": "5",
               "selectedView": "6"
         },
        success: function(responseData) {
            $("#replaceThis").append(responseData);
        }
    });
}

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.