Jump to content

Reload Div in a function


slj90

Recommended Posts

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,

 

Link to comment
https://forums.phpfreaks.com/topic/292853-reload-div-in-a-function/
Share on other sites

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

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

Archived

This topic is now archived and is closed to further replies.

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.