0

I have a resizable div that has some text in it and a edit button.

On the edit button click it opens a layer with a textbox and save button so the user can edit the text.

Then the user clicks save, the layer is closed and the db updated with some ajax. The div on the parent page is also updated with some ajax.

The problem I have is that the div is no longer resizable.

I know the line of code that is doing this and why it is doing it but cant find any other solution to updating the original div without stripping out the resizable code as well.

On the 'save' button click on the layer this function is 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 the db and the function UpdateElementOfParent() is called on the 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 the original div with the updated content from the db.

I know the $('#'+myBox).html(data); strips out the inner html of the div and replaces it with the text and so removes the jquery resizable text but I cant find another way to update the 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 is not too strong(as you can probably tell).

Can anyone help with a solution?

any help greatly appreciated

QUICK UPDATE

I noticed that if I use firebug inspector the div before it has any text updates is like 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 I update it (I use nicedit to format the text) the div now has a hidden ipnout within it 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 it would seem that the structure of the div has change and the inner input would need updating. As the input does not have an id how can I update just using its name

MORE

ok I have edited the update function to 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 I check the original dv in firebug with the newly updated one the structure and contents are exactly the same.

I need to reinitialise the resizable. any clues?

4

2 回答 2

0

我使用了 dt192 的建议，并在 div 中添加了一个跨度并更新了跨度，效果很好

于 2013-04-21T16:08:43.873 回答
0

不太确定你真的想做什么，但是。

var oldContent = $('#'+myBox).html();  
$('#'+myBox).html(data+oldContent);

将保留旧内容并添加新内容。

或者您可以使用.append() http://api.jquery.com/append/取决于更新数据库时返回的内容

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

更新：

从我所看到的情况来看data，使用新文本的值检索隐藏的输入。我建议您要么更改data以回馈其他东西，要么手动添加该input值。div

输入也是错误的。在里面应该是因为你已经在input里面了。之后这个函数应该放在右边。value=""value=''"valuediv

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();                
    }); 
}

您一开始遇到的基本问题是您忘记重新初始化.resizable()新的div.

于 2013-04-18T11:03:43.507 回答