Skip to main content
Ask A Question
You’re not receiving notifications from this thread.

in app notifications using stimulus and ujs

General • Asked by Joel

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...

Login or Create An Account to join the conversation.

Subscribe to the newsletter

Join 30,242+ developers who get early access to new screencasts, articles, guides, updates, and more.

    By clicking this button, you agree to the GoRails Terms of Service and Privacy Policy.

    More of a social being? We're also on Twitter and YouTube.