markratledge
markratledge

Reputation: 17561

jQuery fadeout a div that's revealed by php and not Javascript?

Seems like this might be easy, but from reading other SO answers there are a number of ways for it to possibly work:

I have the "thanks" div below that shows when a php form is sucessfully submitted:

<?php if(isset($emailSent) && $emailSent == true) { ?>
<div class="thanks"></div>

The page does not reload after the form is submitted; the php for the form is included in the page header, the php above is in <body>, and when the form is submitted, the "thanks" div appears.

Question: How can the div be faded out (or simply removed) after a few seconds?

Document ready doesn't seem like it would work because the page is not reloaded. Can jQuery detect the appearance of the div and then start the fadeout timer?

If possible, I'd like to stay with the php form and not move to a jQuery form.

Upvotes: 1

Views: 1180

Answers (3)

Pedery
Pedery

Reputation: 3636

Can't you just set the div to display:none? Then make it visible in the form submit code.

Upvotes: 0

Elie
Elie

Reputation: 7363

Since the page is already loaded, you can print the fade out script in your ajax response:

<?php if(isset($emailSent) && $emailSent == true) { ?>
<div class="thanks"></div>
<script type="text/javascript">
$(".thanks").delay(5000).fadeOut();
</script>
...

Upvotes: 1

Nick Craver
Nick Craver

Reputation: 630549

If you're submitting the form and it's not via ajax, then your page is reloading, in which case you can do this:

$(function() {
  $(".thanks").delay(5000).fadeOut();
});

This would wait 5 seconds then fade out the element, about as simple as it gets :) If it doesn't find the div with $(".thanks") then no problem, it just won't have anything to animate...meaning you can stick this in an external script without any issues.

Upvotes: 4

Related Questions