getting to grips with javascript callbacks - undefined callback data

Question

My javascript skills are limited and I'm having a problem with the structure of a series of functions which I think need callbacks. I've been reading a number of posts and tutorials but it's not sticking...yet..

On my page I have a pop up modal which contains an image. If the user clicks the edit button it's to be edited in aviary. Once that's completed the image properties get saved into a database and then the images within the modal box - and the underlying form - should get updated with the edited image.

My series of events starts with the modal opening:

 $('#editImageLink2').click(function(event) {

    aviaryOnClick('image2', $(this).data('mode'), function(image) {

      #do final bits here

    });
});

Modal pops up then if the user clicks the edit button this next function starts the editor:

function aviaryOnClick(source, mode) {

editedImage = doAviary(source);

if (editedImage) {

    return true;

} else {
    return false;
}

}

So - aviary pops up as expected. Then when the user saves the edited image I'm starting to have trouble:

The doAviary function looks like this:

function doAviary(source) {

console.log("hit doAviary", source);

var featherEditor = new Aviary.Feather({
    apiKey: 'XXXXXXXX',
    apiVersion: 3,
    theme: 'dark', 
    tools: 'all',
    displayImageSize: true,
    maxSize: 1200,
    onSave: function(imageID, newURL) {

        //replace image in modal preview
        var img = document.getElementById(imageID);
        img.src = newURL;
        if (newURL != undefined) {

            storeImage(newURL, updateFormImage(imageData));

            featherEditor.close();

            return true;
        }

    },
    onError: function(errorObj) {
        alert(errorObj.message);

        return false;
    }
});

return featherEditor.launch({
    image: source,
    url: $('#' + source).attr('src')

});


 }

So I'm trying to run storeImage in the onSave event, which should then run a callback to the update images with the image data.

My storeImage function:

function storeImage(newURL, imageData) {

var options = new Object();
options.aviaryURL = newURL;
options.mode = mode;
options.dbID = ($('#dbID').val()) ? $('#dbID').val() : null;

//console.log("store image options object:", options);

jQuery.ajax({
    url: '/filemanager/aviary',
    type: 'POST',
    dataType: 'json',
    data: options,
    complete: function(xhr, textStatus) {
        //called when complete
    },
    success: function(data, textStatus, xhr) {
        //called when successful
        console.log("finished store image", data);
        $.cookie('asset_filename', data.image.filename);
        $.cookie('asset_id', data.image.id);

        imageData(data);

    },
    error: function(xhr, textStatus, errorThrown) {
        //called when there is an error
        imageData(false);
    }
});

so IF the image is saved the data should be passed back to the callback. If it fails it's false

Then in the update image function

function updateFormImage(data) {

if (data.result == 'success') {

    image = data.image;

    #simple updates of elements in page


}

}

My current problem is that on save I'm getting an error imageData is not defined - I'm not sure why this is - if it's waiting for ajax to complete before passing back the data to the callback it should exist.

Why does this error happen?

What better ways are there to refactor this code and use callbacks correctly.

I originally had a callback on the first function but got an error callback function not defined

Confused.

Thanks

Answer 1

imageData is not defined into doAviary.

Also, updateFormImage should return something (imageData).