Resize handles fail to appear after partial page update (ASP.NET AJAX)

• I apply .resizable() to my element (with options, code listed further down). The handles appear and work with no problems when the page first loads
• I click a button which causes an AJAX update of that region of the page
• .resizable() is applied again to the element exactly as before, once the new content has been inserted into the DOM
• This time, the handle elements are generated but a large amount of their style is missing and they are all 0x0 pixels, so cannot be seen or dragged. When I hover over the containing element, their display: property is changing to block - so clearly some of the resizable functionality is being applied, but something important is missing!

Note that it is the ASP.NET AJAX framework which is performing the partial page updates, NOT jQuery. However I am using a jQuery/UI layer for a large part of my user interface.

Some other notes:

• I'm also applying .draggable() to the element. Draggable is working fine after EVERY postback.

• I've tried removing .draggable() from this code but the problem with .resizable() still occurs.

• The resizable() always works on the first page load. However if I try to apply it to content which has just been inserted into the DOM by AJAX, then this bug occurs. If the page loads first WITHOUT the resizable element showing at all, and then an AJAX update causes the resizable element to appear, then the bug still occurs. So it's not that it only works the first time it is applied, it's that it only works on "virgin" DOM elements.

• Clearly this could have something to do with my particular page structure, although I'm not sure how. I'll try to create a simplified test case to see if this can be reproduced in a less complex page. However, I've been making various modifications to the DOM both around the affected element and further up the hierarchy, and this has not had any effect on this bug.

• I noticed this bug whilst using UI 1.5, so I updated to 1.5.2 and it is still there. 1.5.2 is not in the "Version" list in trac, can it be added?

• Affects IE7, Firefox 2 and Firefox 3. Have not tested any other browsers as yet.

• Should also note that I'm using a customized download of UI (minified) which just contains Core, Resizables, Draggables and Droppables.

The function I'm using to apply the resizable is as follows:

	/// <summary>Sets up the marquee sizer around the thumbnail box</summary>
	marqueeSetup : function() {
	    $(".selectMarquee")
	        .not(".uiSelectMarquee").addClass("uiSelectMarquee")
	        .each(function(){
	            var image = $(this).prev();
	            var leftInput = $(this).siblings(".imageLeft");
	            var widthInput = $(this).siblings(".imageWidth");
	            var topInput = $(this).siblings(".imageTop");
	            var heightInput = $(this).siblings(".imageHeight");
	            $(this)
	                // Allow marquee to resize
	                .resizable({
	                    // Keep within image bounds
	                    containment:image,
	                    // Show handles on hover
	                    autohide:true,
	                    // Display all handles
	                    handles:"all",
	                    // Constrain corners
	                    	                    
	                    // Save values on stop
	                    stop:function(evt,ui){
	                        var helper = $(this);
	                        leftInput.attr("value",helper.css("left"));
	                        topInput.attr("value",helper.css("top"));
	                        widthInput.attr("value",helper.width());
	                        heightInput.attr("value",helper.height());
	                    }
	                })
	                // Allow movement
	                .draggable({
	                    containment:image,
	                    // Save values on stop
	                    stop:function(evt,ui){
	                        var helper = $(this);
	                        leftInput.attr("value",helper.css("left"));
	                        topInput.attr("value",helper.css("top"));
	                    }
	                });
	        });
	}

This function is executed after every partial-page update, so if a new .selectMarquee has been added to the page, the resizable should be re-applied. If a partial-page update does NOT update this particular element, the uiSelectMarquee class is there as a flag to prevent me attempting to re-apply the resizable.

The HTML for the element is as follows:

<div id="Layout_Edit_Editor3145_imageEditor_SelectMarquee" 
class="selectMarquee" style="top:9px;width:172px;left:45px;height:236px;">
            </div>
                    <input name="Layout$Edit$Editor3145$imageEditor$ImageTop" 
type="text" value="9" id="Layout_Edit_Editor3145_imageEditor_ImageTop" 
class="text imageTop" />
                    <input name="Layout$Edit$Editor3145$imageEditor$ImageLeft" 
type="text" value="45" id="Layout_Edit_Editor3145_imageEditor_ImageLeft" 
class="text imageLeft" />
                    <input name="Layout$Edit$Editor3145$imageEditor$ImageWidth" 
type="text" value="172" id="Layout_Edit_Editor3145_imageEditor_ImageWidth" 
class="text imageWidth" />

                    <input name="Layout$Edit$Editor3145$imageEditor$ImageHeight" 
type="text" value="236" id="Layout_Edit_Editor3145_imageEditor_ImageHeight" 
class="text imageHeight" />

Any insight will be massively appreciated!