Как завершить или остановить операцию кнопки сохранения, используя модальное «Вы уверены, что хотите продолжить» с помощью кнопок «да» и «нет» в Rails?

Question

У меня есть ссылка в таблице HTML, которая при нажатии вызывает эту функцию контроллера Rails:

Контроллер:

    def match
        render :partial => 'myview/match.js.erb'
    end

Вышеупомянутый контроллер вызывает это js частичное:

_match. js .erb

    $('#match_' + <%=@debit.id%>).hide().after('<%= j render("match") %>');

Приведенный выше js частичный вызов erb ниже:

_match. html .erb

  <%= form_for(@debit, remote: true, html: { id: 'match_form' }) do |f| %>
    <%= f.text_field :match_id, style: "width:82px" %>
    <br/><br/>
    <%= button_tag 'Save', class: 'btn btn-primary', id: 'match_submit', style: "width:38px;padding:0px" %> 
    <%= button_tag 'Cancel', class: 'btn btn-secondary', id: 'match_cancel', style: "width:52px;padding:0px" %>
  <% end %>

Как показано на приведенном выше фрагменте, отображается text field с 2 кнопками Save и Cancel.

Теперь, когда пользователь вводит значение и нажимает Save, я бы хотел бы сделать небольшую проверку.

1. Если проверка прошла успешно, я бы хотел, чтобы операция Save была завершена (что означает текстовое поле и кнопки Save и Cancel исчезнет, ​​и исходная ссылка HTML вновь появится с новым значением, введенным в текстовом поле [теперь, если щелкнуть эту ссылку с новым номером, текстовое поле с кнопками Save и Cancel снова будет появляется], т. е. необходимо разрешить выполнение функции контроллера def match)

2. Если проверка не пройдена, я хотел бы отобразить всплывающее окно, которое выдает предупреждение типа Are you sure you want to proceed with this value? вместе с 2 кнопками Yes и No.

   a) Если пользователь нажимает Yes, я бы как то же самое, что и в случае 1, описанном выше. б) Если пользователь нажимает No, текстовое поле должно оставаться незаполненным вместе с кнопками Save и Cancel.

Как мне этого добиться, пожалуйста? Какой самый простой подход для этого?

Answer 1

Самый ленивый способ сделать что-то подобное - это использовать старый client_side_validations gem.

Вы должны быть в состоянии создать желаемое поведение, используя предоставляемые ими обратные вызовы:

// You will need to require 'jquery-ui' for this to work
window.ClientSideValidations.callbacks.element.fail = function(element, message, callback) {
  callback();
  if (element.data('valid') !== false) {
    element.parent().find('.message').hide().show('slide', {direction: "left", easing: "easeOutBounce"}, 500);
  }
}

window.ClientSideValidations.callbacks.element.pass = function(element, callback) {
  // Take note how we're passing the callback to the hide()
  // method so it is run after the animation is complete.
  element.parent().find('.message').hide('slide', {direction: "left"}, 500, callback);
}

.message {
  background-color: red;
  border-bottom-right-radius: 5px 5px;
  border-top-right-radius: 5px 5px;
  padding: 2px 5px;
}

div.field_with_errors div.ui-effects-wrapper {
  display: inline-block !important;
}

В противном случае вам нужно будет написать хорошую сумму JavaScript, чтобы проверить все представляющие интерес состояния и нарисовать модал.

Answer 2

Jquery validate Вы можете просто достичь желаемого результата, используя jQuery Validation Plugin, подобный этому.

$(document).ready(function()
{
  $('#new_user').validate({
    errorClass:'error',

  rules: {
    'user[first_name]':{
      required: true
    }
  },
  messages:{
    'user[first_name]':{
      required: 'This field is required.'
    }
  },
  submitHandler: function( ){
    answer = confirm("Are you sure you want to submit?");
    if (answer == true){
      form.submit( );
    }
      else{
        return false;
      }
    }

  });
});

И вызвать выше JS после

$ ('# match_' + <% =@debit.id%>). Hide (). After ('<% = j render ("match")%>');

эта строка в _match. js .erb