远程表单带有多个提交按钮

Question

我似乎无法在Rails 3下使用具有多个提交控件的:remote表单。以下是代码：

<%= form_tag({:action => 'debug'}, {:remote => true}) do %>
  <%= submit_tag "Foo" %>
  <%= submit_tag "Bar" %>
<% end %>

生成一个带有两个按钮的表单，但是由此产生的AJAX POST不包含commit参数来表示哪个按钮被按下。如果我去掉:remote => true，普通的POST请求会包含commit参数。

有没有办法让它正常工作，还是这只是一个bug？

- Chowlett

Answer 1

我尝试了您的解决方案，它在Firefox上有效，但是应用程序在IE和Safari上不再工作。现在我找到了另一个解决方案：通过小型JavaScript将提交按钮的值放入隐藏输入字段中。

<input id="selected_button" type="hidden" name="commit" value=""/>
<script>
  function identify_button( el ) {
    window.document.getElementById( 'selected_button' ).value = el.value;
  }
</script>
<input class="button"
       type="submit"
       name="commit"
       value="Save"
       onclick="identify_button( this )" );"
/>
<input class="button"
       type="submit"
       name="commit"
       value="OK"
       onclick="identify_button( this )" );"
/>

- Martin

Answer 2

经过一些尝试，我认为我已经找到了一个解决方案。

问题在于rails.js在包含单击的submit控件的form元素上使用serializeArray()；但是表单的序列化数据不包含该控件。然而，JQuery或Javascript在调用链中跟踪原始事件，这在技术上是适当控件上的“提交”事件。

因此，我已经编辑了rails.js如下：

callRemote: function (e) {   /* Note - new parameter e */
            var el      = this,
                method  = el.attr('method') || el.attr('data-method') || 'GET',
                url     = el.attr('action') || el.attr('href'),
                dataType  = el.attr('data-type')  || 'script';

            if (url === undefined) {
              throw "No URL specified for remote call (action or href must be present).";
            } else {
                if (el.triggerAndReturn('ajax:before')) {
                    var data = el.is('form') ? el.serializeArray() : [];
                    /********************/
                    /* Note new if-test */
                    /********************/
                    if (e)
                    {
                        data.push({name: e.originalEvent.explicitOriginalTarget.name,
                        value: e.originalEvent.explicitOriginalTarget.value})
                    }
                    /* Function continues as before */

...并且更往下...

$('form[data-remote]').live('submit', function (e) {
    $(this).callRemote(e);
    e.preventDefault();
});

这会在触发 AJAX 之前添加被点击按钮的名称-值对。

我对 JavaScript 还有点陌生，如果有任何错误，请告诉我！

- Chowlett

---

这现在是一个Lighthouse的票务主题：https://rails.lighthouseapp.com/projects/8994/tickets/6001 - Chowlett