Проблема при переходе по ссылкам (Уведомления в приложении с JavaScript) - PullRequest
Новая
       5

Проблема при переходе по ссылкам (Уведомления в приложении с JavaScript)

0 голосов
/ 21 ноября 2018

Итак, я следовал руководству по Gorails о том, как использовать функцию уведомлений в приложении (колокол уведомлений).Это работает, но, похоже, проблема возникает при переходе по ссылкам в уведомлениях dropdpwn (фактически по всем ссылкам в приложении).При переходе по ссылке функция уведомлений больше не работает :( Только при обновлении страницы! Есть идеи по решению этой проблемы?

app / assests / javascripts / notifications.coffee 

class Notifications
  constructor: ->
    @notifications = $("[data-behavior='notifications']")

    if @notifications.length > 0
      @handleSuccess @notifications.data("notifications")
      $("[data-behavior='notifications-link']").on "click", @handleClick

      setInterval (=>
        @getNewNotifications()
      ), 5000

  getNewNotifications: ->
    $.ajax(
      url: "/notifications.json"
      dataType: "JSON"
      method: "GET"
      success: @handleSuccess
    )

  handleClick: (e) =>


    $.ajax(
      url: "/notifications/mark_as_read"
      dataType: "JSON"
      method: "POST"
      success: ->
        $("[data-behavior='unread-count']").text(0)
    )

  handleSuccess: (data) =>
    items = $.map data, (notification) ->
      notification.template

    unread_count = 0
    $.each data, (i, notification) ->
      if notification.unread
        unread_count += 1

    $("[data-behavior='unread-count']").text(unread_count)
    $("[data-behavior='notification-items']").html(items)

jQuery ->
  new Notifications

app / views / layouts / application.html.haml (Bulma) 

!!!
%html
  %head
    %meta{:content => "text/html; charset=UTF-8", "http-equiv" => "Content-Type"}/
    %title 5igma
    = csrf_meta_tags
    %meta{:content => "width=device-width, initial-scale=1", :name => "viewport"}/
    = stylesheet_link_tag    'application', media: 'all', 'data-turbolinks-track': 'reload'
    = javascript_include_tag 'application', 'data-turbolinks-track': 'reload'
  %body
    - if flash[:notice]
      .notification.is-success.global-notification
        %p.notice= notice
    - if flash[:alert]
      .notification.is-danger.global-notification
        %p.alert= alert

    = render 'layouts/navbar'

    = yield

app / views / layouts / _navbar.html.haml 

%nav.navbar.is-link{"aria-label" => "main navigation", :role => "navigation"}
  .navbar-brand
    = link_to root_path, class:"navbar-item" do
      %h1.title.is-5.has-text-white 5igma
    .navbar-burger.burger{"data-target" => "navbar"}
      %span
      %span
      %span
  #navbar.navbar-menu
    .navbar-end
      - if user_signed_in?
        .navbar-end
          .navbar-item.has-dropdown.is-arrowless{ 'data-behavior': 'notifications', "data-notifications" => "#{render template: "notifications/index", formats: [:json]}" }
            %a.navbar-link#dropdown{ 'data-behavior': 'notifications-link' }
              %icon.fa.fa-bell
              %span.tag.is-rounded.is-small.ml1{ 'data-behavior': 'unread-count' }
            .navbar-dropdown#notifications{ 'data-behavior': 'notification-items' }

app / views / notifications /index.json.jbuilder 

json.array! @notifications do |notification|
  json.id notification.id
  json.unread !notification.read_at?
  json.template render partial: "notifications/#{notification.notifiable_type.underscore.pluralize}/#{notification.action}", locals: {notification: notification}, formats: [:html]
end
...