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:
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?
