Jquery .post then use .show and .hide
<p>So I'm learning JQuery and I'm stuck on this:</p>

<p>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)  </p>

<p>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.</p>

<p>Hopefully my question is well enough written to make sense, thanks.</p>

<p>Here's the code</p>

<pre><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
    });
});
</code></pre>
