javascript - jquery resizable not working after ajax update -

i have resizable div has text in , edit button.

on edit button click opens layer textbox , save button user can edit text.

then user clicks save, layer closed , db updated ajax. div on parent page updated ajax.

the problem have div no longer resizable.

i know line of code doing , why doing cant find other solution updating original div without stripping out resizable code well.

on 'save' button click on layer function called

$(document).ready(function() {     $('.button').click(function() {      var edit_content = $('#myfrm').find('.nicedit-main').html();                 var box_id = $('#myfrm').find("#box_id").val();      var page_ref = $('#myfrm').find("#page_ref").val();      var template_ref = $('#myfrm').find("#template_ref").val();       $.post("update_textarea.php",           {             box_id:box_id, page_ref:page_ref, template_ref:template_ref, edit_content:edit_content           },           function(data,status){             updateelementofparent(box_id, page_ref, template_ref)                        edit_box('hide')           });     }); }); 

this updates db , function updateelementofparent() called on parent page

function updateelementofparent(box_id, page_ref, template_ref) {    var mybox = box_id;    $.get("get_content.php", { box_id: box_id, page_ref: page_ref, template_ref:template_ref })    .done(function(data) {                           $('#'+mybox).html(data);                      });  } 

this updates original div updated content db.

i know $('#'+mybox).html(data); strips out inner html of div , replaces text , removes jquery resizable text cant find way update text.

i have tried

$('#'+mybox).value(data); $('#'+mybox).text(data); $('#'+mybox).innerhtml(data); document.getelementbyid('mybox').val(data); document.getelementbyid('mybox').value(data); document.getelementbyid('mybox').text(data); document.getelementbyid('mybox').val=data; document.getelementbyid('mybox').value=data; document.getelementbyid('mybox').text=data; 

none of these work.

my javascript not strong(as can tell).

can solution?

any appreciated

quick update

i noticed if use firebug inspector div before has text updates so

<div id="3" class="textarea1 ui-resizable ui-resizable-autohide" style="width:300px; height:300px;position:absolute; top:10px;left:0px;overflow-y: none;background-color:transparent;" name="textarea[3]">   newtextarea   <div class="ui-resizable-handle ui-resizable-e" style="z-index: 90; display: none;"></div>   <div class="ui-resizable-handle ui-resizable-s" style="z-index: 90; display: none;"></div>   <div class="ui-resizable-handle ui-resizable-se ui-icon ui-icon-gripsmall-diagonal-se" style="z-index: 90; display: none;"></div> </div> 

but once update (i use nicedit format text) div has hidden ipnout within called 'content[]'

<div id="3" class="textarea1 ui-resizable ui-resizable-autohide" style="width:300px; height:300px;position:absolute; top:10px;left:0px;overflow-y: none;background-color:transparent;" name="textarea[3]"></div> <br></br> <input type="hidden" value="   <div align="justify">      <font face="trebuchet ms" size="2"><strong>lorem ipsum</strong> es simplemente el texto de relleno de las imprentas y archivos de texto.</font>   </div>" name="contents[1]"> </input> 

so seem structure of div has change , inner input need updating. input not have id how can update using name

more

ok have edited update function this

function updateelementofparent(box_id, page_ref, template_ref) { var mybox = box_id; $.get("get_content.php", { box_id: box_id, page_ref: page_ref, template_ref:template_ref })     .done(function(data) {                                         var updatedata=data+"<div class='ui-resizable-handle ui-resizable-e' style='z-index: 90; display: none;'></div><div class='ui-resizable-handle ui-resizable-s' style='z-index: 90; display: none;'></div><div class='ui-resizable-handle ui-resizable-se ui-icon ui-icon-gripsmall-diagonal-se' style='z-index: 90; display: none;'></div></div>"; ('#'+mybox).html(updatedata);                                                   });  } 

now when check original dv in firebug newly updated 1 structure , contents same.

i need reinitialise resizable. clues?

not sure want but.

var oldcontent = $('#'+mybox).html();   $('#'+mybox).html(data+oldcontent); 

will keep old content , add new one.

or can use .append() http://api.jquery.com/append/ depending on when updating database

$('#'+mybox).append(data); 

update:

from can see data retrieves hidden input value of new text. suggest either change data give else or add input value div manually.

the input wrong. in input value="" should value='' because have " inside of it. after function should place value inside right div.

function updateelementofparent(box_id, page_ref, template_ref) {    var mybox = box_id;    $.get("get_content.php", { box_id: box_id, page_ref: page_ref, template_ref:template_ref })    .done(function(data) {                           $('#'+mybox).html(data);          var inval = $("input[name='contents["+mybox+"]']").val();         $("#"+mybox).html(inval).resizable();                     });  } 

the basic problem had @ start forgot reinitialize .resizable() on new div.