Add a custom textfield to button_to in addition to data

Question

I have a button_to called 'DELETE' within which I have added

data: { confirm: "Are you sure you want to delete?" }

I also wish to add a custom textfield asking the user for appropriate reason before deletion and then store it consequently. Can I add a textfield inside data apart from the default confirm or disabled option?

I have done it with window.open as of now but it's just a workaround.

Answer 1

You can't add additional fields to the confirmation box. Because it gets only single parameter - message. See here.

I'd recommend to built a custom confirmation dialog for this task.

Answer 2

Firstly, button_to is not the same as data: {confirm....} (although thinking about it, you're probably using data: {...} on the button_to)

---

If you were using button_to, you could add extra parameters to your form by using the params option:

<%= button_to "Text", your_path, params: {name: "John"} %>

As described in the docs, the params are passed as hidden fields, and thus should be static data (not editable by the user):

Hash of parameters to be rendered as hidden fields within the form.

---

Since you wish to use data: {confirm ...}, you have to be clear on how it works:

confirm: 'question?' - This will allow the unobtrusive JavaScript driver to prompt with the question specified (in this case, the resulting text would be question?. If the user accepts, the link is processed normally, otherwise no action is taken.

As stated, this loads a "confirm" JS dialogue, which basically only has ok/cancel to determine whether the user wishes to proceed.

You cannot send extra parameters through the standard confirmation dialogue.

--

What you can do is create a custom confirmation action for Rails.

This involves overriding the $.rails.showConfirmationDialog(link); method, so instead of invoking a lowly confirm dialogue, it can show whatever you need.

Here's a gist:

#app/assets/javascripts/application.js
$.rails.allowAction = function(link) {
  if (link.data('confirm')) {
    $.rails.showConfirmationDialog(link);
    return false;
  } else {
    return true;
  }
};

$.rails.confirmed = function(link) {
  link.data('confirm', null);
  return link.trigger('click');
};

$.rails.showConfirmationDialog = function(link) {
  var message, title;
  message = link.data('confirm');
  title = link.data('title') || 'Warning';
  return // ->> your custom action <<-- //
};

We use the following:

#app/assets/javascripts/application.js
var myCustomConfirmBox;
$.rails.allowAction = function(element) {
  var answer, message;
  message = element.data("confirm");
  answer = false;
  if (!message) {
    return true;
  }
  if ($.rails.fire(element, "confirm")) {
    myCustomConfirmBox(element, message, function() {
      var callback, oldAllowAction;
      callback = $.rails.fire(element, "confirm:complete", [answer]);
      if (callback) {
        oldAllowAction = $.rails.allowAction;
        $.rails.allowAction = function() {
          return true;
        };
        element.trigger("click");
        $.rails.allowAction = oldAllowAction;
      }
    });
  }
  return false;
};

myCustomConfirmBox = function(link, message, callback) {
  var flash, icon, wrap;
  if (!($("flash#confirm").length > 0)) {
    icon = document.createElement("i");
    icon.className = "fa fa-question-circle";
    flash = document.createElement("flash");
    flash.setAttribute("id", "confirm");
    flash.appendChild(icon);
    flash.className = "animated fadeInDown";
    flash.innerHTML += message;
    wrap = document.getElementById("wrap");
    wrap.insertBefore(flash, wrap.childNodes[0]);
    return $(document).on("click", "flash#confirm", function() {
      return callback(link);
    });
  }
};

--

If you wanted to pass an extra parameter through this, you'd have to use it in the JS. I've never done it before, but I know you can append it to the query you're sending to your server.

As such, if you update your code to show your routes and controller code, I should be able to come up with an idea on how to pass a param for you.