Ask A Question


You’re not receiving notifications from this thread.

in app notifications using stimulus and ujs

Joel asked in General

I am attempting in app notifications similar to how Chris did it in the tutorial but trying to update it to use Stimulus but i my data-target doesn't seem to be in scope in the ajax success callback. Here is the relevent code:

  getNewNotes() {
        url: "/notes.json",
        type: "GET",
        success: this.handleSuccess

  handleSuccess(data) {
    const items = $.map(data, note => { return note.template })
    let unreadCount = 0
    $.each(data, (i, note) => {
      if (note.unread) {
        unreadCount += 1
    this.unreadCountTarget.innerHTML = unreadCount


Can anyone point me in the right direction to get this working using stimulus?


You have to .bind(this) if you want to retain the context/scope when passing in a function for a callback, otherwise it will use the callback's scope for this.

        success: this.handleSuccess.bind(this)

Javascript is real weird.


Thanks! Makes me love Ruby more every time I have to jump into Javascript.


Did you ever finish this? I am looking to do the exact same thing.


yes , I did. Did you have any specific questions about it?


Thanks for the reply Joel. I managed to get the Notifications displaying, and extended the Dropdown Controller from Chris' tailwindcss/stimulus repo -

Now I'm in the process of converting the jQuery that you posted to ES6, I was just curious if you had a complete gist/repo of the implementation to compare to!


I am still using some jQuery, but here is the stimulus controller I am using...

Join the discussion
Create an account Log in

Want to stay up-to-date with Ruby on Rails?

Join 78,890+ developers who get early access to new tutorials, screencasts, articles, and more.

    We care about the protection of your data. Read our Privacy Policy.

    Screencast tutorials to help you learn Ruby on Rails, Javascript, Hotwire, Turbo, Stimulus.js, PostgreSQL, MySQL, Ubuntu, and more.

    © 2023 GoRails, LLC. All rights reserved.