Need help tracking down event listener for user feedback message (please)

[aeabbott]

I want to add an alert to my page that displays when a user successfully adds a race. I want the message to disappear after a short amount of time.

I have a handlebars template: add-success-msg.handlebars that houses the alert. The alert template is a partial to my home page template which houses all the page content after sign in. <div id="alert-id" class="alert alert-success alert-styling">Race added</div>

I have the the alert hidden when the homepage page loads:

// add the homepage listeners
const addHomePageHandlers = function () {
  // show nav bar on landing page
  $('.navbar').show()
  // Password modal handlers
  $('.change-pass-btn').on('click', displayChangePassModal)
  $('.cls-pass-modal').on('click', onClosePassModal)
  // Password and form submit handlers
  $('#change-password').on('submit', onChangePassword)
  $('#sign-out').on('submit', onSignOut)
  // Add race handler listeners
  $('.add-race-btn').on('click', displayAddRaceModal)
  $('.update-button').on('click', displayUpdateModal)
  $('.delete-button').on('click', onDeleteRace)
  // Form submit handlers
  $('#update-race').on('submit', onUpdateRace)
  $('#add-race').on('submit', addRace)
  //Hide alerts upon homepage load
   $('#alert-id').hide()
}

I want to show the alert when the add is successful so I’ve added the following code:

const createRaceSuccess = function () {
  console.log('create Race Success ran')
  $('#add-race')[0].reset()
  $('body').removeClass('modal-open')
  displayAllRaces()
  showAlert($('#alert-id'))
}

const showAlert = function (message) {
  console.log('Show alert ran')
  console.log('Show aleart message is', message)
  message.slideDown().delay(500).slideUp()
}

In the console, I can see that the showAlert is running after createRaceSuccess, but the alert does not appear.

I’d like to walk through the code with a consultant. I’ve tried multiple combinations and I can’t get the alert to appear. I think it has something to with the event listeners and where they are defined but I need some help figuring this out/extra eyes. Or a suggestion for a more creative way of doing this. OR maybe I don't even need a user message?! The item is added to the race right away so I think this is enough, but I want to make sure I am covering all my bases in terms of meeting requirements.

Link to deployed app as well: https://aeabbott.github.io/lucky-socks-client/

[BenGitsCode]

Have you tried putting a debugger in your CreateRaceSuccess function?

[aeabbott]

I realized my alert will never show because of how I have my homepage being built:

Time line of events below:

AddRace --> CreateRaceSuccess (shows alert) --> DisplayAllRaces --> onShowHomePage (clears the body content of the page) -->addHomePageHandlers( hides the event)

If I remove the hideEvent from the addHomePageHandlers, it will always appear.

Can I request a 1:1 to discuss if the seeing the added race on the screen is enough vs seeing the added race and also having an alert?

[aeabbott]

After discussion, I decided that because my app instantaneously creates, deletes and adds races on the same screen that user is on that handling messages would be superfluous.

I'm going to close this issue. Thanks everyone for helping solve and discuss!