: удаленная форма с несколькими кнопками отправки

Question

Не получается получить форму :remote с несколькими элементами управления для отправки под Rails 3. Следующий код:

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

Создает форму с двумя кнопками, но в результате AJAX POST не содержит параметр commit, указывающий, какая из них была нажата. Если я опускаю :remote => true, обычный POST содержит параметр commit.

Есть ли способ заставить это работать, или это просто ошибка?

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 )" );"
/>

Answer 2

После некоторой игры я думаю, что нашел решение.

Проблема в том, что rails.js использует serializeArray() для элемента form, содержащего элемент управления submit, по которому щелкнули;но сериализованные данные формы не содержат этого элемента управления.Тем не менее, JQuery или Javascript отслеживают исходное событие в цепочке вызовов, которое технически было событием "submit" в соответствующем элементе управления.

Поэтому я отредактировал 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, поэтому дайте мне знать, если что-то из этого ужасно неправильно!