We Keep Coding

Inconsistent execution of Error function for Jquery Ajax POST request

I am running into an issue in my error handling of a Jquery Ajax request, and I'm having trouble finding the root of it.
I have a staging site where I am testing error responses for a form submission. The first time I fill out the form fully and click submit, the form is replaced with a brief "processing" message, and then input fields re-appear with the expected error message for Invalid Token.
However, when I click subsequent times sometimes it gets stuck on showing the "processing" message, even though I can see an Error response. It is strange because the console.error() that I have in my Error: function gets triggered, but the Jquery calls that should handle the Form's state don't seem to get complete even though they are in the same scope.
Here is are the jquery variables handling the form's state:
const $formErrorState = $('#SIM-Order-Error-State');
const $formErrorStateText = $('#SIM-Order-Error-State-Text');
const $formCompleteState = $('#SIM-order-complete-state');
const $formSuccessState = $('#SIM-order-success-state');
const $formInitialState = $('#SIM-order-form');
and the call itself:
function simOrderRequest(token, fData){
console.log(fData);
console.log(JSON.stringify(fData));
$.ajax({
method: 'POST',
url: 'https://control.dev.yomobile.xyz/api/v1.0/sim-request/confirm/?token='+token,
data: JSON.stringify(fData),
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function (data) {
if (data.type=="bad_request" || data.status==400) {
$formErrorState.show();
$formSuccessState.hide();
$formErrorStateText.text(data.responseJSON.type+": "+data.responseJSON.description);
$formInitialState.show();
}
if (data.status==500){
$formErrorState.show();
$formSuccessState.hide();
$formErrorStateText.text(data.responseJSON.type+": "+data.responseJSON.description);
$formInitialState.show();
}else {
$formCompleteState.show();
$formSuccessState.hide();
}
},
error: function (error) {
$formSuccessState.hide();
$formErrorState.show();
$formInitialState.show();
$formErrorStateText.text(error.responseJSON.type+": "+error.responseJSON.description);
console.error(error);
},
});
}
});
This is the expected behavior
But sometimes it gets stuck here, once the error is returned, and does not return to the input fields

Send data and files through multi-part forms with FormData in HTML using ajax

In the below code, I'm able to transfer data but when I use the function append to transfer file and data it's not working. Can someone tell me how to transfer file from upload? Looking forward to some help
$(document).ready(function() {
var loader = '<img src="../assets/media/loader.gif" />';
$('#submit').click(function() {
confirm("Do you really want to send messages?");
$('.loading').html(loader).fadeIn();
var msg_area_cst = $('textarea[name=msg_area_cst]').val();
var num_cst = $('textarea[name=num_cst]').val();
var form_data = new FormData();
form_data = 'msg_area_cst=' + msg_area_cst + '&num_cst=' + num_cst;
form_data.append('upload', $('input[name=upload]'));
$.ajax({
url: "../server/CustomMsg.php",
type: "POST",
data: form_data,
success: function(html) {
if (html == 1) {
$('#register_form').fadeOut('slow');
$('.loading').fadeOut();
$('.message').html('Successfully Sent ! ').fadeIn('slow');
} else
alert('Sorry, unexpected error. Please try again later.');
}
});
});
});

The problem is because you correctly declare a FormData object, but then in the next line overwrite it immediately with a string.
You need to append() all data to the FormData object. In addition you need to provide the file data to the append() method, not the jQuery object referencing the input type="file" control.
var form_data = new FormData();
form_data.append('msg_area_cst', msg_area_cst);
form_data.append('num_cst', num_cst);
form_data.append('upload', $('input[name=upload]')[0].files[0]);
That being said, you can make this much more simple if the controls you're reading the values from are contained in a form element. Then you can use the submit event of that form and pass a reference to it to the FormData constructor.
Also you don't do anything with the result of the confirm() I assume you want to stop the form submission if Cancel is clicked, which the above example now does using preventDefault().
Finally, using html == 1 is very unreliable. Firstly html will be a string so relying on implicit type coercion to an integer is not ideal. Also, returning a plain text response can cause issues if there's any whitespace included. I'd strongly suggest you change your server side logic to return a serialised format, such as JSON, and use a boolean value for a 'success' flag.
With all that said, try this:
$('#yourForm').on('submit', function(e) {
if (!confirm("Do you really want to send messages?")) {
e.preventDefault();
}
$('.loading').html(loader).fadeIn();
$.ajax({
url: "../server/CustomMsg.php",
type: "POST",
data: new FormData(this),
success: function(html) {
if (html.trim() === "1") {
$('#register_form').fadeOut('slow');
$('.loading').fadeOut();
$('.message').html('Successfully Sent ! ').fadeIn('slow');
} else
alert('Sorry, unexpected error. Please try again later.');
}
}
});
});

Try this ajax code
$.ajax({
url: "../server/CustomMsg.php",
type: "POST",
data: form_data,
contentType: false,
cache: false,
processData:false,
async: true,
success: function(html) {
if (html == 1) {
$('#register_form').fadeOut('slow');
$('.loading').fadeOut();
$('.message').html('Successfully Sent ! ').fadeIn('slow');
} else
alert('Sorry, unexpected error. Please try again later.');
}
});

The URL string changes after ajax call return

I have been struggling with a problem for some time. I cannot understand the reason as it happens in a specific case, not with the others.
I have a javascript function that calls a PHP script to upload a file to the server (standard code, have been using it and works perfectly normally).
function upload_picture(fieldID, success, error) {
var folderName;
switch (fieldID) {
case "pop_drawing":
folderName = "pop_dwg";
break;
case "pop_installation":
folderName = "pop_inst";
break;
case "pop_picture":
folderName = "pop_pict";
break;
}
var file_data = $('#' + fieldID).prop('files')[0];
var form_data = new FormData();
form_data.append('folder', folderName);
form_data.append('file', file_data);
$.ajax({
url: 'dbh/upload.php',
dataType: 'text',
type: 'POST',
cache: false,
contentType: false,
processData: false,
data: form_data,
success: function (response) {
event.preventDefault();
console.log (response); // display success response from the PHP script
if (response.indexOf("yüklendi") > 0) {
success();
}
},
error: function (response) {
event.preventDefault();
console.log (response); // display success response from the PHP script
error(response);
}
});
}
The function is called from several points in the code and it works OK except one point. At this particular point when it returns it changes the page URL from
http://localhost/pop/#
to
http://localhost/pop/?pop_drawing=&pop_installation=&pop_picture=Compelis-Logo.jpg&pop_need_special_prod=Hay%C4%B1r&pop_need_application=Hay%C4%B1r&pop_order_made=Evet&pop_approval=4&pop_cost_visible=Hay%C4%B1r#
due to a reason I could not understand. This string in the URL line are some parameters on the web page where I press the button to call the function.
The code which call the function is:
function uploadPopPicture () {
if ($('#pop_picture_label').html() !== 'Seçili dosya yok...') {
upload_picture('pop_picture',
function(){
console.log('Görsel yüklendi...');
},
function(error){
console.log('Error:', error);
});
}
}
Same code (obviously with different parameters) is used elsewhere in the program and works OK.
Any ideas what I might be missing.
Many thanks in advance

A button's default behaviour is "submit". If you don't specify any particular behaviour then that's what it will do. So when clicked it will submit your form, regardless of any JavaScript.
Add the attribute type="button" to your button HTML and that will stop it from automatically submitting the form.

Uncaught ReferenceError: FormData is not Defined in PhoneGap

I currently build mobile application, I'm using PhoneGap (Cordova) as my framework to build my application.
I want to ask, why there's Uncaught ReferenceError on my eclipse console when I try to submit the form (I test it on my android phone, with android version 2.3.6)?
I'm trying compile it on GoogleChrome browser (Also Firefox) on there, I'm not getting error.
Here's my code :
Ajax (I'm using Ajax and also JQuery) :
function updateUser() {
/*get data from ID in updateprofile.html*/
var IDUser = sessionStorage.Uid_user;
var fname = $("#INAwal").val();
var lname = $("#INAkhir").val();
/*end of get data*/
//create form_data for post data on ajax PHP
var file_data = $("#chImage").prop("files")[0];
var form_data = new FormData();
form_data.append("file", file_data);
form_data.append("PHPIDUser", IDUser);
form_data.append("PHPUfname", fname);
form_data.append("PHPUlname", lname);
sessionStorage.statusUpdate = 1;
loadingPage(2000);
$.ajax ({
type: "POST",
url: host+'/tosomewhere/db_userUpdate.php',
data: form_data,
contentType : false,
processData : false,
beforeSend: function() {
loadingPageW(1);
},
success: function(data){
if (data == 'update') {
loadingPage(2000);
alert("Success");
window.location = 'Profile.html';
} else if (data == 'failed') {
alert('Failed');
location.reload();
loadingPage(1000);
window.location = 'UpdateProfil.html';
} else {
alert('Connection Lost');
location.reload();
loadingPage(1000);
window.location = 'UpdateProfil.html';
}
}, //for error message
error: function (xhr, errorStats, errorMsg) {
alert("error: "+xhr.errorStats+" , "+errorMsg);
},
complete: function() {
loadingPageW(2);
}
});
};
Is there any suggest to pass it? Because I need to reach at least this version to the user(s).
FYI, I already search it, and I get the nearest question to this :
JS FormData object not defined for PhoneGap in Android
But on that question, I didn't get any further information / answer (why it not support or what to do).
If the answer is that, so I need detail answer if the phonegap not support the FormData object? (as I already mentioned, I need the 'why' and 'what to do' answer)
Thanks for any help :)

ajax success callback not working

So I have this JavaScript which works fine up to the $.ajax({. Then it just hangs on the loader and nothing happens.
$(function() {
$('.com_submit').click(function() {
var comment = $("#comment").val();
var user_id = $("#user_id").val();
var perma_id = $("#perma_id").val();
var dataString = 'comment='+ comment + '&user_id='+ user_id + '&perma_id=' + perma_id;
if(comment=='') {
alert('Please Give Valid Details');
}
else {
$("#flash").show();
$("#flash").fadeIn(400).html('<img src="ajax-loader.gif" />Loading Comment...');
$.ajax({
type: "POST",
url: "commentajax.php",
data: dataString,
cache: false,
success: function(html){
alert('This works');
$("ol#update").append(html);
$("ol#update li:first").fadeIn("slow");
$("#flash").hide();
}
});
}
return false;
});
});

Try replacing:
var dataString = 'comment='+ comment + '&user_id='+ user_id + '&perma_id=' + perma_id;
with:
var dataString = { comment: comment, user_id: user_id, perma_id: perma_id };
in order to ensure that the parameters that you are sending to the server are properly encoded. Also make sure that the commentajax.php script that you are calling works fine and it doesn't throw some error in which case the success handler won't be executed and the loader indicator won't be hidden. Actually the best way to hide the loading indicator is to use the complete event, not the success. The complete event is triggered even in the case of an exception.
Also use a javascript debugging tool such as FireBug to see what exactly happens under the covers. It will allow you to see the actual AJAX request and what does the the server respond. It will also tell you if you have javascript errors and so on: you know, the kinda useful stuff when you are doing javascript enabled web development.