Creating function within a loop

[acslater323]

I'm looping through every TBODY tag in my table and making it sortable with scriptaculous. The number of these TBODY tags is variable, as it is a database dump of categories and their items.

The problem i'm having is when i assign an onUpdate function to the Sortable. See below:


for(var i=0;i<categories.length;i++) {
var target = categories[i].id;
var handle = categories[i].id + "-handle";
Sortable.create(target,{tag: "tr", only: "sortable", constraint:"vertical",dragOnEmpty: true, cat: categories[i].id, onUpdate:
function() {
alert(this.cat); /*Returns "undefined" */
new Ajax.Updater('sortable-target','/ajax_scripts/item_order.php?productid=' + prodID + '&table=' + itemTable + '&sequence=' + Sortable.sequence('sortable-wrapper'), {
asynchronous:true,
onComplete: function() {
Effect.Highlight('sortable-wrapper');
}
});
}
});
}


The problem happens on this line:

Sortable.create(target,{tag: "tr", only: "sortable", constraint:"vertical",dragOnEmpty: true, cat: categories[i].id, onUpdate:

As you can see, I'm trying to pass the ID of the TBODY to the Sortable object so it is available to the onUpdate: function(), but within that function, the variable "this.cat" is undefined.

If I put "categories[i].id" in the function, it doesn't work either, because that function is not called within the loop, so it is unaware of "i"...

There must be a way to do this!

[diades]

Hi

Have you tried passing the value as an argument?
function(this.cat) {
alert(arguments[0]);

[acslater323]

Interesting idea.. It gives me a "Missing Formal Parameter" error, though, for the line function(this.cat)

Any other ideas?

[diades]

A couple (alright, three :) ):
Try passing the value of this.cat to a variable and use that as an argument Try passing the value of this.cat to a global var and just call it in the function Try using [new Function] instead, pass the values that way.

[acslater323]

You rule!!!

Not sure which one actually worked, but I think the answer was closest to the first one. I took the cat: property out of the object all together and did this:


for(var i=0;i<categories.length;i++) {
var target = categories[i].id; /* VALUE GETS STORED HERE */
var handle = categories[i].id + "-handle";
Sortable.create(target,{tag: "tr", only: "sortable", constraint:"vertical",dragOnEmpty: true, onUpdate:
function(target) {
alert(target) /* WORKS!!!! */
new Ajax.Updater('sortable-target','/ajax_scripts/item_order.php?productid=' + prodID + '&table=' + itemTable + '&sequence=' + Sortable.sequence('sortable-wrapper'), {
asynchronous:true,
onComplete: function() {
Effect.Highlight('sortable-wrapper');
}
});
}
});
}


Not sure why storing that in a variable works, but... wow!

[diades]

Not sure why storing that in a variable works
I think that you will find that it is a question of scope. This.cat only has scope within the object that owns it whereas declaring a new function takes it out outwith that scope.