Rails 6: выполнить функцию JS после рендеринга - PullRequest
Новая
       8

Rails 6: выполнить функцию JS после рендеринга

0 голосов
/ 08 апреля 2020

Rails & Javascript новичок здесь,

В учебном проекте я заставил flash сообщения исчезнуть через несколько секунд, используя JQuery. Посетитель посылает AJAX запрос на добавление товара в свою корзину, после чего появляется флак sh, частично «Добавлено в корзину», и автоматически исчезает через несколько секунд. 

# application.html.erb

<div id='flash' class='flex-column'>
   <%= render partial: 'shared/flash'  %>
</div>

# shared/_flash.html.erb

<% flash.each do |key, value| %>
  <%= display_flash(key, value) %>
  <%= javascript_pack_tag 'custom/flash' %>  
  # this works, but injects the script each times the partial is rendered
<% end %>

# helpers/application_helper.rb

def display_flash(key, value)
  def display_flash(key, value)
    div_class = [flash_class(key), 'text-center fade show alert-dismissible'].join(' ')

    content_tag(:div, class: div_class) do
      content_tag(:p, value) +
      button_tag(class: 'ml-auto close', 'data-dismiss': 'alert', type: 'button') do
        content_tag(:span, '&times;'.html_safe, 'aria-hidden': 'true') +
        content_tag(:span, 'Close', class: 'sr-only')
      end
    end
  end
end

// app/javascript/packs/custom/flash.js

function closeFlash(){
  let lastAlert = $('#flash .alert:last')

  function fadeFlash() {
    lastAlert.animate( {opacity: 0}, 2000, function() {
      $(this).hide('slow', function() {
        $(this).remove()
      });
    });
  };

  setTimeout(fadeFlash, 2000)
};

closeFlash();

Проблема в том, что это загрязняет мою DOM ненужными <script> тегами: unneeded script tags

Это можно исправить, но есть ли подходящий способ выполнения одной определенной c javascript функции после рендеринга (AJAX) частичного? В моем случае выполнение closeFlash(), расположенного в packs/custom/flash.js каждый раз, когда воспроизводится частичное.

Спасибо за вашу помощь и ваше время

РЕДАКТИРОВАТЬ Решение :

Из ответа Амит Патель и этого поста 

# app/views/shared/_flash.html.erb

<% flash.each do |key, value| %>
  <%= display_flash(key, value) %>

  <script>
    $(function() {
      closeFlash();
    });
  </script>

<% end %>

// app/javascript/packs/custom/flash.js

window.closeFlash = function() {
    let lastAlert = $('#flash .alert:last')

    function fadeFlash() {
        lastAlert.animate( {opacity: 0}, 2000, function() {
            $(this).hide('slow', function() {
                $(this).remove()
            });
        });
    };

    setTimeout(fadeFlash, 2000)
};

Он не вводит всю функцию, но (я считаю) минимальный javascript код для вызова.

1 Ответ

1 голос
/ 08 апреля 2020

Переместите <%= javascript_pack_tag 'custom/flash' %> в свой макет или в файл application.js`, чтобы он был доступен в приложении.

измените шаблон как приложение

. html .erb 

<div id='flash' class='flex-column'>
   <%= render partial: 'shared/flash'  %>
   <script>
     $(function(){
       closeFlash();
     });
   </script>
</div>
...