CODEWITHSUNDEEP
phplaravelflash-message
msbomrel
msbomrel

Reputation: 519

Flash message shows after clicking, go back and go forward browser button

I have shown flash message once request is received from the server. If a users click go back and go forward button simultaneously... He again sees the same flash message which I think it's a bad message to the users... How can I solve this issue?

Upvotes: 1

Views: 1900

Answers (5)

yusuf öz
yusuf öz

Reputation: 1

İf success cache delete

@if (\Session::has('danger'))
<script>
    iziToast.show({
        title: 'Başarısız',
        message: "{!! \Session::get('danger') !!}",
        color: 'red',
        position: 'topRight', // bottomRight, bottomLeft, topRight, topLeft, topCenter, bottomCenter, center
        timeout: 3000,

    });
</script>

@php
    header("Cache-Control: no-store, no-cache, must-revalidate, max-age=0");
header("Cache-Control: post-check=0, pre-check=0", false);
header("Pragma: no-cache");
@endphp

@endif

Upvotes: 0

crazyGinger
crazyGinger

Reputation: 81

Late to the party, but the proposed header solutions above didn't work for me.

Instead, I use performance.getEntriesByType (which is widely supported) to determine if the user arrived on the page via the back button and, if so, I remove the code which displays the flash message from the flash message container:

<script>
        var perfEntries = performance.getEntriesByType("navigation");
        for (var i = 0; i < perfEntries.length; i++) {
            if(perfEntries[i].type === "back_forward"){ // if user has reach the page via the back button...
                document.querySelector("#flashMessageContainer").innerHTML = ""; //...delete the contents of the flash container
            }
        }
</script>

'performance.getEntriesByType("navigation")' returns "back_forward" if the user has arrived on the page by clicking either the back, or the forward, browser button (in my case, a flash message isn't necessary on a forward click either). It returns "navigate" if a link was clicked or a form submission resulted in a redirect.

Attribution: I pinched the solution from llaaalu

Upvotes: 2

msbomrel
msbomrel

Reputation: 519

I have achieved this problem using follwing code

  <script>
   @if(!empty(Session::get('message')))
    var popupId = "{{ uniqid() }}";
    if(!sessionStorage.getItem('shown-' + popupId)) {
        swal({
            html:
            "{{Session::get('message')}}",
            showCloseButton: true,
            showCancelButton: false,
            showConfirmButton: false,
            animation: false,
            customClass: 'animated tada',
            focusConfirm: false,
            background: '#008eb0'
        });
    }
    sessionStorage.setItem('shown-' + popupId, '1');
    @endif
</script>

Upvotes: 2

Abdulla Nilam
Abdulla Nilam

Reputation: 38642

It's because Browser helps you to load the page with the cache. You can do these

header('Cache-Control: no-store, private, no-cache, must-revalidate');
header('Cache-Control: pre-check=0, post-check=0, max-age=0, max-stale = 0', false);

or

<meta http-equiv="cache-control" content="max-age=0"/>
<meta http-equiv="cache-control" content="no-cache"/>
<meta http-equiv="expires" content="0"/>
<meta http-equiv="pragma" content="no-cache"/>

or

@if(Session::has('message'))
    <div class="alert alert-{{ Session::get('status') }} status-box">
        <button type="button" class="close" data-dismiss="alert"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
        {{ Session::get('message') }}
    </div>
@endif

Upvotes: 3

Sascha A.
Sascha A.

Reputation: 4626

You could store the messageId from the shown message in a variable or in an (hidden) input-field with JavaScript, so you could check if the message has allready be displayed.

Upvotes: 1

Related Questions