Strange problem at the intersection of jqUploader and resizables
I'm probably missing something obvious, but I can't see it.
I have a page where users will be able to upload and resize a
portrait. I am using the following code to handle toggling resizable
on/off:
=================================
<code>
$(function() {
$("div.resizecontrols").click(function(event) {
var $resizetarget = $(event.target);
alert("you clicked resizecontrols div");
if ( $resizetarget.is("input.enableresize") ) {
var $thiscontrol = $(this).parents(".control:first").attr("id");
var $thisobjectid = $thiscontrol ;
var $ourid = $thisobjectid.slice(2);
var $canvasid = 'cv' + $ourid;
$( "#" + $canvasid ).resizable({
handles: "all",
aspectRatio: true,
helper: "resizehelper",
knobHandles: true
});
}
if ( $resizetarget.is("input.disableresize") ) {
var $thiscontrol = $(this).parents(".control:first").attr("id");
var $thisobjectid = $thiscontrol ;
var $ourid = $thisobjectid.slice(2);
var $canvasid = 'cv' + $ourid;
$( "#" + $canvasid ).resizable("destroy");
}
});
});
</code>
=================================
The code acts upon the following DIV:
=================================
<code>
<div class="control" id="ec004">
<form enctype="multipart/form-data" action="portrait.php"
method="POST" id="up004" class="uploadimage">
<fieldset>
<ol>
<li class="uploadimg">
<label for="portraitimg_file">Upload a file:</label>
<input name="portraitimg_file" id="portraitimg_file" type="file" />
<input name="thename" class="thename" value="portrait.jpg"
type="hidden">
</li>
</ol>
</fieldset>
<input type="submit" name="submit" value="Upload File" />
</form>
<div class="resizecontrols">
<input type="button" value="Turn Resizing On" class="enableresize" />
<input type="button" value="Turn Resizing Off" class="disableresize" /