issue with PATCH

[3point14guy]

I have the results of a join table being displayed in a table in the browser and I am trying to update the comments section of that result.

The error message says not found, but the console log does show it is there, in this case resource 8. What I notice is that when I am targeting the id it is returning "8" not 8.

const updateAComment = function (data) {
  return $.ajax({
    url: config.apiOrigin + '/gardens/' + data.id,
    method: 'PATCH',
    headers: {
      Authorization: 'Token token=' + store.user.token
    }
  })
}

const updateComments = function (event) {
  event.preventDefault()
  const data = {vegetable: { 'id': $(event.target).attr('data-id'), 'name': $(event.target).attr('data-name'), 'image': $(event.target).attr('data-image'), 'comments': $(event.target).attr('data-comments') }}
  console.log("{garden: {'id': $(event.target).attr('data-id')}} is ", {garden: {'id': $(event.target).attr('data-id')}})
  api.updateAComment(data)
    .then(function (data) {
      getGarden()
    })
    .then(ui.updateCommentsSuccess)
    .catch(ui.updateCommentsFailure)
}

Help please!

[jordanallain]

hmm well url: config.apiOrigin + '/gardens/' + data.id, apparently is spitting out undefined for data.id . what is the data you are passing that function?

[payne-chris-r]

You're making a request to /gardens/undefined. Why is it undefined?

[3point14guy]

It is undefined because I am passing it the wrong data. In this case, I believe it is because the id is a string.

[scottyscripts]

So it is actually okay for id to be a sting here because the value of key url in that ajax function is a string. so in this line config.apiOrigin + '/gardens/' + data.id we are adding data.id to a string anyways.

Currently data.id being undefined is another issue. Does data have an id property on it? Or is that id property nested deeper within our data object?

[3point14guy]

It is nested deeper and I am trying every combination I can think of to access it.

If I try to set it up based on a typical patch request I get things going to the right URL with garden.id, but I get this error instead:

And then if I try to pass the data the same way it is set up in the CURL request then I get:

[payne-chris-r]

Your'e missing garden at the top level of the object your'e sending to the API--in fact, are you sending any data at all?

[3point14guy]

I changed things around a bit to make it simpler. I added a column to my gardens table for comments and the patch request goes through now as successful, however, the changes to comments don't save. Comments come back as undefined and for the patch and the garden object doesn't list a "comments" column.

[scottyscripts]

so it appears in your data object, comments is undefined, You need a way to get the value of what is in that comments box and assign it to that comment property

[MicFin]

Status?

[3point14guy]

Missed a couple of steps when I added the comments column to the garden table. Needed to update add comments to the serializer and in garden_params in the controller.

Scott went over the steps to trouble shoot the undefined data response I was getting and we covered using .closest, .find and .val to get the correct data.

[3point14guy]

updated code looks like this:

const updateComments = function (event) {
  event.preventDefault()
  const textAreaVal = $(event.target).closest('div').find('textarea').val()
  const gardenData = {garden: { 'id': $(event.target).attr('data-id'), 'comments': textAreaVal }}
  api.updateAComment(gardenData)
    .then(function (data) {
      getGarden()
    })
    .then(ui.updateCommentsSuccess)
    .catch(ui.updateCommentsFailure)
}

[MicFin]

And now this issue is solved? If so, you may close the issue.

[3point14guy]

also updated my ajax call to look like this:

const updateAComment = function (data) {
  console.log('data is ', data)
  return $.ajax({
    url: config.apiOrigin + '/gardens/' + data.garden.id,
    method: 'PATCH',
    headers: {
      Authorization: 'Token token=' + store.user.token
    },
    data: data
  })
}

THANK YOU SCOTT!! for your patient help!!

[3point14guy]

Turns out the patch is not fully working after all. I can update the first comment field the first time after reloading the page. When I try updating another comment field, my comments are replaced with whatever I entered the very first time I updated a comment. Believe this is happening bc of the .closest. Hopefully someone will be around early in the AM to help me look at it. : )

[3point14guy]

So the issue was with the handlebars file. The only div was outside the each block so DOM traversal was not working as expected. Added a div within the each block and all is good.