scinote-web/app/assets/javascripts/shared/inline_editing.js

function initInlineEditing(title) {
  var editBlock = $('.' + title + '-editable-field');
  var inputString = editBlock.find('input');

  function updateField() {
    var params = {};

    if (inputString[0].value === editBlock[0].dataset.originalName) {
      inputString[0].disabled = true;
      return false;
    }
    params[editBlock[0].dataset.paramsGroup] = {};
    params[editBlock[0].dataset.paramsGroup][editBlock[0].dataset.fieldToUpdate] = inputString[0].value;
    $.ajax({
      url: editBlock[0].dataset.pathToUpdate,
      type: 'PUT',
      dataType: 'json',
      data: params,
      success: function() {
        editBlock[0].dataset.originalName = inputString[0].value;
        editBlock[0].dataset.error = false;
        inputString[0].disabled = true;
      },
      error: function(response) {
        var errors = response.responseJSON;
        editBlock[0].dataset.error = true;
        if (response.responseJSON.errors === undefined) {
          errors = errors[editBlock[0].dataset.fieldToUpdate][0];
        } else {
          errors = errors.errors[editBlock[0].dataset.fieldToUpdate][0];
        }
        editBlock.find('.error-block')[0].innerHTML = errors;
        inputString.focus();
      }
    });
  }

  editBlock.click(e => {
    if (inputString[0].disabled) {
      inputString[0].disabled = false;
      inputString.focus();
    }
    e.stopPropagation();
  });

  $(window).click(() => {
    if (inputString[0].disabled === false) {
      updateField();
    }
  });

  $(editBlock.find('.save-button')).click(e => {
    updateField();
    e.stopPropagation();
  });

  $(editBlock.find('.cancel-button')).click(e => {
    inputString[0].disabled = true;
    editBlock[0].dataset.error = false;
    inputString[0].value = editBlock[0].dataset.originalName;
    e.stopPropagation();
  });
}