Can't access parent elements

Viewed 76

I am using X-editable plugin that sends an ajax request. X-editable is binded to <a class="editable"> element. This is the structure that I use:

<tr class="appender">
  <td>
    <a class="editable" ... ></a>
  </td>
  <some more td's here>
  
  <td class="totalHours"></td> <!-- This is an empty cell by default -->
</tr>

After successful response of x-editable, I am performing another request to calculate the total hours per corresponding table row. My JS code is below:

$(".editable").editable({
  // some X-editable options here...

  success: function(response, newValue) {
  
    if(!response.success) return response.message; //msg will be shown in editable form

    let start = $(this).parents('table.table').attr('data-start'); // everything is fine with it
    let end = $(this).parents('table.table').attr('data-end'); // and with this one too
    let pk = $(this).attr('data-pk'); // and with this one as well


    $.ajax({ // This is where I call my AJAX for the second time
      // Some AJAX options here as well...

      success: function(response) {
        // And this where problem begins:
        $(this).parents('td').closest(".totalHours").html(response.total);
      },
      error: function(response) {
        return response;
      }
    });
  });

As you can see, what I'm trying to achieve is to put a total hours number, received in my response, to the td.totalHours, but nothing happens.

When I'm trying to debug things and put the following code: console.log($(this).parents('td').closest(".totalHours")), it shows me the following picture:

enter image description here

What am I doing wrong here? As you can see, I CAN access other elements, because start, end, pk variables have the correct value (otherwise the request would return 422 status, since I have the Laravel Validation).

P.S. By the way, firstly, I've had this AJAX request as a Promise in another function and did like this:

callSecondAjaxRequest(parameters).then( /* Trying to find these elements */).catch(/* Similar code */);

But it didn't work either.

Update:

Well, solved the problem like this:

selector = $(this); // This is outside my second AJAX call;

// My second AJAX call's success callback:
selector.parents('tr.appender').find(".totalHours").html(response.total);

And it worked. So, the question is a bit different: why the $(this).parents('td').closest(".totalHours") couldn't find the required element, but selector.parents('tr.appender').find(".totalHours") did the trick? Shouln't it be the same?

0 Answers
Related