Jquery .post then use .show and .hide - php

Question

So I'm learning JQuery and I'm stuck on this:
I have a page that displays a HTML table and inside that table I want to have a cell that can be updated via a dropdown menu, so you click on edit, the current value disappears and dropdown menu appears, and when the value is changed the database is updated and the new value is displayed. (with the menu disappearing)
The problem seem to be putting the .text and .show inside the data callback function - if I alert the data it is returning the correct data from the PHP file, and if I comment out the .post line and replace the (data) with ("test_text") it replaces the menu as I want it to.
Hopefully my question is well enough written to make sense, thanks.
Here's the code
$('.cat_color_hide_rep').hide();
$('.act_status_dropD').click(function () {
var record_id = $(this).parents('tr').find('.record_id').text()
$(this).parents('tr').find('.cat_color_hide_rep').show();
$(this).parents('tr').find('.cat_color_show_rep').hide();
});
$('.cat_color_hide_rep').change(function () {
var record_id = $(this).parents('tr').find('.record_id').text()
$(this).parents('tr').find('.cat_color_hide_rep').hide();
$.post('TEST_ajax_rep_list_status.php', {
ID: record_id
}, function (data) {
$(this).parents('tr').find('.cat_color_show_rep').text(data);
$(this).parents('tr').find('.cat_color_show_rep').show();
alert(data); // for testing
});
});

Answer 1

You can not access the $(this) inside the $.post function.
You can do this before the $.post:
var that = this;
And inside the post, do this:
$(that).parents('tr').find('.cat_color_show_rep').text(data);
$(that).parents('tr').find('.cat_color_show_rep').show();
This would be your resulting code:
$('.cat_color_hide_rep').hide();
$('.act_status_dropD').click(function () {
var record_id = $(this).parents('tr').find('.record_id').text()
$(this).parents('tr').find('.cat_color_hide_rep').show();
$(this).parents('tr').find('.cat_color_show_rep').hide();
});
$('.cat_color_hide_rep').change(function () {
var record_id = $(this).parents('tr').find('.record_id').text()
$(this).parents('tr').find('.cat_color_hide_rep').hide();
/** ADDED LINE **/
var that = this;
$.post('TEST_ajax_rep_list_status.php', {
ID: record_id
}, function (data) {
/** CHANGED LINES **/
$(that).parents('tr').find('.cat_color_show_rep').text(data);
$(that).parents('tr').find('.cat_color_show_rep').show();
alert(data); // for testing
});
});

Answer 2

In the callback function, this has been changed to refer to the XHR Object, you need to backup an reference of this from outside the function if you want to access it from the callback
var $this = $(this);
$.post('TEST_ajax_rep_list_status.php', {
ID: record_id
}, function (data) {
$this.parents('tr').find('.cat_color_show_rep').text(data);
$this.parents('tr').find('.cat_color_show_rep').show();
alert(data); // for testing
});

Answer 3

//Cache your selectors!
var catColorHide = $('.cat_color_hide_rep');
catColorHide.hide();
$('.act_status_dropD').on('click', function () { //Use the .on() method and save a function call. The .click() simply calls the .on() and passes in the callback.
var this = $(this), //If you use a selection more than once, you should cache it.
record_id = this.parents('tr').find('.record_id').text();
this.parents('tr').find('.cat_color_hide_rep').show();
this.parents('tr').find('.cat_color_show_rep').hide();
});
catColorHide.on('change', function () {
var this = $(this),
record_id = this.parents('tr').find('.record_id').text();
this.parents('tr').find('.cat_color_hide_rep').hide();
$.post('TEST_ajax_rep_list_status.php', {
ID: record_id
}, function (data) {
// I don't do the 'var this = $(this)' in here to fix your problem. The 'this' you see me using here refers to the element from the callback.
this.parents('tr').find('.cat_color_show_rep').text(data);
this.parents('tr').find('.cat_color_show_rep').show();
console.log(data); // Use this for testing instead.
});
});