Frustratingly the GoogleAppLauncher can't replicate this and the error only occurs on production. Essentially I have a form submitting json to mailchimp. It is erroring at the javascript and I can't work out why. You can see the 500 error if you try to submit the form - https://v-sons.appspot.com/our-underwear/#subscribe
On the server looks to be a Call to undefined function add_theme_support() however the console tells a different story (I don't understand whether the two relate / not).
In my console, the jQuery error references:
xhr.send( ( s.hasContent && s.data ) || null );
However digging deeper it looks to be a problem with the $.ajax anonymous function of this code block that's being submitted:
jQuery.ajax({
url: action,
type: 'POST',
data: $stickyForm.serialize(),
success: function(data)
{
window.location.hash = 'nearly';
$('#modalOverlay').addClass('nearly').fadeIn();
$('#stickyEmail').val("");
$('#nickName').focus();
}
});
I've tried to cover as much as I can with this, because to be honest I'm not sure where the problem really lies. It'd be really great to get an answer / some help though because I've been bashing keys for hours trying to work this out. The main problem is this isn't a problem on my local server, and I don't know from what end to attack the problem.
//
Update: It has just occurred to me that this error might have been created by issuing the other fix I used on this other related question I asked the community - 500 Error when Migrating Wordpress to Google Cloud
See AJAX Mailchimp signup form integration which suggests adding dataType: 'json' and setting contentType.
Related
I have looked at the following thread
jQuery Ajax - Status Code 0?
However I could not find a definitive answer and I am having serious trouble trying to find the source of my issue so I am posting here in the hopes that someone can point me in the right direction.
In my code I am performing an Angular HTTP post which just sends basic JSON data, then within the on success callback I am using AJAX to upload files to the same server. (I know I should not be using jQuery and Angular however I can't change this for the moment)
It looks something like this
var deferred = $q.defer()
// first post
$http.post(url,payload,{params: params, headers: headers)
.then(function(response) {
uploadFiles(response,deferred);
// I am also sending google analytics events here
}, function(error) {
// do error stuff
}
return deferred.promise;
// upload files function
function uploadFiles(response,deferred){
$ajax({
type: 'POST',
processData: false,
contentType: false,
data: data // this new FormData() with files appended to it,
url: 'the-endpoint-for-the-upload',
dataType: 'json',
success: function(data) {
// do success stuff here
deferred.resolve(data);
},
error: function(jqXHR, textStatus, errorThrown) {
var message = {};
if (jqXHR.status === 0) {
message.jqXHRStatusIsZero = "true";
}
if (jqXHR.readyState === 0) {
message.jqXHRReadyStateIsZero = "true";
}
if (jqXHR.status === '') {
message.jqXHRStatusIsEmptyString = "true";
}
if (jqXHR.status) {
message.jqXHRStatus = jqXHR.status;
}
if (jqXHR.readyState) {
message.jqXHRReadyState = jqXHR.readyState;
}
if (jqXHR.responseText) {
message.jqXHR = jqXHR.responseText;
}
if (textStatus) {
message.textStatus = textStatus;
}
if (errorThrown) {
message.errorThrown = errorThrown;
}
message.error = 'HTTP file upload failed';
logError(message);
deferred.resolve(message);
}
}
})
}
Not my exact code but almost the exact same.
The issue is that is works almost all of the time, but maybe three or four in every few hundred will fail. By fail I mean the error handler function is called on the file upload function and the files are not uploaded.
I get jqXHRStatus 0 and jqXHRReadyState 0 when this occurs.
The only way I am able to replicate the issue is by hitting the refresh on the browser when the request is being processed, however users have advised they are not doing this (although have to 100% confirm this)
Is there perhaps a serious flaw in my code which I am not seeing? Maybe passing deferred variable around isn't good practice? Or another way the ajax request is being cancelled that I am not considering? Could sending google analytics events at the same time be interfering?
Any advice would be great and please let me know if you would like more information on the issue.
This means, the request has been canceled.
There could be many different reasons for that, but be aware: this could be also due to a browser bug or issue - so i believe (IMHO) there is no way to prevent this kind of issues.
Think for example, you get a 503 (Service Unavailable) response. What you would do in such a case? This is also a sporadic and not predictable issue. Just live with that, and try to repost your data.
Without reinventing the wheel, I suggest you to implement:
Retrying ajax calls using the deferred api
My guess is that your code is executing before it actually gets back from the call. I.e. the call goes back and nothing was returned and it gives a 0 error. This would make sense as the error is variable. Most of the time it would return fine because the backend executed fast enough but sometimes it wouldn't because it took especially long or something else happened etc. Javascript doesn't ever REALLY stop execution. It says it does but especially passing between angular and jquery with multiple ajax requests it wouldn't be surprising if it was executing the second ajax call before it actually completed your angular post. That's why a refresh would replicate the error because it's would clear your variables.
Some things you can do to test this:
On the backend make a timer that goes for a few seconds before it returns anything. This will probably make your code fail more consistently.
Set breakpoints and see when they are being hit and the values they contain in the javascript.
Good luck!
This is my first Stack Overflow question as a newly-employed junior developer. I have done a lot of searching but can't seem to find an answer, apologies if I have missed it.
I have a couple of large JavaScript objects that I am looking to pass from the frontend of a web app to the C# backend. With the app I'm working on, we have been using JSON.stringify(object) to prepare data to pass to the backend. When it hits the backend we do ApplyMyData data = JsonConvert.DeserializeObject<ApplyMyData>(json); - no issues normally.
EDIT: Here's how we post:
$.ajax({
type: 'POST',
url: '/Controller/MyMethod',
data: {
json: JSON.stringify(myObject)
},
success: function (response) {
if (response.success) {
// yay
} else if (response.success === false) {
// nay
} else {
alert('Something unexpected happened');
}
}
});
'Why not just keep using JSON?' I hear you ask!
Well, that's tricky. Thanks to client requirements, we must support IE11, which seems to have a limit on the size of strings. Reference:
What is the maximum possible length of a query string?
Therefore, the resulting JSON.stringify(object) is incomplete/invalid and when it's parsed, an error is thrown. We have no issues when users are on Chrome.
I have done up a quick fiddle to demonstrate this problem, try run it in Chrome and then IE11, then look at the console logs and you'll see what I am getting at:
https://jsfiddle.net/8yx7bqjs/.
IE11 truncates the string length at 1024 characters... sigh...
So to my questions:
Is there another way I can send the JavaScript object 'unmodified' -or- 'unstringified' to the backend instead?
Must all data sent to backend be in the form of a string?
Is there a workaround for IE11 that can let you work with strings longer than 1024 characters? I can't seem to find any.
Thanks in advance.
You can make mock ajax requests in Fiddle.
heres what I looked at really quickly:
https://jsfiddle.net/8yx7bqjs/1/
$.ajax({
type: 'POST',
url: '/echo/json',
data: {
"stuff": myArray
}
}).done(function(res){
console.log("success");
}).fail(function(res){
console.log("test failed")
});
IE11 is showing no problems with actually sending the data.
Depending on the actual length of your string ASP.Net has a limitation of 102400 by default.
Thanks #robjam, this has helped me a lot. I'm using Raygun for error reporting and gives me with the POST form value. The form value is truncated in their console so I thought (probably wrongly) that the string was being truncated in the browser before it actaully gets POST-ed to the backend.
But looks like IE11 is stringifying just fine, maybe RayGun simply isn't printing out all the JSON in their error logging console which has thrown me off the scent.
Will investigate further, thanks.
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
So I have searched the forum for similar questions unfortunately I have been unlucky to find an answer that suits my problem.
I am trying to make an ajax call in my jquery using the following code;
function submitForm(formData)
{
$.ajax({
type: 'POST',
url: 'addEvents.php',
data: formData,
dataType:'json',
cache:false,
timeout:7000,
success: function(data){
$('#addEventsForm #response').removeClass().addClass((data.error === true) ? 'error' : 'success').html(data.msg).fadeIn('fast');
if($('#addEventsForm #response').hasClass('success')){
setTimeout("$('#addEventsForm')",5000);
}
},
error:function(XHR,textStatus,errorThrown)
{
$('#addEventsForm #response').removeClass().addClass('error').html('<p> There was an <strong>' + errorThrown +
'</strong> error due to <strong>'+ textStatus +'</strong> condition.</p>').fadeIn('fast');
console.log(arguments);
//alert(XMLHttpRequest.responseText);
},
complete:function(XHR,status)
{
$('#addEventsForm')[0].reset();
}
});
}
But I am getting a sysntax error. I have tried doing this to see what errors I get in chrome
console.log(arguments);
but the responseText in the [Object, "parsererror" , SyntaxError] node seems to display the entire html of the page that contains the form where I am inserting the record.
I am still getting my feet wet in ajax so I am not yet a pro in absolutely understanding the error messages and what they mean.
Is the above js/jQuery code located on the addEvents.php page -- that is, on same page that you are posting the AJAX to? (In other words, are both the form/ajax and the AJAX destination on the same physical PHP page?)
If so, you will get exactly what you describe: the entire HTML of the page spat back at you.
AJAX, by design, must post to a different physical page on the server. That's just how it works.
Also, FWIW, note that dataType: 'json', refers to the data being returned, not the data being sent. Perhaps you already know this, but it is a common misunderstanding so is worth mentioning.
Edit:
As Felix points out, this answer is not technically perfect. It is possible to post AJAX code to the same page, but you must specifically allow for that. Perhaps FK or another could edit this post to add an example of what that additional code would look like?
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.