ReplaceWith 함수가 Clone과 함께 작동하지 않습니다.

Question

JQuery를 처음 사용합니다. ReplaceWith 및 Clone을 사용하여 사용자가 취소 버튼을 클릭하면 텍스트 상자의 데이터를 원래 상태로 빠르게 복원하려고합니다. 사용자가 편집을 클릭하면 편집 단추가 사라지고 저장 및 취소 단추로 바뀌고 텍스트 상자가 활성화됩니다. 취소 버튼을 누르면 변경된 경우 원래 텍스트가 복원 된 상태에서 취소됩니다.

편집 버튼을 클릭하면 복제 내용을 저장하려고 시도하고 취소를 클릭하면 변경 사항을 취소하기 위해 RestoreWith를 시도합니다. CloneContent 및 RestoreContent 함수는 모두 예상대로 호출되지만 (아래 코드의 모든 경고는 예상대로 나타납니다) 취소를 클릭하면 화면에 아무 것도 변경되지 않습니다. 내가 도대체 ​​뭘 잘못하고있는 겁니까?

스크립트 -

var divClone; 

function CloneContent(mydiv) { 
    alert('cloning'); 
    divClone = $(mydiv).clone(true, true); 
    alert('finished cloning'); 
} 

function RestoreContent(mydiv) { 
    alert('restoring'); 
    $(mydiv).replaceWith($(divClone)); 
    alert('finished restoring'); 
    return false; 
} 

및 ASP 코드 -

<asp:panel ID="pnlNames" runat="server"> 

    <asp:LinkButton ID="lnkEditNames" runat="server" 
     OnClientClick="CloneContent('<%=pnlNames.ClientID%>')" 
     OnCommand="lnkEdit_Click" Text="Edit" /> 

    <asp:LinkButton ID="lnkUpdateNames" runat="server" 
     OnCommand="lnkUpdate_Click" Text="Save" Visible="false" /> 

    <asp:LinkButton id="lnkCancelEditNames" runat="server" 
     onclientclick="RestoreContent('<%=pnlNames.ClientID%>')" 
     Text="Cancel" Visible="false" /> 

    <asp:TextBox runat="server" MaxLength="50" ID="txtLastName" Enabled="false" /> 


</asp:panel> 

Answer 1

테스트 아직 .. 그러나 당신이 jQuery를 직접 클라이언트 ID를 전달하는? id를 사용하여 요소를 찾으려면 접두사를 #으로해야한다고 생각합니다.

를 교체 할 때

둘째, 난 당신이 더 이상 $의 사업부를 전달할 필요가 있다고 생각하지 않습니다

업데이트 된 코드 : 사용자가 당신을 "취소"를 클릭 할 때

var divClone; 

function CloneContent(mydiv) { 
    alert('cloning'); 
    divClone = $('#' + mydiv).clone(true, true); 
    alert('finished cloning'); 
} 

function RestoreContent(mydiv) { 
    alert('restoring'); 
    $('#' + mydiv).replaceWith(divClone); 
    alert('finished restoring'); 
    return false; 
} 

Answer 2

원래 데이터를 복원하려면 Clone 및 ReplaceWith을 전혀 사용할 필요가 없습니다.

편집시 현재 값을 저장하고 취소시 저장된 값으로 필드를 재설정하십시오.

또한 jQuery로 작업 할 때 onclick 또는 유사한 인라인 이벤트 처리기를 사용하지 마십시오. 요소 ID도 피하십시오. CSS 클래스를 대신 사용하십시오. 이렇게하면 페이지의 모든 입력 필드에 동일한 JavaScript 코드를 사용할 수 있습니다.

ASP.NET :

<asp:panel ID="pnlNames" runat="server"> 
    <asp:LinkButton CssClass="edit" Text="Edit" /> 
    <asp:LinkButton CssClass="save" Text="Save" Visible="false" /> 
    <asp:LinkButton CssClass="cancel" Text="Cancel" Visible="false" /> 
    <asp:TextBox MaxLength="50" ID="txtLastName" Enabled="false" /> 
</asp:panel> 

대응 JS : 바른 길에 저를 착용하는 Tomalak의 대답에

$(".edit").on("click", function() { 
    var $textBox = $(this).parent().find(":text"), 

    // hide and show buttons  
    $(this).hide(); 
    $(this).parent().find(".save").show(); 
    $(this).parent().find(".cancel").show(); 

    // save current value into jQuery data for the textbox 
    $textBox.data("oldValue", $textBox.val()) 
}); 

$(".cancel").on("click", function() { 
    var $textBox = $(this).parent().find(":text"), 

    // hide and show buttons  
    $(this).hide(); 
    $(this).parent().find(".save").hide(); 
    $(this).parent().find(".edit").show(); 

    // restore textbox value from jQuery data 
    $textBox.val($textBox.data("oldValue")); 
}); 

$(".save").on("click", function() { 
    // hide and show buttons  
    $(this).hide(); 
    $(this).parent().find(".cancel").hide(); 
    $(this).parent().find(".edit").show(); 
}); 

Answer 3

감사합니다,하지만 난 코드에 의존하고 싶지 않았다 div의 계층 구조 또는 편집 가능한 div 내의 입력 요소 수 나는 클래스 이름을 사용하여 "parent()"대신에 div를 식별한다.

먼저 html. 두 개의 텍스트 상자, 드롭 다운 목록 및 체크 상자를 테스트합니다.

<div id="divNames" name="divNames" class="LPCEditGroup memNames"> 

    <a id="lnkEditNames" name="lnkEditNames" onclick="SaveDefault(this)" class="editbutton memNames" href="#/">Edit</a> 

    <asp:LinkButton ID="lnkUpdateNames" runat="server" OnCommand="lnkUpdate_Click" Text="Save" style="display:none;" class="updatebutton memNames"/> 
    <a id="lnkCancelEditNames" name="lnkCancelEditNames" onclick="RestoreDefault(this)" style="display:none" class="cancelbutton memNames" href="#/">Cancel</a> 
    <br />  
    <asp:TextBox runat="server" MaxLength="50" ID="txtLastName" CSSClass="myinput memNames" Enabled="false" /> 
     <asp:TextBox runat="server" MaxLength="50" ID="TextBox1" CSSClass="myinput memNames" Enabled="false" /> 
     <asp:DropDownList runat="server" ID="dd" CssClass="myinput memNames"  > 
      <asp:ListItem Text ="One" Value="1"/> 
      <asp:ListItem Text ="Two" Value="2" /> 
      <asp:ListItem Text ="Three" Value="3" /> 

     </asp:DropDownList> 
<asp:CheckBox ID="chk" runat="server" Checked="true" CssClass="myinput memNames" /> 
</div> 

하고 스크립트가 :

<script type="text/javascript"> 
     $(document).ready(function(){ 

      $('.editbutton').click(function() { 
      //remove the class name 'editbutton' from the class string which will leave us with the classname shared by the group of elements we want to edit 
      var editClass = $(this).attr('class').replace('editbutton', '').replace(' ', ''); 

      var mydiv = $('div.LPCEditGroup.' + editClass).get(0); 

      //replace the class name to change the panel to look selected 
      $('#' + mydiv.id).attr('class', 'LPCEditGroupEditing ' + editClass); 

      //get all elements sharing the edit group classname & store the default values 
      $(mydiv).find('.myinput').each(function (curIdx, curO) { 
       $(curO).attr('default-value', $(curO).val()); 
      }); 

      $('div#' + mydiv.id).find('.editbutton').hide(); 
      $('div#' + mydiv.id).find('.updatebutton').show(); 
      $('div#' + mydiv.id).find('.cancelbutton').show(); 

      //enable everything in the panel that the edit button is in 
      $('div#' + mydiv.id).find(':input').prop('disabled', false); 

      return true; 
     }) 
     $('.cancelbutton').click(function() { 

      //restore default for all items where edit group class name is for the current edit group 

      var editClass = $(this).attr('class').replace('cancelbutton', '').replace(' ', ''); 
      var mydiv = $('div.LPCEditGroupEditing.' + editClass).get(0); 


      //replace the class name to change the panel to look unselected 
      $('#' + mydiv.id).attr('class', 'LPCEditGroup ' + editClass); 


      $(mydiv).find('.myinput').each(function (curIdx, curO) { 
       $(curO).val($(curO).attr('default-value')); 
      }); 

      $('div#' + mydiv.id).find('.editbutton').show(); 
      $('div#' + mydiv.id).find('.updatebutton').hide(); 
      $('div#' + mydiv.id).find('.cancelbutton').hide(); 

      //disable everything in the panel that the edit button is in 
      $('div#' + mydiv.id).find(':input').prop('disabled', true); 

      return true; 
      }); 
     });