Take the 2-minute tour ×

I'm using jQuery UI's resizable function to resize a div containing an image. On initial page load, the div contains someimage.png and the resizing works fine with the code below. The handle appears on the bottom right corner and I can click and drag it to resize the div.


  <div id="imgdiv" class="ui-widget-content">
    <img src="someimage.png" />

Then I submit a form and a new image is fetched from a rails server using ajax:

 page.replace_html 'imgdiv', "<img src=\"newimg.png\">"

This updates the div with the new image but the resizable handle disappears and I can no longer resize the div. Do you know why this might be? Thanks.

share|improve this question
Thank you Nick Craver and tvanfosson for your lightning fast replies. I'm working around this by creating a new div for the img inside the resizable div, so that I don't have to call resizable() again. –  Hrishi Mittal Feb 24 '10 at 23:21

2 Answers 2

up vote 2 down vote accepted

The resizeable interface is generated by adding DIVs to the DIV which you are making resizeable that implement the UI elements. When you replace the html, you're also replacing the generated content that with the UI elements. I think you need to rerun the resizeable() code after you've replaced the HTML.

The generated HTML (after applying the resizeable() method) looks something like (adapted from the jQuery docs) the following. Its the inner DIVs that are getting removed.

<div class="ui-widget-content ui-resizable">
   <img src="someimage.png" />  <!-- your original code -->
   <div style="-moz-user-select: none;" unselectable="on" class="ui-resizable-handle ui-resizable-e"></div>
   <div style="-moz-user-select: none;" unselectable="on" class="ui-resizable-handle ui-resizable-s"></div>
   <div unselectable="on" style="z-index: 1001; -moz-user-select: none;" class="ui-resizable-handle ui-resizable-se ui-icon ui-icon-gripsmall-diagonal-se"></div>

share|improve this answer

This happens because the DOM element you created the handle on is destroyed and replaced as part of the post-back, you need to call jQuery("#imgdiv").resizable(); again once your request finishes.

share|improve this answer
But the handle is on the containing div, not the img. How is it destroyed? EDIT: tvanfosson answered my question below. –  Hrishi Mittal Feb 24 '10 at 22:59
@Hrishi - You're destroying the little html bit it creates in the div for the handle by replacing the html in the div with your own. –  Nick Craver Feb 24 '10 at 23:01

Your Answer


