Show a DIV after Page Redirect with jQuery

Question

I have a div that is set to hide() when document 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 .submitRecord . 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:

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

The form get submitted and var $success is assigned a string but .alloc won't show.

Any help will be deeply appreciated.

Answer 1

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.