this.destroy is not a function

[Big Head]

I could really use some help implementing the destroy method on
jScrollPane.

http://mgh.bigheadservices.com/sweets/v4/index-test.html

I have a whole bunch of stuff going on with this page. The gist of it
is that the dimensions of the 3 main content areas are based on
available viewport dimension and the dimensions of each's siblings.
What this means is that anytime a user changes the size of their
window, the layout must adjust to the new size.

To implement the jScrollPane, I wait until the new box dimensions have
been set. This is all handled in the very bloated setDimensions()
function.

I was initially setting the jSP with $
('.scrollbars').jScrollPane({showArrows: true});

The problem is that I really need to destroy them at the beginning of
the function and initialise them after everything is set. To do this,
I moved the initialization and destroy methods to their own functions
and then called those functions in the setDimensions function.

I used the example on Kelvin's site creating:

apis = [];

function addScrollbar(){
$('.scrollbar').each(function(){
apis.push($(this).jScrollPane({showArrows: true}).data().jsp);
});
return false;
}

and

function destroyScrollbar(){
if (apis.length){
$.each(apis, function(i) {
this.destroy();
});
apis = [];
}
return false;
}

In Firefox, I get this.destroy is not a function.

In console, when I type apis; it returns [undefined, undefined,
undefined, undefined, undefined], so the count is correct. I don't
know that it shouldn't be naming the objects though.

Can anybody tell me what I'm doing wrong, please?

[Big Head]

Am I correct in thinking that data('jsp') pushed to apis should not be
undefined?

[thirdender]

Hey, any luck fixing this yet?

Everything looks like it's working here in FF 10.0.1, and it looks
like the code is pretty much the same as posted above.

Thanks,
Rob

[Big Head]

Not yet. It kind of looks like its working (also using 10.0.1), but if
you check the Firebug console, you'll see the 'this.destroy is not a
function' error.

I messaged Kelvin earlier and he's understandably busy, but he
suggested to try splitting initialise & push, like this:

var blah = $(this).jScrollPane({showArrows: true});
console.log(blah.data('jsp'));
apis.push(blah.data('jsp'));

Which I have done (locally). The console returns 'undefined'. To
actually return the data object, I need to use:

console.log(blah.data('data.jsp'));

If I do this and output the content of apis to console, it returns:

[Object { jsp=JScrollPane}, Object { jsp=JScrollPane}, Object
{ jsp=JScrollPane}, Object { jsp=JScrollPane}, Object
{ jsp=JScrollPane}]

This leads me to believe (maybe incorrectly) that I can now access the
destroy function from the data for each instance, but I'm having great
trouble figuring out how. I feel like I'm very close, but just can't
figure out how to access the function from the data.

Thanks for looking at it.

[Big Head]

Yeah, I have just worked myself into circles or a corner or a pit of
despair - can't decide which.

Pushing data('data.jsp') to apis makes it available. Pushing
data('jsp') does not.

Using data('data.jsp'), so in my destroy function, I use:

this.jsp.destroy(); instead of this.destroy();

I don't get any errors, but nothing is destroyed. It's also the only
way I've found so far to run it without any errors.

[Big Head]

I was wrong. this.jsp.destroy(); does work.I discovered this by
replacing the detroy() function with scrollToBottom(). Perfect!

So the problem is not a jScrollPane implementation issue, but an "I
have a problem in my other code" issue.

Thanks for the input.