Javascript makes my brain hurt...

mic_y

Expert Member
Joined
Dec 23, 2004
Messages
1,644
Hi guys,

I am busy with an MVC project and my JS knowledge is clearly lacking.

What I am trying to do is to populate a Dropzone.js control with files that have already been uploaded to the server as per https://github.com/enyo/dropzone/wiki/FAQ

the JS initialization code is as follows:

Code:
var EditFormInit = function (imageIds) {

    var imageIdsArr = imageIds.split(",");
    var imageFiles = [];
    
    imageIdsArr.forEach(function (ImageId) {
        var requestData = { imageId: parseInt(ImageId) };
        
        $.ajax({
            type: "POST",
            url: "/Admin/PropertyImage/GetImageInfo",
            data: requestData,            
            success: function (data, status, jqXHR) {
                var image = { fileName: data.fileName, size: data.size, thumbnail: data.thumbnailURI };
                return imageFiles.push(image);
            }
        });
    });


I receive the right responses from the server, but no matter what I have tried, the imageFiles array stays bank.

Once the array has been generated with all the correct details, I want to pass it on to the DropZone initialization to create Mock files, but since the imageFiles array stays blank, I never see anything further.

Code:
   Dropzone.options.propertyImages = {
        url: "/admin/PropertyImage/UploadPropertyImages",
        acceptedFiles: "image/*",
        uploadMultiple: true,
        addRemoveLinks: true,
        maxFiles: 20,
        init: function () {
            imageFiles.forEach(function (image, index) {
                var mockFile = { name: image.fileName, size: image.size }
                this.emit("addedfile", mockFile);
                this.emit("thumbnail", mockfile, image.thumbnailURI)
            });
 

_kabal_

Expert Member
Joined
Oct 24, 2005
Messages
3,589
Last edited:

stricken

Expert Member
Joined
Sep 5, 2010
Messages
2,265
The most important concept to grasp about js is that it is mostly asynchronous.
 

mic_y

Expert Member
Joined
Dec 23, 2004
Messages
1,644
When are you checking imageFiles?

You cannot check this after your foreach, because it is only getting populated once the Ajax promise is resolved, inside the success callback.

Look at the jquery When documentation https://api.jquery.com/jquery.when/


Edit: read this first so you can understand how promises work. This is mandatory reading for anyone with JavaScript ambitions imo - http://pouchdb.com/2015/05/18/we-have-a-problem-with-promises.html

Thanks for the helpful hint of where to look _kabal_ :)

Eventually after a lot of head scratching, I got this to work as follows:

Code:
        Dropzone.options.propertyImages = {
        url: "/admin/PropertyImage/UploadPropertyImages",
        acceptedFiles: "image/*",
        uploadMultiple: true,
        addRemoveLinks: true,
        maxFiles: 20,
        init: function () {
            var thisDropzone = this;
            
            imageIdsArr.forEach(function (imageId) {
                $.when(
                    $.ajax({
                        type: "POST",
                        url: "/Admin/PropertyImage/GetImageInfo",
                        data: { imageId: imageId },
                        success: function (data, status, jqXHR) {
                            return image = { fileName: data.fileName, serverImageId: data.serverImageId, size: data.size, thumbnailURI: data.thumbnailURI };
                        }
                    })
                ).then(function (image) {
                    var mockFile = {
                        name: image.fileName,
                        serverImageId: image.serverImageId,
                        size: image.size,
                    }

                    thisDropzone.emit("addedfile", mockFile);
                    thisDropzone.emit("thumbnail", mockFile, image.thumbnailURI);
                })
            });

I did have a look at the article you sent me, and I wont lie, most if it went straight over my head. Luckily I have no aspirations of becoming a JS dev, but unfortunately, with the requirements of developers today, one has to know how to use it.
 

mic_y

Expert Member
Joined
Dec 23, 2004
Messages
1,644
The most important concept to grasp about js is that it is mostly asynchronous.

yup yup, i could not understand how the code was jumping around when stepping through it, but finally seem to have gotten my head around it.
 

_kabal_

Expert Member
Joined
Oct 24, 2005
Messages
3,589
I'll admit that promises are ****ing tricky to decipher initially. Experienced guys get caught up in them, me included, especially coming for a mostly synchronous background.

In your solution 'then' is the key, glad you came right. Remember that 'then' will only occur when the promise resolves (pretty much never use the 2nd or 3rd parameter of 'then'). If you want to handle any errors add a '.catch' to the 'then'
 

FarligOpptreden

Executive Member
Joined
Mar 5, 2007
Messages
5,396
The most important concept to grasp about js is that it is mostly asynchronous.

What the hell are you talking about? AJAX is, by definition and name, asynchronous. One part of AJAX is JavaScript. JS is not only AJAX, it is a scripting language that you can do just about anything with. Ever heard of node.js? Ever used a canvas in HTML5 to animate awesome pictures? Ever used JS for anything other than DOM manipulation or fetching data from a server "asynchronously"? Clearly not...
 

rward

Senior Member
Joined
Oct 26, 2007
Messages
862
What the hell are you talking about?

I think he's referring to this specific instance or possibly the way javascript is currently being used, asynchronously.

I do agree with all your point, I just think you've misunderstood the context of stricken's statement.
 
Top