CODEWITHSUNDEEP
javascriptruby-on-railscoffeescript
iThompkins
iThompkins

Reputation: 165

Coffeescript function running independent of event

I recently have built a notifications feature into my rails app from a tut I go from GoRails => Here's the tut

The long and short of the approach was to create a notifications model which recorded associations between the users involved with some action (ie. making a post will create a notification b/t the poster and the owner of what was posted on).

Notifications also possess an attribute called 'read' which is false by default. From here is where the problem begins. While the notifications save properly, as soon as I log in as the user who's suppose to receive the notification, a POST request is sent to my server, changing 'read' to true. Below is the script & view that's suppose to be responsible for making the request.

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

setup: -> 
    $("[data-behavior='notifications-link']").on "click", @handleClick ->

    $.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("")                
    )
handleSuccess: (data) =>
   console.log(data) 
   items = $.map data, (notification) ->
        "<a class='dropdown-item' href='#{notification.url}'>#{notification.actor} #{notification.action} #{notification.notifiable.type}</a>"
    console.log(items)

    $("[data-behavior='notification-items']").html(items)
    $("[data-behavior='unread-count']").text(items.length)
    if items.length is 0
        $("[data-behavior='unread-count']").text("")               

jQuery ->
     new Notifications

And the view:

        <li class="nav-item dropdown" data-behavior='notifications' data-behavior="notifications-link">
      <a id="notificationsDD" href="#" class="nav-link dropdown-toggle" data-toggle="dropdown">
        <%= fa_icon("bell") %><span data-behavior='unread-count'></span>
      </a>

      <div class="dropdown-menu" data-behavior="notification-items" aria-labelledby="notificationsDD">
      <!--
      <a class='dropdown-item' href='#'>yeo</a>
       -->
      </div>
    </li>

From tinkering with the script, it seems like the @handleClick function is running by itself w/o the click event occurring.

Upvotes: 1

Views: 90

Answers (1)

mu is too short
mu is too short

Reputation: 434615

I'm going to guess that your CoffeeScript really looks like this:

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

    setup: -> 
        $("[data-behavior='notifications-link']").on "click", @handleClick ->

    #...

as that matches the behavior you're seeing.

In that case, the problem would be in your setup method:

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

Adding method-calling parentheses shows us the problem:

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

You're calling @handleClick with an (empty) anonymous function as its argument while building the argument list to on. You probably want to bind handleClick to the 'click' event so you want to say:

$("[data-behavior='notifications-link']").on "click", @handleClick

to pass the @handleClick function as an argument without calling it.

Upvotes: 2

Related Questions