SCS SCS - 4 months ago 9
Ajax Question

static ajax for the whole web application run duration?

I have an ajax code for my notification with intervals set. The code is working but when pages is reloaded the whole ajax function is also reloaded.

This is happening because my jsp is included in other jsp's

<%@include file="../levelOfAccess.jsp"%>



WHAT I WANT TO HAPPEN:

I want the ajax function to stay as static once the program is starts
- until it ends


enter image description here

This is because I have this code where when the user clicks on the notification the number would not stay (it is working) but once the page is reloaded, and since the ajax will be reloaded with it, the number shows again (it should just show if the length from the previous data is longer.

Once it is clicked, I empty the div.

$("#value").empty();


is there a simple way of doing this?

var recent = 0;
setInterval(ajaxCall, 1000);
document.getElementById('yearImport').setAttribute('value', new Date().getFullYear());
var year = document.getElementById('yearImport').value;

function ajaxCall() {
var position = document.getElementById('position').value;
$.ajax({
url: "NotificationsPusher",
type: 'POST',
dataType: "json",
data: {
year: year,
position: position

},
success: function(data) {

if (recent < data.length) {
$("#value").empty();
$("#value").append(data.length - recent);
}
recent = data.length;
$("#myDropdown").empty();
if (data.length === 0) {
$("#value").empty();
$("#value").append("");
$("#myDropdown").append('\


<li class="padding2" style="text-align:center;">No Notifications</li>');
}
for (var i = 0; i < data.length; i++) {
if (i != 0)
$("#myDropdown").append('<hr/>');
if (data[i].status === "Approved") {
$("#myDropdown").append('<li class="padding2"><a class="approved" style="text-decoration:none;">' +
data[i].task + '</a><br/><h6 class="p">Recently Approved By ' + data[i].name + '<br/>' + data[i].time + '</h6></li>');

}
if (data[i].status === "Rejected") {
$("#myDropdown").append('<li class="padding2"><a class="rejected" style="text-decoration:none;">' +
data[i].task + '</a><br/><h6 class="p">Recently Rejected By ' + data[i].name + '<br/>' + data[i].time + '</h6></li>');

}

}



},
error: function(XMLHttpRequest, textStatus, exception) {
alert(XMLHttpRequest.responseText);
}
});
}


While for my
<%@include file="../levelOfAccess.jsp"%>
I have this kind of codes

<%@include file= "/WEB-INF/JSPImports/importsHead.jsp" %><% } else if (position.equalsIgnoreCase("Project Development Officer IV")) {
%>


FURTHER EXPLANATION: for Example:


when the user log in


  1. the first notification would be 8 (Ok) Then

  2. the user clicks on the notification (ok)

  3. the notification
    $("#value").empty();
    would be empty.. (still ok) Then the user goes to another page.

  4. the notification goes back to 8 (the ajax should be static) the notification should only show again



if

the length of the notification is longer than previous one for example
the data being fetched from the database becomes 9..

THEN

the notification would show 1 (previous - current)


Codes as @iceman suggested.

I have a function when clicked will run this set of code

function myFunction() {
var int = 0;
if (localStorage.getItem("seenNotifications")) {
int = localStorage.getItem("seenNotifications");
}
var tmp = int + parseInt($("#value"));
localStorage.setItem("seenNotifications", tmp);
$("#value").empty();
document.getElementById("myDropdown").classList.toggle("show");
}


then inside my ajax

success: function(data) {
var int = 0;

if (localStorage.getItem("seenNotifications")) {
int = localStorage.getItem("seenNotifications");
}

$("#value").append(data.length - int);

Answer

So what we do will be in the session of the browser we keep a track of the latest number of notifications that were seen. So if I have read 8 notification in Page 1, this is saved and at page 2 you retrieve 8 and subtract it from notif length from server.

Add this code before your $("#value").empty();:

var intit = 0;
if(localStorage.getItem("seenNotifications")){
    init = localStorage.getItem("seenNotifications");
}
var tmp = init + parseInt($("#value"))
localStorage.setItem("seenNotifications", tmp);
$("#value").empty();

And when you enter a page to show notifications:

var intit = 0;
if(localStorage.getItem("seenNotifications")){
    init = localStorage.getItem("seenNotifications");
}
$("#value").html(data.length - init);

If you want to persist this across multiple systems, ofcourse you should change this storage from local to the server ie. simply do an ajax to the server to store number of notification read by each user in the server.

Comments