Question

I’m trying to execute a callback that is declared in an object (Photo), from another object that has a list of “Photos” (Gallery) I want that callback function to modify the exact object where it belongs. I have something like this:

var photo= function(){
 this.Id;
 this.Url;
 this.someCallBack = function(event, ui, object){
  this.Id = object.Id;
  this.Url = object.Url;
 }
}

var gallery = function(){
 this.Name;
 this.PhotoList = new Array();
 this.Draw = function(){
  for(var i =0; i < this.PhotoList.length; i++){
   var self = this;
   $('#'+this.PhotoList[i].Id).droppable({drop:function(event, ui){
    self.PhotoList[i].someCallBack(event, ui, new{Id = 15, Url = 'someUrl.jpg'});
   }
   });
  }
 }
}

The event is drop (from jquery ui droppable), I tried but it does’t work, there is an “cannot call method ‘someCallBack’ of undefined” error.

The objetive is to modify the original objects from the list in “gallery” in every callback so I can take the list after I’ve finished the dragging and save it.

Is there a way to achieve the behavior I described before??

I’d appreciate any help.

Thanks

Answer 1

Apart from the invalid declaration of someCallback in photo function, you can try to use $('#somePhoto').data('the-photo-object', photo) to store your photo object, and use $('#somePhoto').data('the-photo-object') to retrieve your photo object from a jQuery element in your drop event callback will save you some headache.

Instead of

{drop:function(event, ui){
    self.PhotoList[i].someCallBack(event, ui, new{Id = 15, Url = 'someUrl.jpg'});
}}

This would be less confusing:

// creating a new photo object and assigning it to a jquery element
var aPhoto = new photo();
$('#draggable-photo').data('the-photo-object', aPhoto);

// retrieving photo objects from the dom that is being dragged.
{drop:function(event, ui){
   var droppable = $(this);
   var draggable = ui.draggable;
   // assuming draggable is photo, droppable is gallery
   var photo = draggable.data('the-photo-object');
   photo.someCallBack(event, ui, new{Id = 15, Url = 'someUrl.jpg'});
}}