Missing fields in $http response - javascript

I have an app that at some point issues an $http POST to a WEB API project as follows
$http({
method: update ? "PUT" : "POST",
url: framewidth + "inspections",
data: data,
}).then(
function (object) {
toastr.success(Messages.success.dflt);
console.log(object.data);
rtrn.resolve(object);
},
function (error) {
toastr.error(Messages.Error(error.statusText));
rtrn.reject(error);
}
);
It saves fine but after it returns object.data is missing some fields. I have traced the missing fields all the way from the depths of the database to the Fiddler layer and the missing fields are there up until the success function of $http
So I can actually see my missing fields being returned in fiddler but they seem to disappear somewhere between that and console.log(object.data); line above.
I am totally stumped. It seems it's disappearing in the layer that's outside my control.

Put a breakpoint in your success function and look at object there. One thing I've noticed about Chrome's dev tools is that if you console.log an object and then the object changes before you expand it, you might get the changed version rather than what it was at the time of getting logged.

Related

Javascript access element from return value of ajax call in JSON

So I make an ajax call that does return successfully but the problem is that I cannot access individual elements of the array it returns, meaning I can't console log it. It returns either error or undefined. Error would be like track is not defined but when you look at the example ajax return, track is there. Here is the code
$.ajax({
url: 'https://api.spotify.com/v1/playlists/'+playlist+'/tracks?fields=items(track.id)',
headers: {
'Authorization': 'Bearer ' + access_token
},
success: function(response,access_token) {
Result(response,access_token);
},
dataType:"json"
});
function Result(response,access_token){
console.log(response[0].track.id);
console.log(response[0]);
console.log(response.track);
}
The ajax call returns an array that looks like this for example. Inspecting an individual element.
items: Array(80)
-0:
-track:
-id: "Random String"
I read up on JSON methods and how it handles arrays and when I console logged response[0].track.id I believe I should see the id string. I also tried different console logs as well but have omitted because they all have the same kind of errors. I am trying to do this cause at one point I might put these ids in their own array and will need to add each individual element one at a time for further use. Thank you for any assistance and let me know if you need more details.
From the inspected value... it looks like you should check response.items[0].track.id instead...

Strange ajax behavior with Zepto and Cordova

Something strange is going on with an Ajax call I'm making and I can't figure out why its happening, maybe someone can shed some light.
This is the call
$.ajax({type:'POST', url: apiURL+"misc/"+cola, headers: {'apikey':localStorage.apiKey}, dataType: 'html', success:function(data) {
$("#pagina").html(data);
postCarga("pagina");
}, error: function() {
sinConexion();
}});
Now, this should take the "data" received from Ajax and fill div#pagina with it, but the div stays empty.
Here's the strange part, I called console.log(data) to see if the data is getting through and then it not only logs to the console but properly fills in the div#pagina with the returned data.
If I just try to fill it in directly, the div stays empty, but if I do anything beforehand (even something like var xxx = data;), it gets filled in correctly.
I worked around it by moving the filler function into postCarga so my final code looks like this:
$.ajax({type:'POST', url: apiURL+"misc/"+cola, headers: {'apikey':localStorage.apiKey}, dataType: 'html', success:function(data) {
postCarga(data,"pagina");
}, error: function() {
sinConexion();
}});
,but that feels strange.
// EDIT //
Here's the whole function
function postCarga(datos,que) {
$("#"+que).html(datos).animate({top:'0%'},350,'ease-in',function() { $("#cargando").css("display","none"); });
}
,originally, all it did was animate and then hide the loader, the html(datos) is part of my fix.
Ok, I just found the reason. I was testing out different things by side-stepping the received data and just trying $("#pagina").html("Hello") and other things, after all of those worked I went trough the html returned by the Ajax call and that's where I found the answer.
I changed the return from the API to send just
<h1>Hello</h1>
and it worked fine, afterwards I manually built up the whole HTML string until I had a carbon copy of what the script generated, sometimes it would load and sometimes not, which was stranger still.
I passed the returned HTML through various lints and checkers and only one of them returned an error, one of the images in the block returned a 404, so I removed that image (and only that image) from the returned HTML and it loaded fine.
In essence, it seems that when Ajax is set to html (dataType: 'html'), each and every thing - direct or remote - in the entire block must be valid html and return a success when called, or it will be silently ignored.
Changing dataType to "text" makes it skip that check and just inject everything into the div as intended.

Undefined index on ajax call only for one function

I have several different ajax calls on the same php page, but I get undefined index for only one function (createAlbum).
I send exactly the same parameters in each of my ajax calls. It worked fine for a few tests, but now it only works for the other ones, but not for this specific call.
I suspected that the .js file was still in the browser cache, so I cleared it and tried with other browsers, which worked for a few more attempts.
Now, I can't get it working on any browser, and definitely don't understand why.
Here is my ajax call :
$.ajax({
type: "POST",
url: BASE_URL,
data: {
action: "createAlbum",
data: JSONAlbum
},
cache: false,
success: callback
});
My php file handling the request ($_POST['action'] is always undefined with the above request) :
if (isset($_POST['action'])) {
switch ($_POST['action']) {
// Handle the action
// ...
}
} else {
echo 'ACTION : '.$_POST['action'];
}
The header containing the ajax parameters ("data" is a json containing one or more blob images, this might be the problem, but I didn't find anything saying so) :
And finally, the response containing the error :
I really hope this is not a dumb error of mine, but I asked a friend before posting, and he can't find the solution either.
Thanks for your help !
You said that the error not happens all the time (in some call yes, in other no).
The body post is sent, you see it in console. So we can exclude javascript problem.
So the problem is something that happens before or during the process.
PHP has some limitations on input vars, you can see it in php.ini.
I see that you send images in base64, so it's probable that something of these limitations are triggered.
See for example:
max_input_time
max_input_vars
post_max_size

problem CasperJS POST via AJAX not working

I'm working on a scraper of my bank statements with CasperJS, so far I've managed to login and get to the statements page. I accomplished to get the table with the first page of the statement, but I need to get it complete.
The bank's web have the option to export to a .txt file (sort of a CSV actually), but in order to download it I have to be able to download the file that comes as an attachment in the response header of a POST request when I submit a form by clicking a button.
So I figured that I could do the POST via AJAX, get the response and output it. I tried running the code on the firebug console and it works, but for some reason it just doesn't work in CasperJS.
Btw, I have tried using --web-security=no , still doesn't work
This is how I'm trying to do it:
this.then(function() {
eurl = "http://bankurl.com";
response = this.evaluate(function() {
params = $("#lForm").serialize();
$.ajax({
type: "POST",
url: eurl,
data: params,
success: function (data) {
return data.responseText;
},
error: function (xhr,status,error){
return error;
}
});
});
this.echo(response);
});
I wasn't able to test this with the code you provided, but it looks as though you just aren't returning anything back from the evaluate().
return __utils__.sendAJAX(url, 'POST', params);
You would probably also need to call CasperJS with the following:
casperjs --ignore-ssl-errors=true /path/to/script.js
Well, after struggling finding a way to solve this I finally did, I just put the ajax call inside a try catch and found that the error was that it wasn't reading the eurl variable (I declared it outside the evaluate). I put it inside and it worked. Thanks for your help

ajax request returning script tag-- mootools

I'm seeing a weird error in one of my ajax-updated pages.
The request looks like this:
var a = new Ajax(url,{
method: 'get',
onComplete: function( response ){
$('loader').style.display="none";
readData( response );
}
});
a.request();
return;
This works fine on almost any system so far, but on a new server it breaks, with a mootools error "unknown XML entity". The weird part is, if you trace the request with firebug, rather than returning JSON as expected, the response body looks like this:
<script>document.location.href='http://www.mysite.com?myparams=value&etc;</script>
However, if you actually make that request manually by pasting the URL in the script tag (response body) along with the params in a browser, the proper JSON data is returned.
Any ideas why the request would return a script tag instead of the data?
As Dimitar suggested in the comments above, this was an issue in a Joomla site thanks to a URL rewrite tool called sh404SEF. According to the developer, the fix is to set the "301 redirect" parameter to "no" in the advanced configuration options.
So this had nothing to do with my code or the ajax functions, but was rather the SEF rewrite component that was breaking the request.

Categories