Initialize Error when in Foundation Reveal

[dpDesignz]

I'm using the ExpandingTextareas plugin, and I have a foundation reveal ajax call to load some data, and on document ready I'm using $("#foo").expanding(); but I'm getting the following error

ExpandingTextareas: attempt to initialize an invisible textarea. Call expanding() again once it has been inserted into the page and/or is visible.

How can I get this to find the dynamically added data? If I check the source code the textarea is definitely there.

I've tried adding a delay to the initialization but no luck :(

[bgrins]

We are checking whether it is visible by looking at it's offsetWidth and offsetHeight 0. IIRC the problem with it being invisible is that there is no min height to set the clone to. In your case you may need to wait for the modal to be fully loaded (waiting for some sort of open or shown event) before trying to call expanding().

[dpDesignz]

Hmm, I tried the success function (http://foundation.zurb.com/docs/components/reveal.html) but still the same error :( It does have a set height, but does it need a minimum height set?

[bgrins]

It does have a set height, but does it need a minimum height set?

No, it just needs to be visible. Try running this code in the success function: $("mytextarea").is(":visible"). If that's false, then the initialization will not work.

As a debugging step, see if it works if you wait to initialize inside of a setTimeout function. If that works, then there is probably some other callback or event that is needed from the lib that will let you know once everything is visible.

[domchristie]

I tried the success function

You may want to try calling expanding on the opened.fndtn.reveal event (http://foundation.zurb.com/docs/components/reveal.html#event-bindings), rather than in the success callback. The textarea should be in the DOM once the opened.fndtn.reveal has fired, whereas it may not be just after AJAX request has succeeded.

[dpDesignz]

@domchristie you my friend are a legend!!!!! The only weird this is I'm now getting ExpandingTextareas: attempt to initialize a textarea that has already been initialized. Subsequent calls are ignored. every time it loads which is weird.

So just to confirm, my code I used is as follows

$(document).on('opened.fndtn.reveal', '[data-reveal]', function () {
    if($('#nilComments').length) {$("#nilComments").expanding();} // If statement as I have multiple reveals on the page
});

If you have a Stackoverflow account feel free to answer the question over there at http://stackoverflow.com/questions/26983633/expandingtextareas-initialize-error-when-in-foundation-reveal and I'll mark it for you :)

[domchristie]

Done. Thanks!