JQuery Resizable () UI Task
Generally, resizable () works fine. This is where I get into the problem.
- I have a div that contains some resizable elements that work fine (resizable () is applied to them at some point).
- the user can save the elements for later viewing (the innerHTML div will be saved to a JavaScript array, then the div will be cleared so they can do something else)
- When the elements are returned to the div (from the array) - I do $ ('# divname'). append (arrayname [i]); - elements no longer change (although visually they have mutable classes / descriptor on them)
Here's what I've tried so far (none of them worked):
- After the append () line, I reinitialize the resizable - $ ('# items'). resizable ();
- After the append () line, remove then re-add resizable - $ ('# items'). resizable ('destroy'). resizable ();
Any help is appreciated - thanks.
a source to share
Ok - I figured out what to do to fix this problem.
Before saving / saving the innerHTML div (as described in step # 2 in my question), I destroyed the "resizable" state of any elements there, like this (selector example):
$('#divid .resizable_items').resizable('destroy');
Then I saved the innerHTML div in a JavaScript array.
Then, when the div was repopulated, I added an array element and reinitialized the changed elements like this:
$('#divid').append(arrayname[i]);
$('#divid .resizable_items').resizable();
So the problem was that saving the innerHTML that contained the resizable () objects didn't work when re-adding / adding / rendering, but destroying the resizables before saving the innerHTML by initializing resizable () after returning them, everything works correctly.
So this one seems to fix the problem - hope it helps.
a source to share