Adding picture

[ggabrakadabra]

Adding picture only works for the picture of the day and not after searching the other pictures.

This is my show APOD function

const showApod = function () {
  const apodUrl = 'http://localhost:4741/search/apod/today'
  $.ajax({
    headers: {
      Authorization: `Token token=${store.user.token}`
    },
    url: `${apodUrl}`,
    method: 'POST'
  }).done(function (results) {
    console.log('apod', results)
    $('.apod-results').empty()
    const apodResult = apodTemplate(results)
    $('.apod-results').append(apodResult)
    $('.add-picture').on('submit', function (event) {
      if (event && event.preventDefault) {
        event.preventDefault()
      }
      const data = getFormFields(event.target)
      console.log('favortie data is', data)
      api.createPictures(data)
          .then(api.addToFavoritesList)
          .then(api.addToFavoritesList)
          .then(ui.addPictureToFavorites)
          .fail(ui.addFavoriteFail)
    })
  })
}

This is the handlebars file.

<div class="apod-results">
  <h2>Astronomy Picture of the Day</h2>
    <div class="apod-image-and-description">
      <h4>{{title}}</h4>
      <h4>{{date}}</h4>
      <img src="{{hdurl}}" class="apod-photo">{{hdurl}}</img>
      <h5><h4>Copyright:</h4>{{copyright}}</h5>
      <h4 class="apod-description"> <h3>Desription:</h3> {{{explanation}}}</h4>
      <br>
    </div>
    <br>
    <form class="add-picture">
    <fieldset>
      <input type="text" name="picture[title]" value="{{title}}" style="display: none;">
      <input type="text" name="picture[date]" value="{{date}}" style="display: none;">
      <input type="text" name="picture[explanation]" value="{{explanation}}" style="display: none;">
      <input type="text" name="picture[hdurl]" value="{{hdurl}}" style="display: none;">
      <button type="submit" class="btn btn-primary">Save to Favorites</button>
    </fieldset>
  </form>
</div>

This is my html for the APOD

      <div class="apod-container">
        <div class="search-apod">
          <h4>Search APOD photos by date</h4>
          <p>Search through apod gallery by date</p>
            <div class="search-apod-date">
              <input type="date" id="apod-date">
              <button class="btn-primary apod-search">Search APOD Photos</button>
            </div>
        </div>
          <div class="apod-results"></div>
      </div>

I just want the user to save any picture fro the database without having to check each day to see the updated picture. And adding the original picture of the day works. Just not the searched picture. But, when the user searches for a different picture, the input fields for adding the picture contain the information about the searched picture. So I'm not sure why this isn't working.

[raq929]

Good issue! Is there a successful request being made for the searched picture? If not, what's the error? If yes, can you look at the data you're sending with the request? What does it look like?

[ggabrakadabra]

Searched picture returns fine and the title, description, etc for that picture gets put into the input fields. That's why this is strange. But when I click save to favorites, it used to refresh but now it just goes back to the top of the page and it doesn't even run through the function for adding the favorite.

[raq929]

I'm not really following. When you click save to favorites, is the api request made? Does it refresh the page? I'm confused.

[ggabrakadabra]

Sorry, it's kind of hard to explain. But I'll try to be more clear.

So, when a user clicks on the APOD tab, the astro pic of the day displays. When they click save favorite it will save that picture. But the user can also search for a different APOD by date, and that will show up on the page as well and the corresponding info for it will fill the input fields, but when I click on save favorite after searching for a different picture, it does not work

[ggabrakadabra]

Ok so I just figured it out lol

So, I on the original function for searching APOD I have

    $('.add-picture').on('submit', function (event) {
      if (event && event.preventDefault) {
        event.preventDefault()
      }
      const data = getFormFields(event.target)
      console.log('favortie picture data is', data)
      api.createPictures(data)
          .then(api.addToFavoritesList)
          .then(api.addToFavoritesList)
          .then(ui.addPictureToFavorites)
          .fail(ui.addFavoriteFail)
    })

but I also have another function that searches by date, and I needed to add the save favorite function to that one too

[bernardlee]

Why is .then(api.addToFavoritesList) called twice?