Reload Div in a function

[slj90]

I have a div that displays the contents of a mysql table. When the users adds to the table/presses a button I want it to fade out, reload, and fade back in with the new content there.


The current PHP code is in its own div called 'stream'...
 

<script>

function buttonFunction() {

 v=$("#txtstatus");
  $.post('../action/poststatus.php',{status:v.val()},function(d){
 $('div#stream').fadeOut('slow');
 $('div#stream').load;
 $('div#stream').fadeIn('slow');

  });

}

</script>

This fades out and back in but with nothing new loaded.

 

Please help.

Thanks,

 

[slj90]

I have now got it working:

$('div#stream').fadeOut('slow');
$("#stream").load(location.href + " #stream");
 $('div#stream').fadeIn('slow');

However, it only shows up the second time you press the button because it's too fast. How can I slow it down and perhaps show a loading message/image?

Thanks

[Alex_]

I have now got it working:

$('div#stream').fadeOut('slow');
$("#stream").load(location.href + " #stream");
 $('div#stream').fadeIn('slow');

However, it only shows up the second time you press the button because it's too fast. How can I slow it down and perhaps show a loading message/image?

 

Thanks

 

You should use callbacks on those three jQuery functions. Right now they're all executed at the same time, which may cause the effect you mentioned.

 

 

var selector = 'div#stream';
$(selector).fadeOut('slow', function() {
$(selector).load(location.href + ' #stream', function() {
$(selector).fadeIn('slow');
));
});

 

Obviously that coding style isn't good practise, but it's to make it as simple as possible. Generally you would want to keep your callbacks as external functions and just reference them as the callback function.

 

In any case, this means it will:

- Fadeout

- Load when Fadeout is complete

- Fadein when Load is complete