resizable not working after redrawing divs

classic Classic list List threaded Threaded
3 messages Options
Reply | Threaded
Open this post in threaded view
|  
Report Content as Inappropriate

resizable not working after redrawing divs

dojohnso
This is a tricky issue. I'll try to describe it and maybe include some code. I've been working with jQuery for over a year now, so I'm pretty familiar with it.

I have a dynamic custom form creator I'm working on (the "form" is just a big container div). Elements of the form are all contained in container divs which have the jQuery UI draggable, droppable, selectable, and resizable attached to them, each with many options and start/stop/etc functionality. I bind this functionality on page load via a single custom function ("bindFormControls") which finds all divs with the appropriate class in the form container div. This all works fine on the load.

The issue arises in the following situation:

Users can edit the content of these element container divs via an ajaxy pop-up editor div. When they click on save, the original container div is removed from the form and a new one is drawn and appended to the form, then i call the bindFormControls function i called on page load to reattach the ui functionality.

The issue is if I call the bindFormControls function immediately after the append function, the resizable functionality is not reattached to the new div. The others (select/drag/drop) all work just fine.

My first thought was maybe the bindFormControls function was getting called too fast and the container div wasn't drawn fully yet (even though 3 of the 4 ui's were working), so I did a setTimeout("bindFormControls()",250) to delay it. When I do this, the newly drawn div gets all 4 ui's working just fine, but now every other element container div doesn't get resizable, but they do get the other 3 ui's and the resize handles (more than could be said for the first case).

Does anyone have thoughts (assuming you could follow this) on how to fix this? One thought I had is to rewrite bindFormControls() to be able to use it on an individual object instead of every element via a class selector, but I wanted to see if there is a bigger issue before putting in the time to do that.

Please let me know if you have any questions or need more clarification on something. I'm using jQuery v1.2.6 and UI v1.5.2.

Thanks in advance for any help.
Reply | Threaded
Open this post in threaded view
|  
Report Content as Inappropriate

Re: resizable not working after redrawing divs

dojohnso
the issue with this was that the handle is losing it's width, height, border, and background styles. by adding the ui-resizable-handle class to my css with this properties set to match how they initially are loaded, the issue is resolved.


dojohnso wrote
This is a tricky issue. I'll try to describe it and maybe include some code. I've been working with jQuery for over a year now, so I'm pretty familiar with it.

I have a dynamic custom form creator I'm working on (the "form" is just a big container div). Elements of the form are all contained in container divs which have the jQuery UI draggable, droppable, selectable, and resizable attached to them, each with many options and start/stop/etc functionality. I bind this functionality on page load via a single custom function ("bindFormControls") which finds all divs with the appropriate class in the form container div. This all works fine on the load.

The issue arises in the following situation:

Users can edit the content of these element container divs via an ajaxy pop-up editor div. When they click on save, the original container div is removed from the form and a new one is drawn and appended to the form, then i call the bindFormControls function i called on page load to reattach the ui functionality.

The issue is if I call the bindFormControls function immediately after the append function, the resizable functionality is not reattached to the new div. The others (select/drag/drop) all work just fine.

My first thought was maybe the bindFormControls function was getting called too fast and the container div wasn't drawn fully yet (even though 3 of the 4 ui's were working), so I did a setTimeout("bindFormControls()",250) to delay it. When I do this, the newly drawn div gets all 4 ui's working just fine, but now every other element container div doesn't get resizable, but they do get the other 3 ui's and the resize handles (more than could be said for the first case).

Does anyone have thoughts (assuming you could follow this) on how to fix this? One thought I had is to rewrite bindFormControls() to be able to use it on an individual object instead of every element via a class selector, but I wanted to see if there is a bigger issue before putting in the time to do that.

Please let me know if you have any questions or need more clarification on something. I'm using jQuery v1.2.6 and UI v1.5.2.

Thanks in advance for any help.
Reply | Threaded
Open this post in threaded view
|  
Report Content as Inappropriate

Re: resizable not working after redrawing divs

shivendra
This post has NOT been accepted by the mailing list yet.
In reply to this post by dojohnso
sir
After a long time i also suffer from same problem. In my form i generate a input text box and image after click on it his code is show below div i am able to re-size my input or image but after click on his code section i am unable to re-size http://110.234.26.137/wysiwygeditor  this is   my link. If possible please help me to solve my problem. this is a screen shoot of my page.
my editor page

Thanks in advance for any help.
Loading...