I am building a form using Polymer 1.0, using its iron-form element.
How can I get the error response body? The server is sending a JSON error back, and I can see it in the chrome inspector (network tab). But when my iron-form-error callback method is called, and I log it, the response JSON is nowhere to be found. I went through all the Object properties but nothing.
I also looked under event.detail.request.response but it is also null. Here is the code I'm using:
document.querySelector('#formPut').addEventListener('iron-form-error',function(e){
console.log(e);
// var json = $.parseJSON(e.detail.error.message);
});
Any help would be appreciated.
I eventually found my response body here...
e.detail.request.xhr.response
For those looking for the same thing under Polymer 1.0+, the status code can now be found under event.detail.request.xhr.status
_onError: function(event) {
statusCode = event.detail.request.xhr.status;
}
Related
Im using Woocommece in a WordPress website and some of the plugins installed make requests to an API to check and validate a vat field.
Id like to use .ajaxSuccess() to tap into the ajax response thats returned so I can check to see if part of it contains some data and do something on screen.
So far Ive got this.
jQuery(document).ready(function(){
var event = 'updated_checkout'
jQuery(document).ajaxSuccess(function(event){
console.log('success');
})
})
So the console spits out success. Great. But Im stuck as how I would move forward with this. I dont know how to get the XHR option or get he response in a variable.
Any help would be appreciated.
To get the response from the request in the $.ajaxSuccess() handler, retrieve the responseText property from the jqXHR object passed to the handler function in the second argument:
jQuery(document).ready(function($) {
var event = 'updated_checkout'
$(document).ajaxSuccess(function(e, xhr) {
console.log(xhr.responseText);
});
});
I'm getting a malformed JSON response from an AJAX $.getJSON() request. I don't understand the problem.
Here is the request code:
var myfunc = function(){
$.getJSON( "/", {"data": ""}, function( data, status ){
var values = data;
$("#temperature").html( values.temperature.toFixed(1).toString() );
$("#humidity").html( values.humidity.toFixed(0).toString() );
});
});
and here is the JSON data received (extracted via Firefox debugger):
{
"temperature": 17.799999237060547,
"humidity": 35.900001525878906,
"failed": false
}
I cannot see what is malformed here. And the code works. DOM elements id="temperature" and id="humidity" are updated correctly.
I got exactly the same result using $.get() with JSON.parse().
Does anybody have an idea how to solve the problem?
My guess is that the json data you are receiving over the network is malformed, but, it is successfully converted to an object anyway.
getJSON automatically applies JSON.parse(..) on the received data.
Try using the 'network' listener tab on Google Chrome to see exactly the response you are receiving BEFORE it is parsed. There might be a missing " or something like that.
If you have access to the server code, you could also try logging the response in there.
edit:
you might be interested by this link
Might have to do with some server config.
Mimetype is also mentionned in this link.
Occasionally, an ajax request to Flickr's api will fail. I'm not sure if I'm doing something wrong here - or if I'm just not handling things correctly - but the code works over 90% of the time. When it doesn't work, I get the following error message from Firefox's console:
TypeError: jQuery19109306644694293944_1362865216185 is not a function
(I am letting jquery generate the callback, which is why the callback is named like that.)
This is the code that sometimes fails:
function getAppropriateSize(photo){
console.log("In getAppropriateSize");
/** stuff. query is defined here **/
$.ajax({
url: 'http://api.flickr.com/services/rest/?method=flickr.photos.getSizes&format=json&api_key='+flickrKey+'&photo_id='+query.id,
dataType:'jsonp',
jsonp:'jsoncallback',
timeout:3000,
success: function(sizes){
console.log("In success - getAppropriateSize");
/**determine the correct size**/
flickrURL = sizes.sizes.size[currVal].source;
},
error: function(xmlhttprequest,textstatus,msg){
console.log("In error - getAppropriateSize");
/* handle error*/
}
});
}
I've checked what's returned when this happens and JSLint says it's valid javascript. flickrURL also gets set to a valid URL. I'm pretty mystified about what's causing this error - any help would be appreciated.
Edit: I was messing around and this time getAppropriateSize just received two separate messages from flickr for one call. The first one was
({stat:"fail", code:1, message:"Photo not found"})
The second one was the a full response from the server that also produced the TypeError mentioned above. However, the second response found the photo and gave me the sizes.
I need to grab some data from a JSP page that does a select on a database and then put inside a div. I need to do this with ajax.
Here is my code:
$(function() {
teste();
});
function teste() {
var v1 = document.getElementById("selCodigo").value;
alert(v1);
$.ajax({
type : "GET",
data : "turma="+v1,
url : "busca-notas.jsp",
success : function(resposta){
alert("DEU CERTO");
},
error : function(xhr, ajaxOptions, thrownError){
alert(xhr.status);
alert(thrownError);
document.getElementById("notas").innerHTML = "ERRO";
}
});
}
I tested the variable v1 and the value that it receives necessary, and in my JSP page, I do this:
String turmaSelecionada = request.getParameter("turma");
the problem is that the ajax content that does not feed into the div need, beyond what the xhr.status presents thrownError and a 404 error not found
Can anyone help me?
Either, busca-notas.jsp does not exist, or it is on a different server or path as the HTML calling the Ajax request.
Example: If your HTML and JavaScript is here:
http://www.example.com/somepath/page.html
and your PHP code is here:
http://www.example.com/otherpath/busca-notas.jsp
then you'll Need to use url: "../otherpath/busca-notas.jps". There is an easy way to check: Open your HTML in the browser, remove the last bit of the path, and replace it with "busca-notas.jpg", and see what you're getting.
A 404 also means, your JSP code never gets executed.
This is saying the resource you are trying to do a GET to is not there. The path you are doing a GET to is probably incorrect. Can you tell the structure of your files (javascript/service files etc...). I would suggest using the browser developer tools or fiddler to debug what is going on.
Use F12 (windows) with browsers to get to the developer tools. Also the fiddler tool is great! http://www.fiddler2.com/fiddler2/
On a side note if you use console.log for debugging you will never go back to alerts :)
If you copy and past the following url to your browser:
http://finance.google.com/finance/info?client=ig&q=MUTF_CA%3ATDB900
it will output an string no problem. (that is what i wanted to retrieve from the following ajax call)
But if i do the following:
this.getQuote = function() {
$.get('http://finance.google.com/finance/info?client=ig&q=MUTF_CA%3ATDB900', callback);
}
var callback = function(data){
alert(data);
}
It gave me an "500 Internal Server Error". I checked using firebug console.
Did i do something wrong in the ajax call?
Thanks.
As Shadow_boi already guessed, the problem is due to the same origin policiy, which always applies to ajax requests. You need to use JSONP to fix the problem.
See this fiddle for solution: http://jsfiddle.net/cb9c3/