Внедрение ruby с javascript на Ruby на Rails

Question

Итак, я хочу иметь кнопку для добавления дополнительных полей в форму. Скажем, у меня есть это:

<div class="row">
      <div class="form-group string required">
        <div class="cep_filter">
          <div class="col-md-3 traffic-columns">
            <%= f.input :condition, collection: @traffic_columns, label: "Monitor (*)" %>
          </div>
          <div class="col-md-1">
            <%= f.input :operator, collection: @operator, label: "Op (*)" %>
          </div>
          <div class="col-md-2">
            <%= f.input :filter, label: "Value (*)",input_html: {type: "text" } %>
          </div>
        </div>
        <div class="col-md-3">
          <%= f.input :window, collection: @window, label: "Window Type", input_html: {type: "text"} %>
        </div>
        <div class="col-md-3">
          <%= f.input :window2, label: "Window Value", input_html: {type: "text"} %>
        </div>
      </div>
    </div>

Затем, предположим, у меня есть такая кнопка:

<%= link_to content_tag(:i, nil, class: "fa fa-plus"),
             '', style: 'color: green', class: "btn btn-small add-new-condition", 'data-backdrop' => "static" %>

Я хочу сделать следующее: когда вы нажимаете эту кнопку, вы вызываете это:

$(document).on("click", ".add-new-condition", function(e) {
  var html =
  "<div class='col-md-3 traffic-columns'> \
    <%= f.input :new_param, collection: @traffic_columns, label: 'Monitor (*)' %>\
  </div>
  "
});

, а затем добавьте это html к некоторому элементу div. Из того, что я читал, невозможно ввести ruby из javascript. Это что-то связано с тем, что одна сторона сервера, а другая - клиентская. Я уже пробовал, и код ruby отображается в виде строки. Я мог бы создать эти новые поля, используя чистый html, вроде и так, но здесь важно то, что я хочу добавить новые поля, к которым позже я могу получить доступ в контроллере, например новое поле, с params[:new_param].

Есть ли способ добавить новые поля только с помощью html, чтобы я мог позже получить доступ к введенному значению в моем контроллере rails? Спасибо.

Answer 1

Вы уже ОЧЕНЬ ПОЧТИ преуспели!

Вы получаете буквальную строку <%= f.input :new_param, collection: @traffic_columns, label: 'Monitor (*)' %> , введенную в ваш div, тогда как то, что вы хотите, будет больше похоже на <input type="text" />?

Это потому что сервер ruby - это то, что преобразует этот код ERB в HTML.

Похоже, вы уже создаете поле ввода в своем ERB с помощью <%= f.input :condition, collection: @traffic_columns, label: "Monitor (*)" %>. Дайте упаковочному div идентификатор, чтобы форма содержала это в качестве первого поля:

<div class="col-md-3 traffic-columns" id="duplicate_and_inject_this">
            <%= f.input :condition, collection: @traffic_columns, label: "Monitor (*)" %>
          </div>

Затем, в событии щелчка, клонируйте этот div и добавляйте его куда хотите.

$(".add-new-condition").click(function (){
  var new_input = $("#duplicate_and_inject_this").clone();
  new_input.appendTo( "#new_inputs_wrapper" );
})

Таким образом, ruby отображает ваши поля ввода для вас, а JS просто дублирует это поле ввода столько раз, сколько вы нажимаете на кнопку.

Если вы хотите начать с нуля экземпляров input, просто скройте его, как уже упоминал кто-то другой, а затем сделайте его видимым после клонирования.

Вы можете изменить клон другими способами, чтобы обновить новый атрибут name или изменить его значение перед тем, как добавить его в форму.

Если, как было предложено иначе, вы должны были использовать link_to remote, вам нужно было бы вызывать сервер каждый раз, когда вы добавляете поле. Клонирование HTML и введение в него JS будет намного быстрее.

Answer 2

Посмотрите руководство Работа с JavaScript в Rails , в частности, раздел о том, как ответить с вашего сервера Rails некоторым JavaScript, которое затем оценивается клиентом ("rails- u js ").

Это дает вам все необходимые возможности (и может заменить довольно много того, что люди в наши дни используют целые JS фреймворки, кстати)

Все, что вам нужно равно link_to ... remote: true пути, который обрабатывается действием контроллера, которое может respond_to ... format.js. Затем вы помещаете файл something.js.erb в нужное место в папке app/views, а Rails сделает все остальное за вас.

Внимательно ознакомьтесь с полным руководством, чтобы получить полную картину и прокомментируйте ниже, если вы еще есть вопросы. Буду рад расширить свой ответ!