jQuery .load transition and sorttable.js

Question

I have jQuery:

$("#loadBtn").click(function(){
    $('#div1').delay(200).slideUp('slow')
        .load
        ('page2.php #div2').hide().delay(300).slideDown('slow');
        return false;
    });

When #loadBtn (located in my #leftColumn) is clicked, it replaces #div1 with #div2 perfectly. I have two problems with this code however..

1) SOLVED BY GINCHER ---- I can't get the function to slide up #div1. it always just instantly fades and slides down #div2.
If I use jQuery:

$("#loadBtn").click(function(){
    $('#div1').delay(200).slideUp('slow')
});

that code will slide #div1 flawlessly, however as soon as I add .load('page2.php #div2') it breaks and fades away before sliding down.

2) SOLVED BY GINCHER ---- I cannot get the tables in #div2 to sort using sorttable.js
I realize that scripts ran on page1.php upon load cannot be applied to elements that are loaded via AJAX.

I have tried to call the new table after the load function is complete,

$('#div1').load('page2.php #div2', function() {
    var newTable = document.getElementById('#tableId');
    sorttable.makeSortable(newTable);
});

But that doesn't work. Just to see what would happen, I pasted the whole sorttable.js content into

$('#div1').load('page2.php #div2', function() { /*sorttable.js content*/}

That made the table work properly, because the function was ran after the content was loaded. what am I doing wrong with this?

Answer 1

1. $('#div1').delay(200).slideUp('slow', function(){ $(this).load('page2.php #div2').hide().delay(300).slideDown('slow'); }); Do the load function after the slide up completed.

2. var newTable = document.getElementById('tableId'); - don't add hashtag in getElementById .