Элемент обновления Rails на основе AJAX-запроса?

Question

Я много читал о Rails и AJAX и 5.1 ненавязчивом javascript. Это многое объясняет, например, при ответе на Rails-версию вызовов AJAX с помощью файла .js.

Однако я хочу не обслуживать весь файл .js, а просто обновить элемент после <% link_to %> запроса POST. Насколько я понимаю, настройка remote: true отправляет его как запрос AJAX.

По сути, у меня есть "Пост", который может понравиться пользователю через связанную кнопку "Нравится". Это отправляет POST-запрос контроллеру «Post», который обновляет сообщение в «избранном» и добавляет в него «лайк».

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

Я "думаю", основываясь на том, что я прочитал, мне нужно сделать respond do и ответить через .js на запрос файлом .js в представлении, которое я хочу обновить (например, если действие контроллера называется "как", может быть, like.js.erb файл в представлении, которое я обновляю?). Но я не хочу показывать целую новую страницу ... или просто запустите .js?

Тогда я мог бы сделать что-то вроде $('i.fa-icon#id').style.color = "blue" или что-то? (Я предполагаю, что могу отправить данные с контроллера в файл .js.erb?). Не уверен, что лучший способ сделать это, не делать рельсовым элементам много раз, есть data-attribute или что-то в этом роде (я все еще новичок в этом).

Answer 1

Ваше описание совершенно верно!В отличие от другого ответа, вам даже не нужен прослушиватель событий, но, как вы сказали, вы хотите иметь respond_to в контроллере.Итак, начиная с html:

# post/index.html.erb
<div id="like-button">
  <%= button_to "Like this post", post_path(@post), remote: true %>
</div>

Обратите внимание, что при использовании помощника button_to это будет запрос POST по умолчанию.

Если вы щелкните по нему, он будетперейдите к controller#update, который вы хотите изменить на это:

#posts_controller.rb
...
def update
  @post.save
    respond_to do |format|
      format.html { redirect_to post_path(@post) } 
      format.js  # <-- will render `app/views/posts/update.js.erb`
    end
end

Примечание: format.html отображается при отключении JS.Теперь в сценарии, в котором включен JS, он выполняет файл app/views/posts/update.js.erb.Это может выглядеть так:

const likeButton = document.getElementById('like-button');
likeButton.innerHTML = '<%= j render "posts/liked-link", post: @post %>';

Что делает последняя строка?Конечно, вы можете изменить стиль напрямую с помощью JavaScript, но вы также можете отобразить новый фрагмент - и вы создадите его в новом html-файле:

# app/views/posts/liked_link.html.erb
<div id="like-button ">
 <p>"You liked this post!" </p>
</div>

Я просто изменил ссылку / кнопку наp сейчас, но, конечно, вы можете делать все, что захотите.

Надеюсь, это имеет смысл:)

Answer 2

Не уверен, что я понимаю вопрос, но если вы хотите обновить кнопку «Мне нравится»:

Что вы хотите сделать, это добавить прослушиватель событий для кнопки, и при нажатии он отправляет запрос POSTкакой бы маршрут ни обрабатывал лайки (с правильными параметрами), и ваш контроллер должен отвечать подобным объектом (или что-то в базе данных сохраняется).Сделайте так, чтобы ваш запрос на успешный метод захватил кнопку «Мне нравится» и изменил ее так, как вы хотите, чтобы она выглядела

$(“#like-btn”).click(function(){ 
Rails.ajax({
  url: "/some/url/to/like/controller",
  type: "post",
 data: [your post data],
  success: function(data) { $(`#${ data[“btn-name”] }`).attr(“color”, “blue”; }
})    
}

. Вы можете вставить этот скрипт прямо внизу HTML-страницы

* 1007.* Вам не нужно делать это в точности так, просто дайте вам представление о том, как настроить шаблон, позволяющий JavaScript и Ajax обрабатывать запрос на публикацию и обновлять внешний интерфейс вместо использования кнопок HTML