AJAX using jQuery - Syntax Error? - javascript

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.
Execute AJAX
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.

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.

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

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.

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

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.

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

Related

Jquery not passing any parameters data

My Code is as below for Javascript
$.ajax({
type: "POST",
url: "page/rSales.aspx",
data: { ListID: '1', ItemName: 'test' },
dataType: "json",
success: function (res) {
alert('Success');
},
error: function (res) {
alert('Fail');
}
});
I use http tracer tools to trace whether or not the parameter is passing on to my backend - and it is not. I have also tried adding contentType: 'application/json; charset=utf-8', adjust parameter by adding colon, but none of it is working.
My Backend code C# :
Request.Params["ListID"].ToString();
It always returns null, due to the parameter not passing on. I am wondering what is causing this problem and how should I resolve it.
The Request.Params collection does not support JSON requests, so you have to parse response body manually (or send it as form data).
https://msdn.microsoft.com/en-us/library/system.web.httprequest.params(v=vs.110).aspx says "Gets a combined collection of QueryString, Form, Cookies, and ServerVariables items."
For firefox you declare var event; before your ajax call this is very well known issue in firefox.

Script5007 error "object not found" only on Internet Explorer

When I first load a page I make an ajax call to bring some data for the client-side. The call is made to a different domain and the answer comes as JSONP. The call looks similar to:
$.ajax({
type: "GET",
url: url + "?callback=?",
dataType: "jsonp",
contentType: "application/javascript;charset=UTF-8",
async: true,
success: successCallback,
error: errorCallback,
cache: true,
jsonpCallback: jsonCB
});
'application/javascript' would be the possible culprit here as I did my research on the subject but this is present in a previous version of the code which never had this problem.
On all browsers except IE I receive the following error (sometimes, usually the first time and then the problem dissappears) :
script5007 object not found - line 1, char 1
The JSONP received looks like that:
func({"result":"abc"})
The param of the func is a valid JSON as I checked this using jslint.
Any idea will be highly appreciated! Thank you!
You're missing the object brackets { } inside your $.ajax function. Modify it like so:
$.ajax({
url:'',
contentType: 'application/javascript;charset=UTF-8',
crossDomain:true
......
});
The jQuery $.ajax method either takes a url parameter and an optional parameter of additional options specified as an object, or an object parameter including the url.

In IE8, $.parseJSON is returning undefined

This is the strangest bug I've encountered.
I submit an ajax POST that would retrieve some data.
$.ajax({
url: url,
data: data,
type: 'POST',
success: function(data){
console.log(data)
},
dataType: 'json',
contentType: 'application/json; charset=utf-8'
}
)
In other version of IE and Chrome, the code would work fine and give the value of data which is {"success": true}.
But in IE8, data would return undefined . However, if I do JSON.stringify(data) , it would return {"success":true}.
I tried to convert the returned string to object via $.parseJSON(JSON.stringify(data) but it returned undefined again.
What can I do to get the response data as an object like I would normally in other browser?
EDIT:!! Found the solution. Apparently, the IE8 emulation of IE11 is a total crap and cannot display data correctly. Using IE8 on a virtual machine would correctly display the data and I figured out why it was undefined. Thanks for the help!
Found the solution! Apparently, the IE8 emulation of IE11 is a total crap and cannot display data correctly. Using IE8 on a virtual machine would correctly display the data and I figured out why it was undefined. Thanks for the help!
I'm not sure that you need to do that in IE8. Here is some code that I use with success in IE8 on a website that is live that is using jQuery 1.10.2:
$.ajax({
type: "POST",
crossDomain: true,
url: 'http://example.com/service/url',
data: params,
dataType: 'json',
timeout: 10000
})
.done(function( data ) {
console.log("Success");
console.log(data.success);
})
.fail(function( data ) {
console.log("Rejected");
console.log(JSON.stringify(data));
});
Hopefully this example is helpful for you to see how to handle the jQuery callback. The object that comes back is already an object if the result is actually valid JSON.
Updated this to be more generic of an answer.

making ajax work on JSBIN

I'm trying to get ajax to work in JSBIN like demonstrated in this video. What have I don't wrong. Seems like it ought to work!
$(document).ready(function(){
$.ajax({
type: "get",
url: "http://jsbin.com/ipefom/1/js",
dataType: "json",
success: function(returnedData){
console.log(returnedData)
}
});
});
http://jsbin.com/ocerag/3/edit
I don't understand where my parseerror comes from.
Your json is invalid:-
There is as edit:8 in json which is misplaced and also you have duplicate keys while the number is repeated again. Seems like the same set was copy pasted again.
"968":"a","969":"a","970":"a","971":"a","972":"a","973":"a","974":"a","975":"a","976":"a","977":"a","978":"a","979":"a","980":"a","981":"a","982":"a","983":"a","984":"a","985":"a","986":"a","987":"a","988":"a","989":"a","990":"a","991":"a","992":"a","993":"a","994":"a","995":"a","996":"a","997":"a","998":"a","999":"a"} edit:8
{"0":"a","1":"a","2":"a","3":"a","4":"a","5":"a","6":"a","7":"a","8":"a","9":"a","10":"a","11":"a","12":"a","13":"a","14":"a","15":"a","16":"a","17":"a","18":"a","19":"a","20":"a","21":"a","2
Because it is not returning valid json, when you try
dataType: "html", in place of dataType: "json", then it will show that the returning is not a valid json.

HTTP Error 414. The request URL is too long

I am using ckeditor to format some data inside my textarea
<textarea id="editorAbout" rows="70" cols="80" name="editorAbout"></textarea>
Now when i try to post this data using jQuery.ajax like this,
var about=escape( $("#editorAbout").text());
$.ajax({
type: "POST",
url: "../Allcammand.aspx?cmd=EditAboutCompany&about="+about,
type:"post",
async: false ,
success: function(response){
},
error:function(xhr, ajaxOptions, thrownError){alert(xhr.responseText); }
});
I get the error
HTTP Error 414. The request URL is too long.
I am getting the error here: http://iranfairco.com/example/errorLongUrl.aspx
Try clicking on the Edit Text button at the bottom left of that page.
Why is this happening? How can I solve it?
According to this question the maximum practical length of a URL is 2000 characters. This isn't going to be able to hold a massive Wikipedia article like you're trying to send.
Instead of putting the data on the URL you should be putting it in the body of a POST request. You need to add a data value to the object you're passing to the ajax function call. Like this:
function editAbout(){
var about=escape( $("#editorAbout").text());
$.ajax({
url: "Allcammand.aspx?cmd=EditAboutCompany&idCompany="+getParam("idCompany"),
type:"post",
async: false,
data: {
about: about
},
success: function(response){
},
error:function(xhr, ajaxOptions, thrownError){alert(xhr.responseText); ShowMessage("??? ?? ?????? ??????? ????","fail");}
});
}
For me, changing type:"get" to type:"post" worked, as get reveals all queries and hence make it bigger url.
Just change type from get to post.
This should help. :)
In my case, there was a run-time error just before the post call. Fixing it resolved the problem.
The run-time error was trying to read $('#example').val() where $('#example') element does not exist (i.e. undefined).
I'm sure this will, certainly, help someone.
In my case, the error was raised even though I was using 'POST' and the call to the server was successful. It turned to be that I was missing the dataType attribute...strange but now it works
return $.ajax({
url: url,
type: 'POST',
dataType: 'json',
data: JSON.stringify(data)
})
A bit late to the party, but I got this 414, while using POST. It turned out is was a max path length in windows causing this error. I was uploading a file, and the actual request length was just fine (using post). But when trying to save the file, it exceeded the default 260 char limit in windows. This then resulted in the 414, which seems odd. I would just expect a 501. I would think 414 is about the request, and not the server handling.

Categories