在重定向后使用会话创建弹出消息将不起作用

Question

First of all i would like to mention that this is my first time creating a thread here so i am sorry if i'm doing something wrong.

Anyway i am working on my own forum system and i've got to a conclusion that i need to show popup messages after user actions whether it's a success message or a failure message i need that system on my forum.

I've made a big research and tried many methods to get this type of a system but the method that made the most sense in my case was using sessions as the trigger and also to store the message itself.

Without further ado, this is what i came up with :

function popupMessage(){
    setTimeout(function(){ 
        setTimeout(function(){ 
            $('.popup_message').remove('');
        }, 3000); 
        $('.popup_message').fadeOut();
    }, 3000);
    $('.header').append('<div class="popup_message success"><span><i class="fa fa-fw fa-check-circle"></i></span><p>success</p></div>');
}

This function is on my js file which holds all of my functions.

if(isset($_SESSION['message'])){
    $message = $_SESSION['message'];
    echo '
        <script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
        <script type="text/javascript" src="/assets/myscripts.js"></script>
        <script type="text/javascript">
            var message = \''.$message.'\';
            popupMessage()
        </script>';
    unset($_SESSION['message']);
}

That piece of code is on file which is included on the header of every page on my forum.

$_SESSION['message'] = 'success!';
header("Location: $location");

And those 2 rows are beeing executed for an example when a form is submitted.

Tbh i am kind of stuck right now and i dont know what to do and i'll tell you why, the function popupMessage() is working well by itself but it'll simply wont work when i call it through the if(isset($_SESSION['message'])) condition. and it's also important to add that when i've tried to replace the function call in a simple alert() it was working fine which means that the message is set but the function just wouldn't run when it's beeing called through the condition.

Btw i guess that it's pretty clear that javascript or jquery ain't my strong side i am pretty new to these so i am sorry if i've made your eyes hurt or anything.

Thanks in advanced for any help!

Answer 1

You need to make sure you're calling popupMessage() below where the HTML of the popup message is created in the DOM due to the order of operations. Otherwise, you can load it in the $(document).ready(); function like so

$(document).ready(function() {
  popupMessage();
});

to ensure the HTML element exists before executing JS on it.