removing a record with an id

[ryanwk]

User clicks the 'remove exercise' button next to an exercise record. Previously, I had required the user to manually enter an id of the record that they would like deleted from their list. I don't want the user to have to do that. The record of an exercise with the 'remove exercise' button placed next to it should be deleted when the button is pressed. So, thanks to plenty of help, we got the click handler to listen properly (https://github.com/ga-wdi-boston/full-stack-project/issues/1021). Now I have a new error: Uncaught TypeError: Cannot read property 'id' of undefined stemming from my api, 'data.exercises.id'. 'id' is undefined because we deleted it? I checked my exercises TABLE, the id still exists.

The api request previously worked while expecting 'data' which comes from getFormFields in my onRemoveExerciseClick function. Now to get the event listener to work from my previous issue we had to change data to const id = $(event.target).attr('data-id'). I tried renaming 'data' to 'id' and that didn't work.

events:
const onShowAllExercisesSubmit = () => {
  $('#content').empty()
  const data = getFormFields(event.target)
  exerciseApi.showAllExercisesRequest(data)
    .then(exerciseUi.showAllExercisesSuccess)
    .then(() => $('.deleteButton').on('click', onRemoveExerciseClick))
    .catch(exerciseUi.showAllExercisesFail)
}

const onRemoveExerciseClick = (event) => {
  console.log('exercise removed')
  const id = $(event.target).attr('data-id')
  console.log(id)
  event.preventDefault()
  exerciseApi.removeExerciseRequest(id)
    .then(function () {
      exerciseUi.removeExerciseSuccess
      onShowAllExercisesSubmit()
    })
    .catch(exerciseUi.removeExerciseFailure)
}

const onShowAllExercisesSubmit = () => {
  $('#content').empty()
  const data = getFormFields(event.target)
  exerciseApi.showAllExercisesRequest(data)
    .then(exerciseUi.showAllExercisesSuccess)
    .then(() => $('.deleteButton').on('click', onRemoveExerciseSubmit))
    .catch(exerciseUi.showAllExercisesFail)
}

api:
const removeExerciseRequest = (data) => {
  console.log('remove exercise, api, invoked')
  return $.ajax({
    url: config.apiOrigin + 'exercises/' + data.exercise.id,
    method: 'DELETE',
    headers: {
      Authorization: 'Token token=' + store.user.token
    }
  })
}

handlebars:
{{#each exercises as |exercise|}}

<li>
 <ul>Name: {{exercise.name}}</ul>
 <ul>Weight: {{exercise.weight}}</ul>
 <ul>Last Updated: {{exercise.updated_at}}</ul>
 <ul>id: {{exercise.id}}</ul>

<ul>
  <!-- update exercise weight button -->
  <button type="button" id="updateWeightButton" class="btn btn-primary btn-sm modalb" data-toggle="modal" data-target="#updateWeightModal">Update Weight</button>
  <!-- remove exercise button -->
  <button value="{{exercise.id}}" type="button" id="deleteButton" class="btn btn-primary btn-sm modalb" data-target="#removeExerciseModal"> Remove Exercise</button>

</ul>
</li>

{{/each}}

[benjimelito]

If you console.log data in the first line of removeExerciseRequest, what does it show?

[ryanwk]

doesn't show

[benjimelito]

Anything? Not even undefined? Make sure you're labeling it so that you can tell what you're looking at

[ryanwk]

ok got '88 this is data' 88 is the id

[ryanwk]

ok so I changed the api to this:

const removeExerciseRequest = (data) => {
  console.log(data, 'this is data')
  return $.ajax({
    url: config.apiOrigin + 'exercises/' + data,
    method: 'DELETE',
    headers: {
      Authorization: 'Token token=' + store.user.token
    }
  })
}

got this in the console:

jquery.js:3860 jQuery.Deferred exception: Cannot read property 'target' of undefined TypeError: Cannot read property 'target' of undefined
    at onShowAllExercisesSubmit (http://localhost:7165/public/application.js:967:34)
    at Object.<anonymous> (http://localhost:7165/public/application.js:980:6)
    at mightThrow (http://localhost:7165/public/vendor.js:11500:30)
    at process (http://localhost:7165/public/vendor.js:11568:13) undefined

so it worked, the record in question was deleted properly, but that jquery deferred exception now shows in the console, is that something I should worry about?

[benjimelito]

Looks to me like the issue is coming from onRemoveExerciseClick. Do you need onShowAllExercisesSubmit() to be part of that .then statement?

[ryanwk]

ya that's what refreshes the list. As of right now , you can delete an exercise after ' show all exercises' but if you add an exercise then delete it , the 'remove exercise' button doesn't work. There's also the jquery deferred exception issue too.

[ryanwk]

I removed this const data = getFormFields(event.target) from the onShowAllExercisesSubmit function, turns out I didn't need to pass 'data' to my api through that function. but I've got a new issue now. Thanks Ben!