jquery - getting to grips with javascript callbacks - undefined callback data -

my javascript skills limited , i'm having problem structure of series of functions think need callbacks. i've been reading number of posts , tutorials it's not sticking...yet..

on page have pop modal contains image. if user clicks edit button it's edited in aviary. once that's completed image properties saved database , images within modal box - , underlying form - should updated edited image.

my series of events starts modal opening:

 $('#editimagelink2').click(function(event) {      aviaryonclick('image2', $(this).data('mode'), function(image) {        #do final bits here      }); }); 

modal pops if user clicks edit button next function starts editor:

function aviaryonclick(source, mode) {  editedimage = doaviary(source);  if (editedimage) {      return true;  } else {     return false; }  } 

so - aviary pops expected. when user saves edited image i'm starting have trouble:

the doaviary function looks 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 run storeimage in onsave event, should run callback update images 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 error         imagedata(false);     } }); 

so if image saved data should passed callback. if fails it's false

then in update image function

function updateformimage(data) {  if (data.result == 'success') {      image = data.image;      #simple updates of elements in page   }  } 

my current problem on save i'm getting error imagedata not defined - i'm not sure why - if it's waiting ajax complete before passing data callback should exist.

why error happen?

what better ways there refactor code , use callbacks correctly.

i had callback on first function got error callback function not defined

confused.

thanks

imagedata not defined doaviary.

also, updateformimage should return (imagedata).