I am trying to test Jquery ajax calls in Firefox but it it not working. I mean my server is not receiving any requests. But when I test in IE8 it works fine. Here is my ajax call:
$("#getWeatherReport").click(function(){
$cityName = "New York";
$.ajax({
type: "POST",
dataType:"xml",
url: "http://localhost:8080/Test/WeatherServlet",
data: "cityName="+$cityName,
success: function(data) {
alert($("report", data).text());
},
error: function(xhr, textStatus, errorThrown) {
alert('ERROR['+xhr.statusText+']');
}
});
});
It is not even calling error function. And from my server code(java) I am setting content type as "text/xml".
Any suggestions?
Your string is not correctly serialized, I'm not sure if that's the issue, but it may be and it's definitely a potential one for later, try this for an immediate test:
var $cityName = "New+York";
As a more permanent solution, pass data as an object, like this:
data: {cityName: $cityName},
Have you installed Firebug?
Your best bet would be to install Firebug, which comes with a console that'll notify you of any javascript errors. You can also use it (via the "Net" tab) to monitor all requests made by your page.
From what I can see, your code looks OK (other than the possible issue pointed out by #Nick Craver)
Also, why the '$' on your cityName variable? The '$' prefix in Javascript is meant to be reserved for machine-generated code (so that it has no chance of conflicting with user code).
try installing firebug plugin in ff :: https://addons.mozilla.org/en-US/firefox/addon/1843/
Then check the :::: Net Tab >> All selected
Refresh the page and see is your ajax call actually getting called. If yes is there any syntax error in the call or any variable null error. If all is fine then you can think of further issues
Usually, when I end up with a parseerror that means that the return header type is wrong or that somehow the server sent extra data with the response. For instance, if I'm looking to get JSON back and I get the JSON and some HTML from x-debug.
Also, The OPTIONS request is for cross-domain requests which is what #Nick was alluding to.
A helpful link to get you started.
Related
Hello I am struggling to get this work.
var url = 'http://xxxx/getCustomerCardInfo?requestor_email=honey#gmail.com&callback=?';
$.getJSON(url, function(data){
alert(data);
});
The ajax call is successful. But this url gives the JSON in response i.e
{"targetRequestUri":"/getCustomerCardInfo","javax.servlet.request.key_size":256,"outputMap":{"emailId":"honey#gmail.com","orderList":[{"orderId":"ST210340","orderDate":"2013-04-24 07:12:54.187","orderStatus":"ORDER_COMPLETED","totalMoney":1}],"partyId":"10810","customerName":"honey goyal","telephoneNumber ":"9023605155"},"_FORWARDED_FROM_SERVLET_":true,"javax.servlet.request.cipher_suite":"DHE-RSA-CAMELLIA256-SHA","thisRequestUri":"json"}
But my Firefox error console gives the error in JSON:-
SyntaxError: invalid label
on second character of beginning of JSON, i mean on " in
{"targetRequestUr
And I does not get any alert. Any idea what i was doing wrong.
I think this need only JSONP response and padding is missing in above JSON.
Got the solution. I need to append padding before the JSON from web Server.
But this is not perfect solution according to me because it force me to change third party code. Still waiting for the perfect one so it can work by only changes to client side scripting. like
functionName({"firstName": "John","lastName": "Smith","age": 25});
I have a form and post it to server using json data,and the server save it in database. here is my code
function saveChanges() {
var items = [];
$('ol.item_list > li.item').each(function(){
items.push(getItemData($(this)));
});
var csrftoken = $.cookie('csrftoken');
$.ajax({
url : '',
type: 'POST',
headers : {"X-CSRFToken": csrftoken},
data : $.toJSON(items),
success: function(data, textStatus, jqXHR){
console.log(data);
},
error: function(jqXHR, textStatus, errorThrown){
alert(textStatus);
},
});
}
The problem is, I call saveChanges (via a button) twice, all return 200 http ok. So I got duplicate data in database. Should the csrf token provent duplicate sumbit? How can I fix it?
You should prevent double submission by taking care to properly
lay out your script execution flow & script structure so that you prevent that.
No, the CSRF token doesn't prevent duplicate submit of any kind. Its purpose is to prevent Cross Site Request Forgery, nothing else. It creates a token so nobody can trick you in submitting requests you don't intend to do.
If you want to prevent duplicate submits, a way would be to disable the submit button after it is clicked once. However, this is by no means a good solution, since JavaScript runs on client side and can easily be manipulated (e.g. via Firebug). So duplicate submits would still be possible, just not that obviously.
A better way is to do validation in your server-side Python code. You can check if the submitted data is already in the database and, if so, ignore the request or optionally return an error message. This makes sure that even by fiddling around with the JavaScript, an evil-meaning user cannot save data twice.
I would use both of these means, the first one simply to tell the user that he should not try to submit the same data twice - that's just an interface perk.
Here is my debugging method that goes to the error block instead of the success block.
function removerelationship(reference_related_id_var) {
if ($('##relationships').attr('id') != undefined) {
$.ajaxSetup({cache:false});
$.ajax({
url: 'index.cfm?action=reference.confirmjson',
dataType: 'json',
data: {reference_id:reference_id_var, reference_related_id:reference_related_id_var},
success: function(){alert("I PASSED");},
error: function(){alert("I FAILED");}
});
But this is my response from calling reference.confirmjson:
{"MESSAGE":"Are You Sure You Want To Remove The Relationship Between References 744094 and 1200?","CONFIRMED":true}
Is there some reason this would still take me to the error block?
Thanks.
Make sure you have debug output turned off for the AJAX request . I explain it a bit better at http://orangexception.com/post/7308110027/remove-debug-output-from-ajax-requests-in-coldfusion
The error case would be called if any status other than a 200 is being returned. Take a peek at the response in Firebug or a similar tool. If CF is also throwing an error further down the request, it would return a 500. This can help you determine if you need to check the CF application log for an error.
Edit: Also, check the raw response. Firebug does an awesome job at dropping the trailing CF error and just showing the properly formatted JSON, which could be confusing if an error was thrown.
Hopefully that title isn't too cryptic. What's happening is I have a jQuery AJAX script that I'm trying to use to access an API on a remote server, which returns a JSON response. However, the API returns the JSON as MIME type "text/html" (in the response header) instead of "application/json". It would seem obvious that I simply need to change the returned content type from text to JSON, to make the AJAX call interpret the data correctly.
Unfortunately, this is not the case. I have tried this in a multitude of different ways, all of which fail. The closest I've gotten to getting this API call to work is when the debugger tells me "Resource interpreted as Script but transferred with MIME type text/html". And the AJAX call errors out with my debug message that dumps the jqXHR object in JSON format, which tells me: {"readyState":4,"status":200,"statusText":"parsererror"}
Here is an example of my code (although I have changed the code many various ways, in my attempts at getting it to work, but this version seems to be the closest to correct):
$.ajax({
type: 'GET',
url: 'http://username:api-key#www.kanbanpad.com/api/v1/projects.json',
contentType: 'application/json',
dataType: 'jsonp',
converters: {
'jsonp': jQuery.parseJSON,
},
success: function(data) {
alert(data);
},
error: function(jqXHR, textStatus, errorThrown) {
console.log(JSON.stringify(jqXHR));
console.log(textStatus+': '+errorThrown);
}
});
If anyone can figure out what I need to do differently to make this work, I will be extremely grateful.
It may also be worth noting that if you copy/paste the API URL into a browser address bar and hit go, it gives the proper JSON response with the proper response header ("application/json")
So unless Kanbanpad updates their API, it cannot be directly accessed with JS. You will have to use PHP (or some other) to handle the requests.
It works just as well, it just requires an extra step is all.
Just for anyone that was looking for a solution.
dataFilter(data, type)Function
A function to be used to handle the raw response data of XMLHttpRequest.
This is a pre-filtering
function to sanitize the response. You should return the sanitized data. The function
accepts two arguments: The raw data returned from the server and the 'dataType' parameter.
I would change the content type in the dataFilter interceptor to json. Bear in mind this affects all ajax calls, so use info from data to decide which ones you want to convert.
Verify that your server is sending a jsonp response. This means the json should be enclosed with a string of your callback.
The callback name is passed in the parameters, and if you're not setting it explicitly, looks something like: jQuery15102810791094068532_1300988427891 (As per http://www.json-p.org/)
On your server, you need to format the response:
jQuery15102810791094068532_1300988427891({...json response ...});
Where you use the callback defined in your GET parameter 'callback'.
You might try setting the type to "json" and see if it works. I've had a number of parsererror's with the jquery's jsonp - you might try http://code.google.com/p/jquery-jsonp until it's a bit smoother.
Try changing your content-type to this
contentType: "application/json; charset=utf-8",
I am performing the following AJAX call:
$(document).ready(function() {
$.getJSON('https://sendgrid.com/api/user.stats.json',
{
'api_user': 'me#mydomain.com',
'api_key': 'MYAPIKEY',
'user': 'me#mydomain.com',
'category': 'MY_CATEGORY'
},
function(response){
alert('received response');
}
);
});
and I get no alert message as expected. Instead, Firebug says I get "501 Not Implemented."
Why? What do I need to do to fix this?
If I go to the URL corresponding to the AJAX call in Firebug, I get a JSON file as a download, and it contains the expected data.
One thing I've noticed is that firebug says OPTIONS instead of GET:
alt text http://grab.by/grabs/b1a13d92a4fc69aa310880a5d7a06b95.png
I don't know if this is related, but generally when requesting JSON on the client to a server in a different domain you'll need to use JSONP instead of JSON due to the Same Origin Policy. Unfortunately, it doesn't appear that their API supports using JSONP -- so they must expect you to interact with their site from your server. In that case you'll need proxy methods on your server to translate the calls to their API so that the client calls are made to a server in the same domain as the page.
As this is the top Google match for "jQuery 501 (Method not implement)" I thought I'd share what worked for me when experiencing this on the same domain (which is not your problem).
My problem was that I was not returning valid JSON, I was just returning "1". So to fix this, either:
Ensure you return valid JSON, or if you don't require a JSON response,
Swap your call to use $.ajax instead of $.getJSON, or
If you're already using &.ajax, remove type: "json"
Hope that helps some people.
I had the same problem, and realized it was an encoding problem. It was solved by encoding the values of the data sent to the server. Try something like:
$(document).ready(function() {
$.getJSON('https://sendgrid.com/api/user.stats.json',
{
'api_user': encodeURIComponent('me#mydomain.com'),
'api_key': encodeURIComponent('MYAPIKEY'),
'user': encodeURIComponent('me#mydomain.com'),
'category': encodeURIComponent('MY_CATEGORY')
},
function(response){
alert('received response');
}
);
});
end then decode the data on backend. Hope it helps someone.