新手问题 自行编写 $.rails.allowAction 导致 jQuery UJS 的 method: :delete 无效

7788 · April 20, 2017 · Last by ericguo replied at April 23, 2017 · 2017 hits

我写了个 js 文件,


$rails.allowAction =  function(element) {
      var message = element.data('confirm'),
          answer = false,
          callback;
      if (!message) {
          return true;
      }
      console.log("");
      if ($.rails.fire(element, 'confirm')) {
          answer = $.rails.confirm(element);
          callback = $.rails.fire(element, 'confirm:complete', [answer]);
      }
      return answer && callback;
  }

  $.rails.confirm = function(element) {.....}

这是为了修改 confirm 时的模态框,加载完这个文件后,点击删除链接(加了 method::delete),跳转到了 GET 也就是动作 show

先排版吧

看看你的浏览器控制台,一定有 JS 错误

Reply to huacnlee
(function(){
  $.rails.allowAction =  function(element) {
    var message = element.data('confirm'),
        answer = false, callback;
    if (!message) { return true; }

    if (rails.fire(element, 'confirm')) {
      try {
        answer = rails.confirm(element);
      } catch (e) {
        (console.error || console.log).call(console, e.stack || e);
      }
      callback = rails.fire(element, 'confirm:complete', [answer]);
    }
    return answer && callback;
  }



  $.rails.confirm = function(element) {
    var id = 'modalConfirm',
        w = element.data('width'),
        h = element.data('height'),
        title = element.data('title') || '系统提示',
        text = element.data('confirm') || '确定删除?',
        type = text ? 'text' : 'iframe',
        remote = !! element.data('remote');
    var target_str = element.attr('target') ? ' target="'      + element.attr('target') + '"' : '';
    var method_str = element.data('method') ? ' data-method="' + element.data('method') + '"' : '';

    var html = '<div class="modal fade" id="' + id + '"  tabindex="-1" role="dialog" aria-labelledby="modalConfirmLabel" aria-hidden="true">' +
        '<div class="modal-dialog" style="width: ' + w + 'px;">' +
        '<div class="modal-content">' +
        '<div class="modal-header">' +
        '<button type="button" class="close" data-dismiss="modal" aria-hidden="true">关闭</button>' +
        '<h4 class="modal-title" id=" ' + id + ' " >' + title + '</h4>' +
        '</div><form role="form" action="" method="">';

    html += '<div class="modal-body">' + '<div class="form-group text-center">' +
        '<p>' + text + '</p></div></div>';

    html += '<div class="modal-footer">';
    href = remote ? 'javascript:' : element.attr('href');
    html += '<a href="' + href + '"' + target_str + method_str + ' class="btn btn-green" id="pop-confrim-submit">确定</a>';
    html += '<button type="button" class="btn btn-sm btn-default" data-dismiss="modal">取消</button>';
    html += '</div></form>';
    html += '</div>';
    html += '</div></div></div>';

    $('#' + id).remove();
    $("body").append(html);
    $('#' + id).modal('show');
    if (remote) {
        $('#modalConfirm-submit').click(function(event) {
            event.preventDefault();
            $.rails.handleRemote(element);
            $(this).next().click();
            if (element.data('callback')) {
                eval(element.data('callback'));
            }
            return false;
        });
    }
    if (target_str) {
        $('#modalConfirm-submit').click(function(event) {
            $(this).next().click();
        });
    };
    return false;
  };

}())

这个 method: :delete 走的 GET 动作

可以看看这篇 blog,我之前做过一个类似的,似乎不需要复写 rails.confirm 就可以了。

$.rails.allowAction = function(element){
  var message = element.data("confirm");
  if (!message) { return true; }

  $(".confirm-message").html(message)
  $("#confirm_message").show();
  setTimeout(function(){
    $("#confirm_message").children(".confirm-div").addClass("mask-show");
  }, 10);
  $("#confirm_ok").click(function(){
    element.data("confirm", null);
    element.trigger("click.rails");
    element.data("confirm", message);
    $("#confirm_message").hide();
  });
  return false;
}

document.addEventListener("turbolinks:load", function() {
  $("#confirm_close").click(function(){
    $("#confirm_message").hide();
  });
});
You need to Sign in before reply, if you don't have an account, please Sign up first.