I've got a page that's doing a series of file uploads via AJAX post. Having the posts run as async=true was causing (maybe) communication) problems, so I converted them to async=false. That sorted the problems, but not some screen variables aren't updating as the files upload.
I think it's because now that the posts are not async, processing never leaves the function, so the changed observables never get a chance to be updated to the outside world (I'm surely describing that terribly)
I've added in "valueHasMutated" calls, but to no avail.
Values on screen "uploadBegins" and "manifestCount" are the variables in question.:
<!-- ko if: uploadBegins() --> <span data-bind="text:
manifestCount()"></span> of <span data-bind="text: koXLSdata().length
- (hasHeaderRow() ? 1 : 0)"></span> records complete
<!-- /ko -->
uploadBegins should be set to true so the section becomes visible, and manifestCount should iterate on each upload.
Javascript (edited - hopefully I didn't leave something important out) (lines that reference variables pointed out with ---> ) :
processUploads = function (callback) {
callbacks.loading();
getTabDataForModel(viewModel.selectedSupplier());
var koXLSdata = viewModel.koXLSdata();
viewModel.badUploads(0);
viewModel.manifestCount(0);
---> viewModel.uploadBegins(true);
---> viewModel.uploadBegins.valueHasMutated();
viewModel.uploadComplete(false);
var filetoupload = null;
var thisWasABadRec = false;
var theCatCode = 0;
for (var i = 0; i < viewModel.koXLSdata().length; i = i + 1) {
uploadFile(koXLSdatarow, filetoupload, theCatCode, viewModel.pmiChecked(), i);
}
}
uploadFile = function (fileData, file, theCatCode, pmiChecked, manifestRow) {
//("D" contains file upload data, build not included for brevity)
//vmfile.isUploading(true);
$.ajax({
async: false,
type: "POST",
url: apiPath + "AccountDocuments",
data: d,
cache: false,
contentType: false,
processData: false,
success: function (jqXHR) {
uploadFileSuccess(jqXHR, vmFile);
},
error: function (jqXHR, textStatus, errorThrown) {
uploadFileError(jqXHR, textStatus, errorThrown, vmFile)
},
});
}
uploadFileError = function (jqXHR, textStatus, errorThrown, file) {
viewModel.badUploads(viewModel.badUploads() + 1);
---> viewModel.manifestCount(viewModel.manifestCount() + 1);
---> viewModel.manifestCount.valueHasMutated();
checkForComplete(viewModel.manifestCount());
},
uploadFileSuccess = function (jqXHR, file) {
---> viewModel.manifestCount(viewModel.manifestCount() + 1);
---> viewModel.manifestCount.valueHasMutated();
checkForComplete(viewModel.manifestCount());
},
checkForComplete = function (manifestCount) {
var rowsOnly = 0;
if (viewModel.hasHeaderRow)
rowsOnly = viewModel.koXLSdata().length - 1;
else
rowsOnly = viewModel.koXLSdata().length;
if (manifestCount === rowsOnly) {
uploadFileComplete();
}
},
Again, the uploads are working, the issue is the screen updates. I'm not seeing the section open, nor the count rising. It pops up when the processing is done, with the proper count, like so:
valueHasMutated looked like it would force a change to the observable, but I suspect that the screen can't update while I'm in the loop...
...unless I do...a thing?
And I don't know what the "thing" is.
EDIT - "notifySubscribers()" didn't seem to do it either.