使用jQuery重定向頁面後顯示DIV

當document準備好時，我有一個div設置爲hide()。當包含div變爲可見時，我想要這個div出現。我也有一個接受用戶輸入的表單。表單被重定向到其頁面action ="<?php echo htmlentities($_SERVER['PHP_SELF']);?>"。提交有一個類.submitRecord。包含的div在向DB成功提交記錄時變爲可見。使用jQuery重定向頁面後顯示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將不會顯示。

任何幫助將深表謝意。

來源

2014-04-28 Yax

檢查第一個'$（'。alloc'）。show（）' – hellosheikh

@hellosheikh我不希望它在第一個實例中顯示。在設置隱藏之前，我已經很好地工作了。 – Yax

@jeroen：不使用AJAX。它重新加載頁面。我不想使用AJAX來做到這一點。如何在沒有AJAX的情況下實現？ – Yax

根據您的標題，您使用的是正常表單提交（無ajax）。這意味着事件的流程如下：

您的按鈕被單擊;
您的javascript功能被觸發，試圖動畫div不在頁面上;
訪問者被重定向到表單提交的頁面，即使有動畫，訪問者也不會因爲重定向而看到它;
處理表單並顯示新頁面（此處未觸發JavaScript onClick事件）;
成功div已添加到頁面但仍保持隱藏狀態。

解決辦法有兩個：

你用ajax提交表單，把一切都在同一個頁面和動畫要什麼;
您顯示 - 並且不會隱藏在頁面加載 - 成功頁面上的成功框中，並且您僅在某個timeOut或按鈕單擊後隱藏它。請注意，您不必在網頁加載時隱藏該框，因爲它只會在成功的表單提交中添加到頁面上。

來源

2014-04-28 17:43:40 jeroen

@jereon：謝謝，但如果我展示它並隱藏'timeOut'，它將如何解決我的問題？ – Yax

@Yax它會顯示您的成功消息，只有在成功的表單提交併在一段時間後自動隱藏。但你也可以堅持你的按鈕。 – jeroen

@jereon：它的工作！謝謝你一大堆。 – Yax

使用jQuery重定向頁面後顯示DIV

回答

相關問題