Trying to use jquery append after ajax load

Question

I have a script that sorts table rows when column names are clicked.

I want to append a triangle to the end of the column name that is clicked to show which column the table is sorted on.

<script>
    $(document).ready(function(){
        $('.data-table a').click(function(){
            var el = $(this);
            $('body').load('http://mysite.com/index.php/site/table/index/' + $(this).attr('id')).ajaxComplete(function(){
                el.append('&#9650;');
            });
           return false;
        });
    });
</script>

The table sorts correctly, but I can't append the HTML entity to the end of the column name.

How do I go about doing this?

Answer 1

You're killing the "body" element with that load statement. Try something like this:

<script>
    $(document).ready(function(){
        $('.data-table a').click(function(){
            var el = $(this);
            $('#target_element').load('http://mysite.com/index.php/site/table/index/' + $(this).attr('id')).ajaxComplete(function(){
                el.append('&#9650;');
            });
           return false;
        });
    });
</script>

Where "#target_element" refers to the place in the content whose contents will be replaced with the results of your ajax request.