使用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或單擊按鈕后才將其隱藏。 請注意，您不必在頁面加載時隱藏該框，因為它僅在成功提交表單時添加到頁面中。