modals don't hide after submit

[ryanwk]

I can't get my modal to close after a user hits the submit button. The exercise is added but modal stays open.

      <div class="modal fade" id="addExerciseModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
        <div class="modal-dialog" role="document">
          <div class="modal-content">
            <div class="modal-header">
              <button type="button" class="close addExerciseClose" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
              <h4 class="modal-title" id="myModalLabel">Add Exercises</h4>
              <h5 id="addExerciseFailure"> </h5>
            </div>
            <div class="modal-body">
              <form id="addExerciseFormSubmit" class="form-horizontal">
                <div class="form-group">
                  <label for="inputNameAdd" class="col-sm-2 control-label">Exercise Name</label>
                  <div class="col-sm-10">
                    <input name="exercise[name]" type="text" class="form-control" id="inputNameAdd" placeholder="Exercise Name">
                  </div>
                </div>
                <div class="form-group">
                  <label for="inputWeight" class="col-sm-2 control-label">Weight</label>
                  <div class="col-sm-10">
                    <input name="exercise[weight]" type="number" class="form-control" id="inputWeightAdd" placeholder="Exercise Weight (only accepts numbers)">
                  </div>
                </div>
                <div class="form-group">
                  <div class="col-sm-offset-2 col-sm-10">
                    <button type="submit" class="btn btn-default">Add Exercise</button>
                  </div>
                </div>
              </form>
            </div>
          </div>

const onUpdateWeightSubmit = (event) => {
  const id = $(event.target).attr('data-id')
  console.log('weight updated', id)
  const userInput = getFormFields(event.target)
  event.preventDefault()
  exerciseApi.updateWeightRequest(userInput, id)
    .then(function () {
      exerciseUi.updateWeightSuccess
      onShowAllExercisesSubmit()
    })
    .catch(exerciseUi.updateWeight)
}

const exerciseHandlers = function () {
  $('#addExerciseFormSubmit').on('submit', onAddExerciseSubmit)
  $('#showAllExercisesButton').on('click', onShowAllExercisesSubmit)
  $('#updateWeightFormSubmit').on('submit', onUpdateWeightSubmit)
  $('#updateWeightFormSubmit').on('submit', onUpdateWeightCloseModal)
  $('.updateWeightClose').on('click', updateWeightModalEscape)
  $('.addExerciseClose').on('click', addExerciseModalEscape)
}

// const closeModal = () => {
//   $('.modal').modal('hide')
// }
const addExerciseSuccess = (data) => {
  $('#addExerciseModal').modal('hide')
  // closeModal()
  $('#content').text('You\'ve successfully added an exercise!')
  showExerciseList(data)
}

I've tried everything for days put different classes ids all of the modal tried onclick and onsubmit data-dismiss="modal" $('#addExerciseModal').modal('hide') $('.modal').modal('hide')

I think this is a problem with jQuery, that's all I can gather from stack overflow.

[Jcornmanhomonoff]

Are you sure you're getting to youraddExerciseSuccess function? Try adding a console.log(<something>) in there somewhere.

[payne-chris-r]

Did this get resolved?

[ryanwk]

yep wasn't getting to addExerciseSuccess