0

テキストと編集ボタンを含むサイズ変更可能な 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);                 
    }); 
}

これにより、データベースからの更新されたコンテンツで元の div が更新されます。

$('#'+myBox).html(data); を知っています。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);                                              
    }); 
}

新しく更新されたものでfirebugの元のdvをチェックすると、構造と内容はまったく同じです。

サイズ変更可能なものを再初期化する必要があります。手がかりはありますか？

4

2 に答える 2

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=''すでにそれの"中にあるからです。その後、この関数は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。

于 2013-04-18T11:03:43.507 に答える