2017-01-10 92 views
1

我有一個Rails應用程序,允許用戶評論某個任務,並且每次在任務上發佈評論時,跟隨該項目的用戶都會收到通知。我的AJAX通知不彈出,當我點擊通知圖標:通知不會加載到我的Rails應用程序

notifications.js.coffee

class Notifications 
    constructor: -> 
     @notifications = $("[data-behavior='notifications']") 
     @setup() if @notifications.length >0 

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

    handleSuccess: (data) => 
     items = $.map data, (notification) -> 
      "<a class='dropdown-item' href="#">#{notification.actor} #{notification.action} #{nofication.notifiable.type}</a>" 
     $("[data-behavior='notification-items']").html(items) 

jQuery -> 
    new Notifications 

_navigation_links.html.erb部分(我的通知圖標持有)

<button class="navbar-toggle" data-toggle="collapse" data-target=".navHeaderCollapse"> 
    <span class="glyphicon glyphicon-user white"></span> 
</button> 
<div class="collapse navbar-collapse navHeaderCollapse"> 
    <ul class="nav navbar-nav"> 

     <li><%= link_to "start a project", new_project_path %></li> 

     <% if user_signed_in? %> 

     <li class="nav-item btn-group" data-behavior="notifications"> 
      <a class="dropdown-toggle nav-link" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="fa"> 
       <%= fa_icon "bell" %> 
      </a> 
      <div class="dropdown-menu" aria-labelledby="dropdownMenu1" data-behavior="notification-items"> 

      </div> 
     </li> 

     <div class="dropdown" style="float: right; margin-left: 20px; margin-top: 15px;"> 
      <li class="dropdown-toggle" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true" style="cursor: pointer;"> 
      <%= current_user.username %> 
      <span class="caret"></span> 
      </li> 
      <ul class="dropdown-menu" aria-labelledby="dropdownMenu1"> 
       <li><%= link_to 'My Profile', users_following_user_path(current_user) %></li> 
      <li><%= link_to 'Edit Profile', profile_user_path(current_user) %></li> 
       <li><%= link_to 'Account Settings', edit_user_path(current_user) %></li> 
      <li role="separator" class="divider"></li> 
       <li><%= link_to 'Log out', destroy_user_session_path, method: :delete %></li> 
      </ul> 
     </div> 
     <% elsif %> 
      <li><%= link_to "Sign Up", new_user_registration_path %></li> 
      <li><%= link_to "Sign In", new_user_session_path %></li> 
     <% end %> 

    </ul> 
</div> 

的routes.rb

resources :notifications 

notification.rb裏型號

class Notification < ActiveRecord::Base 
    belongs_to :recipient, class_name: "User" 
    belongs_to :actor, class_name: "User" 
    belongs_to :notifiable, polymorphic: true 

    scope :unread, -> { where(read_at: nil) } 
end 

從我一直關注的情侶教程中,當我點擊導航鏈接中的鈴鐺圖標時,通知應該彈出。 JavaScript不工作,但...

任何幫助,非常感謝。

+0

控制檯中是否有錯誤? – max

回答

1

有在notifications.js.coffee文件錯別字,請更換handleSuccess功能以下(變化href="#"href='#'):

handleSuccess: (data) => 
    items = $.map data, (notification) -> 
     "<a class='dropdown-item' href='#'>#{notification.actor} #{notification.action} #{nofication.notifiable.type}</a>" 
    $("[data-behavior='notification-items']").html(items) 

這應該可以解決這個問題。

相關問題