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.

Answer 1

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.

Answer 2

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

Answer 3

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

Answer 4

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.

Answer 5

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.

Answer 6

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