Question

In general, resizable() works fine. Here is where I am getting into an issue.

1. I have a div that contains some resizable items that work fine (resizable() applied to them at some point).
2. user can save items for later view (the innerHTML of the div gets saved into a JavaScript array, then div gets cleared so they can do something else)
3. When items get placed back onto div (from array) — I do a $(‘#divname’).append(arrayname[i]); — items are no longer resizable (although visually they have the resizable classes/handle on them)

Here is what I have tried so far (none of which have worked):

1. After append() line, I re-initialize the resizable — $(‘#items’).resizable();
2. After append() line, remove then re-add resizable — $(‘#items’).resizable(‘destroy’).resizable();

Any help is appreciated – thanks.

Answer 1

Ok – I figured out what to do to solve this.

Before saving/storing the innerHTML of the div (as described in step #2 in my question), I destroyed the ‘resizable’ state of any elements in there like this (example selector):

$('#divid .resizable_items').resizable('destroy');

Then I stored the innerHTML of the div into the JavaScript array.

Next, when repopulating the div, I appended the array element and re-initialized the resizable items like so:

$('#divid').append(arrayname[i]);
$('#divid .resizable_items').resizable();

So the issue seems to have been that storing the innerHTML which contained resizable() items did not work when re-appending/adding/rendering them, but destroying the resizables BEFORE storing the innerHTML, and then re-initializing resizable() once they were put back, it all works properly.

So this seems to have addressed the issue – hope it helps.