jQuery Table manipulation

Question

Trying to manipulate a table with jQuery, and I just cannot seem to get it to work properly. The empty works just fine, but I cannot add content back onto the table after.

Any suggestions on what I may be doing wrong?

<table id="schedualtable">
    <tbody id="sortable">
        <tr><td></td></tr>
    </tbody>
</table>

$('#schedualtable > tbody:last').empty().append($.get('incl/ajax_category.php?action=filtercat', {'cata': $('#filtercat').val()}));

$('#sortable').empty().append($.get('incl/ajax_category.php?action=filtercat', {'cata': $('#filtercat').val()}));

Answer 1

Instead of $.get() you should use .load(), like this:

$('#sortable').load('incl/ajax_category.php?action=filtercat', 
                    {'cata': $('#filtercat').val()});

$.get() doesn't return the data, it's available in it's callback method though. .load() actually takes the result and puts it in that element.

For the $.get() method, it'd look like this:

$.get('incl/ajax_category.php?action=filtercat', {'cata': $('#filtercat').val()},
      function(data) { $('#sortable').html(data); });

Answer 2

Wouldn't you want to use .html() instead of .append() since you are putting the content inside and then you don't need to .empty() as well?