Timing for GET request issue after creating new rails item

[CoreyFedde]

I am trying to combine some code so that when I successfully send a POST request and create a new item on my page, the command will then trigger a GET request for the item that was just created. The new item will then display on my list on the front-end through handlebars.

Currently, both AJAX requests are working and through console.logs I can see that the GET request is working for the specific item that the POST request created. The sequence also is triggering in order. However, handlebars is not displaying the new item in the list.

I think the GET request may be triggering too quickly after the POST request is sent, but I am not sure why I would be getting a success message back then. Otherwise, I wonder if there might be something wrong with my code to display handlebars, but that code works elsewhere.

Problem-solving attempted: I have tried placing the GET request in both a separate action for when the add list form is submitted in Index.js and as part of the success message for after POST success. Both seem to be working.

Code:

const createNewMovie = function (event) {
  event.preventDefault()
  const data = getFormFields(this)
  console.log('data from create: ', data)
  console.log('create data: ', data)
  api.newMovie(data)
    .then(function (data) {
      store.movie = data.movie
      // console.log('store.movie; ', store.movie)
      // console.log('Successful onCreateNewMovie')
      api.getOneMovie(data.movie.id)
        .then(ui.onGetOneMovieSuccess)
        .catch(ui.failure)
    })
    .catch(ui.failure)
}

const getOneMovie = function (data) {
  return $.ajax({
    url: config.apiOrigin + '/movies/' + data,
    method: 'GET',
    headers: {
      Authorization: 'Token token=' + store.user.token
    }
  })
}

const onGetOneMovieSuccess = (data) => {
  console.log('Successful onGetOneMovie')
  const moviesHTML = moviesTemplate({ movies: data.movies })
  $('.poster-board').prepend(moviesHTML)
}

// Handlebars code
{{#each movies as |movie|}}

      <div class="list col-xs-12">
        <h5 data-id="{{movie.id}}"><span="genre">Genre:</span>{{movie.title}} </h5>
          <div id="{{id}}" class="remove-button">X</div>
          <div id="{{id}}" class="show-button">O</div>
        <!-- <hr class="">
        <p class="notes"> {{movie.notes}} </p> -->
      </div>

{{/each}}

[benjimelito]

So just to clarify: ui.onGetOneMovieSuccess is firing, and the data in that function matches the newly created item, but handlebars does not seem to render anything to the DOM?

[MicFin]

What is data inside getOneMovieSuccess?
Is it a data object with multiple movies?

const onGetOneMovieSuccess = (data) => {
  console.log('data is ', data) // what is data?
  const moviesHTML = moviesTemplate({ movies: data.movies })
  $('.poster-board').prepend(moviesHTML)
}

[CoreyFedde]

The data I get back from the getOneMovie is: " movie:Object id: 79 notes: null title: "wef" user_id: 10 " I changed const moviesHTML = moviesTemplate({ movies: data.movies }) so that movies is now grabbing data.movie and Handlebars is now posting something.

[payne-chris-r]

So, 👍 or 👎 ?

[CoreyFedde]

👍 in the right direction. New problem though: Handlebars is not picking up the title and displaying multiple objects after each click.

{{#each movies as |movie|}}

      <div class="list col-xs-12">
        <h5 data-id="{{movie.id}}"><span="genre">Genre:</span>{{movie.title}} </h5>
          <div id="{{id}}" class="remove-button">X</div>
          <div id="{{id}}" class="show-button">O</div>
        <!-- <hr class="">
        <p class="notes"> {{movie.notes}} </p> -->
      </div>

{{/each}}

Would I need to create a new handlebars template for when it is interpreting a single movie?

[MicFin]

Great idea! Maybe refactor out the part of the template that is within the loop so then you can use it for your show UI and index UI.

[CoreyFedde]

Thanks guys, to sum up the data being passed to the handlebars template was off and I was using was originally meant to interpret several movies and great an html object from each one.

To fix, I created a new Handlebars template to parse out one movie item at a time and changed the data that was being passed to it.

New handlebars file in case it helps anyone else:

<div class="list col-xs-12">
  <h5 data-id="{{movie.id}}"><span="genre">Genre:</span>{{movie.title}} </h5>
    <div id="{{id}}" class="remove-button">X</div>
    <div id="{{id}}" class="show-button">O</div>
</div>