refresh handlebar list

[ryanwk]

I'm trying to refresh my handlebars list of exercises without a 'refresh button'. When a user clicks any button, one that makes a change to an item of my list, I would like handlebars to show these changes after clicking submit. As of right now, you can only see changes made to a list by clicking 'show all exercises' button.

for example: A user clicks 'show all exercises' and is presented with a list of their exercises. A user then clicks 'update exercise' and changes the weight of an exercise. The user looks at the current list (the one displayed by 'show all exercises') and does not see any changes. However, a user can see these changes after pressing the 'show all exercises' button again. I don't want a user to have to do that (that's essentially a refresh button).

this is how I've set things up currently:

'use strict'
const showExercisesTemplate = require('../templates/show-exercises.handlebars')

const addExerciseSuccess = (data) => {
  $('#directions').text('You\'ve successfully added an exercise!')
  console.log('add exercises worked')
  $('#addExerciseModal').modal('hide')
  reFreshExerciseList(data)
}

const addExerciseFail = () => {
  $('#directions').text('Something went wrong, please try again')
  console.log('add exercises failed')
}

const showExerciseList = (data) => {
  $('#content').html('')
  const showExercisesHTML = showExercisesTemplate({ exercises: data.exercises })
  $('#content').append(showExercisesHTML)
}
const reFreshExerciseList = (data) => {
  const showExercisesHTML = showExercisesTemplate({ exercises: data.exercises })
  $('#content').append(showExercisesHTML)
}

const showAllExercisesSuccess = (data) => {
  $('#directions').text('These are all of your exercises')
  console.log('index exercises worked')
  console.log(data.exercises)
  showExerciseList(data)
}

const showAllExercisesFail = () => {
  $('#directions').text('You don\'t have any exercises yet, click add exercises to create them!')
  console.log('index exercises failed')
}
const removeExercisesSuccess = (data) => {
  $('#directions').text('Your exercise has been removed!')
  console.log('remove exercises, ui, worked')
  $('#removeExerciseModal').modal('hide')
  reFreshExerciseList(data)
}

const removeExercisesFailure = () => {
  $('#directions').text('Something went wrong, please try again')
  console.log('remove exercise, ui, failed')
}
const updateWeightSuccess = (data) => {
  $('#directions').text('Your exercise has been updated!')
  console.log('updateWeight, ui, worked')
  $('#updateWeightModal').modal('hide')
  reFreshExerciseList(data)
}

const updateWeightFailure = () => {
  $('#directions').text('Something went wrong, please try again')
  console.log('update weight, ui, failed')
}

module.exports = {
  addExerciseSuccess,
  addExerciseFail,
  showAllExercisesSuccess,
  showAllExercisesFail,
  removeExercisesSuccess,
  removeExercisesFailure,
  updateWeightSuccess,
  updateWeightFailure
}

I've tried creating a boolean variable to toggle the 'refreshing' of the list (true/false on certain actions with some logic that would invoke the 'show all exercises' button) this didn't work. I've tried creating two seperate functions, one with $('#content').html('') and one without, this doesn't seem to do anything. I've read through this: http://handlebarsjs.com/reference.html I've googled about it for probably way too long, tried everything I can think of, now moving on debating giving up and just adding a 'refresh list' button. if anyone has thoughts on this or could point me in the right direction, please let me know

[benjimelito]

One approach you could take would be to make another GET request in your addExerciseSuccess handler

[benjimelito]

This would refresh the list, without a user having to actually click anything. Let me know if you run into any issues with this, I know others have done something similar in the past

[ryanwk]

that didnt work

[benjimelito]

In what way did it not work, are you getting any errors? Make sure you're not running into another circular dependency here, as that is a possibility when triggering a function in api.js from ui.js

[ryanwk]

it was a circular dependency thing. prevent default also threw me off. here's what I got and it seemed to work.

const onShowAllExercisesSubmit = () => {
  // e.preventDefault()
  console.log('on show all exercises submit button, events, invoked')
  $('#content').empty()
  const data = getFormFields(event.target)
  exerciseApi.showAllExercisesRequest(data)
    // .done(showExerciseList)
    .then(exerciseUi.showAllExercisesSuccess)
    .fail(exerciseUi.showAllExercisesFail)
}
const onRemoveExerciseSubmit = (e) => {
  console.log('exercise removed')
  const data = getFormFields(event.target)
  e.preventDefault()
  exerciseApi.removeExerciseRequest(data)
    .done(function () {
      exerciseUi.removeExerciseSuccess
      onShowAllExercisesSubmit()
    })
    .fail(exerciseUi.removeExerciseFailure)
}

just discovered a new and unrelated thing that I need to change. Opening an issue on it now. thank you Ben