We Keep Coding

How to prevent function from running if data error is returned

I have an AJAX request which shows a modal window with a progress bar when the data is computable but if there is an error I would like the error to be returned and the modal window to stay hidden.
$(document).ready(function(){
$(function () {
var pleaseWait = $('#pleaseWaitDialog');
showPleaseWait = function () {
pleaseWait.modal('show');
};
hidePleaseWait = function () {
pleaseWait.modal('hide');
};
});
var $myForm = $('.form')
$myForm.on('submit', function(event){
event.preventDefault();
var form = $(event.target)
var formData = new FormData(form[4]);
$.ajax({
xhr: function() {
var xhr = new XMLHttpRequest();
xhr.upload.addEventListener('progress', function(e) {
if (e.lengthComputable) {
showPleaseWait(); // <--------------- This runs even when view returns error
console.log('Percentage uploaded: ' + (e.loaded / e.total))
var percent = Math.round(e.loaded / e.total * 100);
$('#progress-bar').attr('aria-valuenow', percent).css('width', percent + '%');
}
});
return xhr;
},
type: 'POST',
url: form.attr('action'),
enctype: 'multipart/form-data',
processData: false,
contentType: false,
data: new FormData(this),
success: function(data){
if (data.success) {
window.location.href = data.url;
}
if (data.error) {
$("#top").html(data.error.title).addClass('form-field-error');
$("#div_id_title").removeClass('form-group');
}
},
});
});
});
I have tried moving the showPleaseWait function under the if(data.error) statement but this doesn't work.
How do I keep the modal window hidden if the response is (data.error)?
EDIT:
And this removes the HTML of the page and shows the JSON response instead:
success: function(data){
if (data.success) {
window.location.href = data.url;
}
error: function (jqXHR, exception) {
if (data.error) {
$("#top").html(data.error.title).addClass('form-field-error');
$("#div_id_title").removeClass('form-group');
}
}
},

Your function is the "succes" property of the ajax object.
As shown in the doc, there is a "error" property to handle ajax error, here is the signature :
error(xhr,status,error)
Use it like you do with the succes property :
$.ajax({
xhr: function() {
var xhr = new XMLHttpRequest();
xhr.upload.addEventListener('progress', function(e) {
if (e.lengthComputable) {
showPleaseWait(); // <--------------- This runs even when view returns error
console.log('Percentage uploaded: ' + (e.loaded / e.total))
var percent = Math.round(e.loaded / e.total * 100);
$('#progress-bar').attr('aria-valuenow', percent).css('width', percent + '%');
}
});
return xhr;
},
type: 'POST',
url: form.attr('action'),
enctype: 'multipart/form-data',
processData: false,
contentType: false,
data: new FormData(this),
success: function(data){
if (data.success) {
window.location.href = data.url;
}
},
error: function(xhr,status,error){
// Do something
}
});
I hope it solved your issue !
$.ajax() doc

I think you are using Jquery 3.0
so try this
var jqxhr = $.ajax({
xhr: function() {
var xhr = new XMLHttpRequest();
xhr.upload.addEventListener('progress', function(e) {
if (e.lengthComputable) {
showPleaseWait(); // <--------------- This runs even when view returns error
console.log('Percentage uploaded: ' + (e.loaded / e.total))
var percent = Math.round(e.loaded / e.total * 100);
$('#progress-bar').attr('aria-valuenow', percent).css('width', percent + '%');
}
});
return xhr;
},
type: 'POST',
url: form.attr('action'),
enctype: 'multipart/form-data',
processData: false,
contentType: false,
data: new FormData(this),
success: function(data){
if (data.success) {
window.location.href = data.url;
}
if (data.error) {
$("#top").html(data.error.title).addClass('form-field-error');
$("#div_id_title").removeClass('form-group');
}
},
})
.done(function() {
alert( "success" );
})
.fail(function() {
alert( "error" );
$("#top").html(data.error.title).addClass('form-field-error');
$("#div_id_title").removeClass('form-group');
})
.always(function() {
alert( "complete" );
});
// Perform other work here ...
// Set another completion function for the request above
jqxhr.always(function() {
alert( "second complete" );
});

How can I merge two objects to be used in an AJAX response?

I have an issue where I'm using an XHR request, but it's breaking in IE8. My hopes is to extract the XHR call, and the AJAX call, merge them and add them to the $.ajax() function like so:
var loadingXHR = {
xhr: function () {
var xhr = new window.XMLHttpRequest;
xhr.addEventListener('progress', (function (evt) {
var parentWidth, percent, percentComplete, width;
if (evt.lengthComputable) {
width = loadEl.width();
parentWidth = loadEl.offsetParent().width();
percent = 100 * width / parentWidth;
percentComplete = Math.max((evt.loaded / evt.total) * 100, percent);
loadEl.stop().animate({
width: Math.min(percentComplete, 100) + "%"
}, 120);
}
}), false);
return xhr;
}
}
var ajaxResponse = {
type: "POST",
url: url,
dataType: "json",
cache: false,
contentType: "application/json; charset=utf-8",
data: data,
error: function (xhr, textStatus, errorThrown) {
/* error */
},
success: function (model) {
/* success */
}
}
if (conditional) {
return $.ajax($.extend(loadingXHR, ajaxResponse));
}
return $.ajax(ajaxResponse);
However this option doesn't work and my only solution is to create two different AJAX calls and wrap that in a conditional.

jQuery Ajax hangs on large file uploads

I am developing an image hosting website that will send an image over to the server via ajax from jQuery.
If I send a large file, for some weird reason the complete option takes a while to do anything, yet in Developer Tools for Chrome, the Network tab shows me that the request completed and returns anything it should return (In this case, if an image is >20MB, it'll return "File too large" in json format.)
What is the best method to tell ajax to run through it's reporting process once a request is complete, regardless if the file was too large or failed?
This is the code I have so far:
$.ajax({
xhr: function()
{
var xhr = new window.XMLHttpRequest();
xhr.upload.addEventListener('progress', function(evt)
{
if(evt.lengthComputable)
{
var percentComplete = evt.loaded / evt.total;
percentComplete = parseInt(percentComplete * 100);
$('#btn-upload').fadeOut();
$('.progress-circle').delay(500).fadeIn('fast');
progressCircle.animate(percentComplete / 100);
}
}, false);
return xhr;
},
url: $('form').attr('action'),
type: 'POST',
data: formData,
dataType: 'json',
global: false,
cache: false,
contentType: false,
processData: false,
complete: function(jqXHR)
{
if(jqXHR.readyState === 4)
{
var result = $.parseJSON(jqXHR.responseText);
if(jqXHR.status == 422)
{
$('.progress-circle').fadeOut('fast', function()
{
$('.errors p').html(result);
$('.errors').delay(500).fadeIn('fast');
});
}
else
{
window.location.replace(result.url);
}
}
}
}, 'json');

jquery datatables : load real time progress bar

A normal ajax real time progress bar loads like this,
$.ajax({
xhr: function() {
var xhr = new window.XMLHttpRequest();
xhr.upload.addEventListener("progress", function(e) {
var pro = (e.loaded / e.total) * 100;
$('.progress-bar-anim').css('width', pro + '%').attr('aria-valuenow', pro);
}, false);
return xhr;
},
type: "POST",
dataType: 'json',
url: "data.php",
data: {"username": username, "password": password},
success: function(msg) {
if (msg.status == 'success') {
window.location = "dashboard.php"
} else {
hide_progress();
}
}
});
I want to load a real time progress bar in jquery datatables while the server response is being received.How should I go about it ?

Create the table in your success method:
function getData() {
$.ajax({
url : 'example.com',
type: 'GET',
success : handleData
})
}
function handleData(data) {
table = $('#table').DataTable( {
"data": data,
....
}

jQuery Ajax file upload with progress hangs

I'm using jQuery to upload files. Everything worked fine, until I've added xhr: function () {...} code to track file upload progress. Now it just hangs after Start loading image.... If I remove this block from $.ajax, file upload works.
function showProgress(evt) {
if (evt.lengthComputable) {
var percentComplete = (evt.loaded / evt.total) * 100;
$('.meter').attr({'width': percentComplete + '%'});
}
}
console.log('Start loading image...')
$.ajax({
url: '/uploadimage',
type: 'POST',
xhr: function () {
myXhr = $.ajaxSettings.xhr();
if (myXhr.upload) {
myXhr.upload.addEventListener('progress', showProgress, false);
} else {
console.log("Upload progress is not supported.");
}
return myXhr;
},
//Ajax events
beforeSend: function (xhr) {
// CSRF...
},
success: function (data) {
// do smth
},
// Form data
data: formData,
cache: false,
contentType: false,
processData: false
});
What I'm doing with upload progress wrong? Thanks.

Did you get this resolved? Are you using the upload templates provided or using your own custom markup?
The following works for me:
<script type="text/javascript">
$(document).ready(function () {
$('#btnContinue').prop('disabled', true);
$('#fileupload').fileupload({
url: '#Url.Action("UploadChunk", "Upload")',
maxChunkSize: 1048576,
}).addClass('fileupload-processing')
.bind('fileuploadalways', function (e, data) {
if ($('#fileIds').val().indexOf(';' + data.result.id + ';') == -1) {
var pre = $('#fileIds').val() == "" ? ';' : '';
var append = $('#fileIds').val() + pre + data.result.id + ';';
$('#fileIds').val(append);
}
})
.bind('fileuploaddone', function (e, data) {
$('#btnContinue').prop('disabled', false);
});
$.ajax({
url: $('#fileupload').fileupload('option', 'url'),
dataType: 'json',
context: $('#fileupload')[0]
}).always(function () {
$(this).removeClass('fileupload-processing');
});
});
</script>
I do have an issue with my setup, but you should be able to reference my code for what you are trying to achieve.
Submit Additional Form Data without setting formData