.ajax（）で保存ボタンを作成する方法

Question

私は2つのボタン、編集と保存を持っています。ユーザーが編集をクリックすると、入力ボックスはアクセス可能になります。保存ボタンを正しく動作させるにはどうすればよいですか？つまり、ユーザーが「保存」をクリックすると、入力したテキストがデータベースに更新されます。次のコードがあります。編集ボタンは機能しますが、保存ボタンをクリックすると消えて「編集」ボタンにアクセスできなくなります。助けてください！

JS：あなたはコードが読み取り専用入力を行う上で、保存ボタンをクリックしたときに

$(this).closest('div').find('input').attr('readonly', 'readonly'); 

：

$(".home").html('<label>Name:</label><input id="editInput" disabled="true" id="userFullName" value="' + ui.fullName +'" type="text"><button class="edit">Edit</button><button class="save">Save</button>'); 
$(".edit").click(function (e) { 

       $("#editInput").prop('disabled',false); 
      }); 

      $(".save").click(function (e) { 
       $(this).closest('div').find('input').attr('readonly', 'readonly'); 
       $(this).closest('div').find('.save').hide(); 
       $(this).closest('div').find('.edit').show(); 
       var inputValue=$(this).closest('div').find('input').val(); 
       $.ajax({ URL:"https://api.mlab.com/api/1/databases/spk-db/collections/dwUsers/58f62d66c2ef164e6b93a162?apiKey=apiKey", 
        type:"POST", 
        data:{ inputValue:inputValue }, 
        success:function(data){ 
            swal("Congrats", "Your name has been saved!", "success");  
           } 
       }); 
       }); 


      } 

Answer 1

あなたのコードに次の行を確認してください。したがって、編集ボタンが（あなたの質問に記載されているように）アクセス不能になっているようです。

$(this).closest('div').find('.save').hide(); 

上記の行は保存ボタンを非表示にしています。

ソリューション

変更編集ボタンのクリックイベントのコードを次のように

$(".edit").click(function (e) { 

      $("#editInput").prop('disabled',false); 

      // Make input accessible 
      $("#editInput").prop('readonly', false); 

      // Show the save button 
      $(".save").show(); 
     }); 

$(document).ready(function(){ 
 

 
\t \t \t 
 

 
\t \t \t $(".home").html('<label>Name:</label><input id="editInput" disabled="true" id="userFullName" value="" type="text"><button class="edit">Edit</button><button class="save">Save</button>'); 
 
\t \t \t $(".edit").click(function (e) { 
 

 
\t \t \t \t $("#editInput").prop('disabled',false); 
 
\t \t \t \t $("#editInput").prop('readonly', false); 
 
\t \t \t \t $(".save").show(); 
 
\t \t \t }); 
 

 
\t \t \t 
 

 
\t \t \t $(".save").click(function (e) { 
 
     $(this).closest('div').find('input').prop('disabled',true); 
 
\t \t \t \t $(this).closest('div').find('input').attr('readonly', 'readonly'); 
 
\t \t \t \t $(this).closest('div').find('.save').hide(); 
 
\t \t \t \t $(this).closest('div').find('.edit').show(); 
 
\t \t \t \t var inputValue=$(this).closest('div').find('input').val(); 
 

 
\t \t \t \t $.ajax({ URL:"https://api.mlab.com/api/1/databases/spk-db/collections/dwUsers/58f62d66c2ef164e6b93a162?apiKey=apiKey", 
 
\t \t \t \t \t type:"POST", 
 
\t \t \t \t \t data:{ inputValue:inputValue }, 
 
\t \t \t \t \t success:function(data){ 
 
\t \t \t \t \t \t alert('name saved'); 
 
\t \t \t \t \t }, 
 
\t \t \t \t \t error: function(){ 
 
\t \t \t \t \t \t alert('ajax error. Maybe StackOverflow does not allow ajax requests'); 
 
\t \t \t \t \t } 
 
\t \t \t \t }); 
 
\t \t \t }); 
 

 

 
\t \t });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<div class="home"></div>