jquery resisizable not working when wrapInner is used

StackOverflow https://stackoverflow.com/questions/16665342

  •  30-05-2022
  •  | 
  •  

Question

I have a span nested within a jQuery resizable div, which is nested within a jQuery draggable div.

I am using wrapinner to add a textarea to the span when the span is clicked for editing purposes.

For some reason, the resizable is not working.

I dont know if I am missing something obvious.

Any help greatly appreciated

heres a jsfiddle http://jsfiddle.net/VXfHD/

and the code

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 <title>Untitled Document</title>
 <script src="http://code.jquery.com/jquery-1.9.1.js"></script>   
 <script src="http://code.jquery.com/ui/1.10.1/jquery-ui.js"></script> 
 <script>
 $(document).on('click', '#span22', function (event) {
$('#span22').wrapInner('<textarea style="width:100%; height:100%; background-color:transparent; border:0"/>');
$('span textarea').focus();
var box_id = 22;
var page_ref = 170;
var template_ref = 15;
var myBox = "span" + box_id;
$.getJSON("get_edit_content.php", {
    box_id: box_id,
    page_ref: page_ref,
    template_ref: template_ref
 })
    .done(function (data) {
    $('textarea').html(data.a);
 });
});

$(document).on('blur', 'textarea', function () {
 $("span").html($('span textarea').val());
 var edit_content = $('#span22').html();
 var box_id = 22;
 var page_ref = 170;
 var template_ref = 15;
 $.post("update_textarea.php", {
    box_id: box_id,
    page_ref: page_ref,
    template_ref: template_ref,
    edit_content: edit_content
 },

function (data, status) {});
}).on('click', 'textarea', function (event) {
event.stopPropagation();
});

$(function () {
 $(".resizable").resizable();
 $("#draggable").draggable();
});  
</script>  
</head>

 <body>
  <div id="draggable">
<div class="resizable" style="width:300px;height:200px; background:red">
        <span id="span22">testing</span>
    </div>
 </div>
</body>
</html>
Was it helpful?

Solution

as answered by karthik

I had missed checking the jquery UI file in the frameworks and extansions

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top