Yax Yax - 8 months ago 60
PHP Question

Show a DIV after Page Redirect with jQuery

I have a

that is set to
is ready. I want this div to appear when the containing div becomes visible. I also have a form that accepts user input. The form is redirected to its page,
action ="<?php echo htmlentities($_SERVER['PHP_SELF']);?>"
. The submit has a class
. The containing div becomes visible upon successful submission of record to DB.

PHP Code:

if (isset($_POST['submitRecord']) && $success != ''){
echo "<div class='containingDiv'>";
echo "<div class='alloc'>";
echo "<p class = 'closeButton'> x </p>";
echo "<p class = 'allocationSuccess'>Allocation Successful for Mr/Mrs ABC</p>";
echo "</div>";
echo "</div>";

jQuery code:

$('.containingDiv, .alloc').hide();
$(document).on('click', '#saveRecord', function () {
if ($(".containingDiv").is(':visible')){
$(document).on('click', '.closeButton', function () {

The form get submitted and
is assigned a string but
won't show.

Any help will be deeply appreciated.


Based on your title, you are using a normal form submit (no ajax). That means that the flow of events is like:

  • Your button is clicked;
  • Your javascript function is triggered, trying to animate a div that is not on the page;
  • The visitor gets redirected to the page to where the form is submitted, even if there was an animation, the visitor will not see it because of the redirect;
  • The form is processed and a new page is shown (no javascript onClick events have been triggered here);
  • The success div is added to the page but remains hidden.

There are two solutions:

  1. You submit the form using ajax, keep everything in the same page and animate what you want to;
  2. You show - and don't hide on page-load - the succes box on your success page and you only hide it after a certain timeOut or button click. Note that you do not have to hide the box on page load as it is only added to the page on a successful form submit.