Использование файла js .erb для изменения содержимого элемента HTML в Rails 6 - PullRequest
Новая
       42

Использование файла js .erb для изменения содержимого элемента HTML в Rails 6

0 голосов
/ 02 августа 2020

Я пытаюсь использовать AJAX для замены внутреннего HTML элемента div, когда я нажимаю кнопку. Div должен измениться на простую форму, подобную этой, которая при заполнении создаст ресурс «вклад»: 

<%# ???.html.erb %>

<h2>Make a contribution:</h2>
<%= form_with(model: [ @event, @event.contributions.build ], local: true) do |form| %>
  <p>
    <%= form.label :text %><br>
    <%= form.text_field :text %>
  </p>
  <p>
    <%= form.submit %>
  </p>
<% end %>

Я все еще новичок в Rails, но мне удалось использовать этот учебник , чтобы добраться туда. Пока что я написал что-то вроде этого: 

// contribution_script.js
$(document).on('turbolinks:load', function() {
    $('[data-js-new-contribution]').click(function(event){
        event.preventDefault();
        divElement = ... // get the div element
        $('#' + divElement.id).html("<%= j (render partial: '???') %>");
    });
});

Это успешно заменяет содержимое div, но поскольку это находится в файле. js, а не в файле js .erb , он не обрабатывает код Ruby и просто заменяет div на необработанную строку.

Вот что говорится в руководстве об использовании файлов. js .erb:

Поместите этот код в файл с расширением. js .erb, с именем текущего действия (например, create. js .erb) и внутри папки представлений.

На контроллере вы можете отобразить это представление так же, как и любое другое представление. это мое "текущее действие?" Страница, на которой будет отображаться этот div, происходит из views / events / index. html .erb, поэтому я предположил, что моим текущим действием является «index» в событиях. На основе этого вопроса о переполнении стека я написал следующее в своем контроллере событий: 

def index
    @events = Event.all
    respond_to do |format|
        format.html
        format.js
    end
end

Затем я взял код JavaScript, указанный выше, и переименовал его в «index. js. erb "и положил в папку" Мои просмотры / события ". Кажется, это ничего не делает. Итак, как мне заставить это работать? Спасибо за ваше время!

Дополнительный вопрос: как только я получу файл js .erb, как я могу визуализировать форму из файла html .erb? Я посмотрел на этот вопрос , но я все еще не уверен, как настроить партиал, чтобы у него была необходимая информация о событии, к которому будет добавлен вклад.

...