Agfdhyk

So I followed along the Gorails tutorial on how to an in-app notifications feature (notifications bell). It works, but there seems to be a problem when following the links on the notifications dropdpwn (actually following all the links in the app). When following a link the notifications feature doesn't work anymore :( Only on refreshing the page!
Any ideas on solving this issue?

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