How to call flash on the client-side?

Question

CODE:

login.ejs

<script>
    req.flash('success_msg', 'You have logged in');
</script>

header.ejs

<div class = "alertMessage">

    <% if (success_msg != false){ %>
        <span class="alert alert-success containerMargins">
            <%= success_msg %>
        </span>
    <% } %>
    <% if (error_msg != false){ %>
        <span class="alert alert-danger containerMargins">
            <%= error_msg %>
         </span>
    <% } %>

    </div>

SITUATION:

This has nothing to do with using flash on the server-side and displaying the message on the client-side: it already works perfectly for me.

This has to do with calling flash from the client or replicating the same behaviour from the client with some other library.

QUESTION:

The code I showed of course does not work on the client-side, what can I do to replicate that behaviour on the client-side ?

What is the function supposed to do? (I have a vague idea, but some of the specifics can vary). — Quentin, Jan 17 '17 at 12:22
connect-flash has not been updated for almost four years. Are you sure you want to use such an old package? — str, Jan 17 '17 at 12:24
@Quentin I edited my question. It displays an error message inside the alertMessage div. — Coder1000, Jan 17 '17 at 12:24

score 1 · Accepted Answer · edited May 23 '17 at 11:45

1

The flash is a special area of the session used for storing messages. Messages are written to the flash and cleared after being displayed to the user. The flash is typically used in combination with redirects, ensuring that the message is available to the next page that is to be rendered.

So you need code which:

Stores some data somewhere that the client can access between pages
Reads that data
Deletes it after being read

Start by picking somewhere for option 1 (such as localStorage, or a cookie). The rest should be trivial - the original module is about 80 lines of code, including about 50% comments — to implement (but specific to which choice you make).

edited May 23 '17 at 11:45

Community

1
1

answered Jan 17 '17 at 12:24

Quentin

914,110
126
1,211
1,335

Could you please provide an answer with code pertinent to my current situation ? Thx ! – Coder1000 Jan 17 '17 at 12:28
@Coder1000 — No, as I said in the answer: it is specific to your choice of storage mechanism. – Quentin Jan 17 '17 at 12:29
I updated my answer to show all the code I am using. I could answer my own question with the working code, but that's not the point, is it ? – Coder1000 Jan 17 '17 at 12:30
@Coder1000 — That's server side code. You haven't picked a client side storage mechanism yet. This answer explains what you need to do, it points you at references to help you with that. Stackoverflow is not a code writing service, I'm not going to write you a library. – Quentin Jan 17 '17 at 12:30
localStorage then. – Coder1000 Jan 17 '17 at 12:31
@Coder1000 — So write a function which stores data in localStorage, and one which reads data from it and then deletes it. – Quentin Jan 17 '17 at 12:31
I know how to do that :) My point is: are you going to add working code that answers my question or am I going to have to answer my own question with that code ? I know how to go forward from here, but in the interest of all SO users, including those that may be neophytes, I would like an answer with code. – Coder1000 Jan 17 '17 at 12:34
@Coder1000 — Neither. You might like an answer with code, but as I said earlier, SO is not a code writing service. – Quentin Jan 17 '17 at 12:34
That's your choice :) I will accept your answer as the official one though but will still add my code underneath ^^ – Coder1000 Jan 17 '17 at 12:35
1

I always try to put code in my answers or my questions, I feel it helps everyone understand better and faster. But I diverge, we simply have a different understanding of essentially the same thing :) Thank you for your answer ! – Coder1000 Jan 17 '17 at 12:37

score 1 · Answer 2 · answered Jan 17 '17 at 14:59

Here is the solution I used:

<div class = "alertMessage">

    <span class="alert alert-success containerMargins" id="successDiv"></span>

    <span class="alert alert-danger containerMargins" id="errorDiv"></span>

</div> 

<script>

        if (localStorage.getItem("success_msg_local") != null) {
            document.getElementById("successDiv").innerText = localStorage.getItem("success_msg_local");
            document.getElementById("successDiv").style.display = "inline-block";
            window.localStorage.clear();
        }
        else if (localStorage.getItem("error_msg_local") != null) {
            document.getElementById("errorDiv").innerText = localStorage.getItem("error_msg_local");
            document.getElementById("errorDiv").style.display = "inline-block";
            window.localStorage.clear();
        }

</script>

and replacing req.flash('success_msg_local', 'You have logged in') by:

localStorage.setItem('success_msg_local', 'You have logged in');

How to call flash on the client-side?

2 Answers2