Home/ Questions/Q 626531
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-13T19:25:45+00:00

I’m using jQuery UI’s resizable function to resize a div containing an image. On

  • 0

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.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    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>
    • 0