使用jQuery进行页面重定向后显示DIV

Question

当document准备好时，我有一个div设置为hide() 。 我希望此div在包含div可见时出现。 我也有一个接受用户输入的表格。 表单被重定向到其页面， action ="<?php echo htmlentities($_SERVER['PHP_SELF']);?>" 。 提交具有一个.submitRecord类。 成功向DB提交记录后，包含div便可见。

PHP代码：

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代码：

$(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);
  });
});

表单被提交，并且var $success被分配了一个字符串，但是.alloc不会显示。

任何帮助将不胜感激。

Answer 1

根据您的标题，您使用的是普通表单提交（无ajax）。 这意味着事件的流程类似于：

• 您的按钮被单击；
• 您的javascript函数被触发，试图为不在页面上的div设置动画；
• 访问者被重定向到提交表单的页面，即使存在动画，访问者也不会因为重定向而看到它；
• 处理表单并显示一个新页面（此处未触发javascript onClick事件）；
• 成功div已添加到页面中，但保持隐藏状态。

有两种解决方案：

1. 您使用ajax提交表单，将所有内容保存在同一页面中，并对想要的内容进行动画处理；
2. 您可以显示-而不是在页面加载时隐藏-成功页面上的成功框，并且仅在一定的timeOut或单击按钮后才将其隐藏。 请注意，您不必在页面加载时隐藏该框，因为它仅在成功提交表单时添加到页面中。