0

There is an ajax function, which displays a notification on the home page, however, every time I enter thehome page, or refresh the F5 page, the notification is displayed again.

How to fix this?

Is there any way to do this, using js jquery or PHP?

Below the code I have:

Controller

public function get_message()
{
    $notification= array();
    $notification['message'] = 'message test';
    $notification['type'] = 1;
    echo json_encode($notification);
}

Javascript

/*** variable ***/
var enum_toastr_type = {
    success: 1,
    info: 2,
    warning: 3,
    error: 4
}
/*** PageLoad start ***/
$(document).ready(function() {
toastr.options = {
    closeButton: true,
    positionClass: 'toast-bottom-right',
    timeOut: '20000'
}
   get_message_ajax();
});
/*** PageLoad end ***/
function show_message_toastr(mensagens) {
$(mensagens).each(function() {
    switch (this.tipo) {
        case enum_toastr_type.info:
            toastr.info(this.message);
            break;
        case enum_toastr_type.success:
            toastr.success(this.message);
            break;
        case enum_toastr_type.warning:
            toastr.warning(this.message);
            break;
        case enum_toastr_type.error:
            toastr.error(this.message);
            break;
    }
});
}
/*** Ajax start ***/
function get_message_ajax() {
    $.ajax({
        type: 'GET',
        async: false,
        contentType: 'application/json; charset=utf-8',
        url: "helper/get_message",
        success: (function(data) {
             //console.log(data);
             _obj = JSON.parse(data);
            show_message_toastr(_obj);
         }),
        error: (function(erro) {
             handle_ajax_error(erro);
        })
    });
}
/*** Ajax end ***/
Wagner Fillio
  • 395
  • 3
  • 19

1 Answers1

1

For doing this you will need to set cookies in the browser to track if user has visited this page already. This would also prevent this on page reloads. You can use local storage to store any data in the browser. 

// on page load check if user has not already visited this page
var visited = localStorage.getItem('visited');
if(!visited) {
  // call your ajax function which displays message
  get_message_ajax();
  // lets set visited to true so when user loads page next time then get_message_ajax() does not gets called
  localStorage.setItem('visited', true);
}

If you need something like; what if user logs out of the system, then you can clear the local storage on logout. Maybe you can add click listner on logout button and can clear local storage.

localStorage.clear(); // this will clear all website data in localStorage

// or you can update visited key;
localStorage.setItem('visited', false);

Or if you want something more advance like even user does not logs out and still you want to show message lets say if user visits after 1 day. Then you can store timestamp with key and parse it back when checking if user visited. 

var object = {value: "value", timestamp: new Date().getTime()}
localStorage.setItem("key", JSON.stringify(object));

When accessing the key you can do something like this;

var object = JSON.parse(localStorage.getItem("key")),
dateString = object.timestamp,
now = new Date().getTime().toString();
// here you can compare two time strings and decide to show message.

For different implementation and ideas on how to manipulate time here is some help;

https://developer.mozilla.org/en-US/docs/Web/API/Storage

When do items in HTML5 local storage expire?

tmw
  • 1,424
  • 1
  • 15
  • 26