AJAX using jQuery - Syntax Error?

Question

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.

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
– Jemaclus, Commented Dec 1, 2011 at 21:23
Having the same problem, firefox ajax tries to parse the text data. — Fantastory
– Fantastory, Commented Sep 26, 2013 at 10:47

Adam · Accepted Answer · 2015-06-25 05:07:15Z

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.

answered Jun 25, 2015 at 5:07

Adam

4,7221 gold badge35 silver badges50 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Diodeus - James MacFarlane · Accepted Answer · 2011-12-01 21:24:03Z

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);
        }
    });
}

answered Dec 1, 2011 at 21:24

Diodeus - James MacFarlane

115k33 gold badges164 silver badges180 bronze badges

7 Comments

Diodeus - James MacFarlane Over a year ago

Sometimes you just need fresh eyeballs.

Deity Over a year ago

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.

Diodeus - James MacFarlane Over a year ago

Your URL looks a little funny "doAJAX", not doAjax?

Deity Over a year ago

Ah, I'm using JSPs so that's just the name of the servlet for handling AJAX requests.

Diodeus - James MacFarlane Over a year ago

That should be the actual URL, unless it's simply /doAJAX. Dunno.

|

Yes Barry · Accepted Answer · 2011-12-01 22:07:53Z

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.

edited Dec 1, 2011 at 22:07

answered Dec 1, 2011 at 21:25

Yes Barry

9,9465 gold badges54 silver badges77 bronze badges

6 Comments

Deity Over a year ago

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 Over a year ago

Thanks. I'll go ahead and try that. I've also updated the question with further information to see if that helps.

Yes Barry Over a year ago

Maybe try changing dataType: "text" to dataType: "text/html" too.

Deity Over a year ago

Weirdly enough, changing the dataType to "text/html" would cause the append to fail.

Deity Over a year ago

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!

|

Christofer Eliasson · Accepted Answer · 2011-12-01 22:19:33Z

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));
        }
    });
}

edited Dec 1, 2011 at 22:19

answered Dec 1, 2011 at 21:24

Christofer Eliasson

34k7 gold badges77 silver badges103 bronze badges

3 Comments

Deity Over a year ago

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 Over a year ago

Thanks. I've updated my question with further information to see if it'll help narrow down the problem.

Deity Over a year ago

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).

Icarus · Accepted Answer · 2011-12-01 21:32:01Z

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.

edited Dec 1, 2011 at 21:32

answered Dec 1, 2011 at 21:25

Icarus

64k14 gold badges102 silver badges116 bronze badges

1 Comment

Deity Over a year ago

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.

ahmed hamdy · Accepted Answer · 2013-04-01 23:52:22Z

0

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

edited Apr 1, 2013 at 23:52

answered Apr 1, 2013 at 23:45

ahmed hamdy

5,1891 gold badge50 silver badges60 bronze badges

Collectives™ on Stack Overflow

AJAX using jQuery - Syntax Error?

6 Answers 6

Comments

7 Comments

6 Comments

3 Comments

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

Comments

7 Comments

6 Comments

3 Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related