Why does this jQuery resizable handle disappear when the div is updated?

Question

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.

 jQuery("#imgdiv").resizable();

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

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.

Answer 1

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.

Answer 2

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>

</div>