ETHER34L ETHER34L - 1 year ago 66
HTML Question

jQuery .load transition and sorttable.js

I have jQuery:

('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:


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

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');

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 Source
  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.