Question

我有一个可调整大小的div，里面有一些文本和一个编辑按钮。

在编辑按钮上单击它会打开一个带有文本框和保存按钮的图层，以便用户可以编辑文本。

然后用户单击“保存”，关闭图层并使用某个ajax更新数据库。父页面上的div也更新了一些ajax。

我遇到的问题是div不再可调整大小。

我知道正在执行此操作的代码行以及它为什么这样做但无法找到任何其他解决方案来更新原始div而不会删除可调整大小的代码。

在“保存”按钮上，单击此功能称为

的图层

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

这会更新数据库，并在父页面上调用函数UpdateElementOfParent（）

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

这会使用db中更新的内容更新原始div。

我知道$（'＃'+ myBox）.html（数据）;剥离div的内部html并将其替换为文本，因此删除了jquery可调整大小的文本，但我无法找到另一种更新文本的方法。

我试过了

$('#'+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;

这些都不起作用。

我的javascript不太强大（你可能会说）。

任何人都可以帮忙解决问题吗？

任何帮助非常感谢

快速更新

我注意到如果我使用firebug检查器之前div有任何文本更新就是这样

<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>

但是一旦我更新它（我使用nicedit来格式化文本），div现在有一个名为'content []'的隐藏ipnout

<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>

所以似乎div的结构发生了变化，内部输入需要更新。由于输入没有id，我如何才能使用其名称

进行更新

更多

好的我已经将更新功能编辑到了这个

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

现在当我用新更新的火炬检查原始dv时，结构和内容完全相同。

我需要重新初始化resizable。任何线索？

Answer 1

~~不确定你想要做什么但是。~~

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

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

或者您可以使用.append() http://api.jquery.com/append/，具体取决于您在更新数据库时获得的内容

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

<击> 更新：

从我所看到的data检索带有新文本值的隐藏输入。我建议您更改data以返回其他内容，或手动将input值添加到div。

输入也是错误的。在input value=""应为value=''，因为您已经有"。之后，此功能应将value放在右侧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(); }); }

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

Answer 2

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

jquery resizable在ajax更新后无法正常工作

2 个答案: