How to complete or stall a save button operation using "Are you sure you want to proceed" modal with yes and no button in Rails?

Question

I have a link in an HTML table which when clicked calls this Rails controller function :

Controller:

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

The above controller calls this js partial:

_match.js.erb

    $('#match_' + <%[email protected]%>).hide().after('<%= j render("match") %>');

The above js partial calls the erb below:

_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 %>

As shown the above partial displays a text field with 2 buttons Save and Cancel.

Now, when the user enters a value and clicks on Save, I would like to do some minor validation.

1. If the validation succeeds, I would like the Save operation to complete (which means the text field and the Save and Cancel buttons would disappear and the original HTML link would re-appear with the new value entered in the text field [now if this link with the new number is clicked, then the text field with Save and Cancel button would re-appear] i.e., the controller function def match should be allowed to complete)

2. If the validation fails, I would like to display a popup which gives a warning something like Are you sure you want to proceed with this value? along with 2 buttons Yes and No.

   a) If the user clicks Yes, I would like the same thing to happen what happened in case 1 above b) If the user clicks No, then the text field should stay unclosed along with the Save and Cancel buttons.

How can I achieve this please? What would be the simplest approach for this?

Answer 1

The laziest way to do something similar would be to use the old client_side_validations gem.

You should be able to craft the behavior you want using the callbacks they provide:

// 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;
}

Otherwise, you'll need to write a good amount of JavaScript to check all of the states of interest and draw the modal.