What is the best way to include a small highlighted icon on a button within a webpage to indicate the presence of new updates?

I have developed a Java web application that consists of a server (MyServer) and a client side (webpage). The client sends requests to MyServer to retrieve information, which in turn makes requests to the Confluence API server to fetch data from our latest Confluence page within our Confluence space.

By clicking on the "What's New" button on our website, users can view the latest page from our Confluence space displayed in the What's New web widget. Users have the option to click on the What's New button to see the most recent Confluence page available.

Now, I am looking to implement the following features:

  1. Display a highlighted icon on the "What's New" button every time a new update is made to either the same or a new Confluence page, similar to how notifications work in chat applications like WhatsApp or Facebook Messenger.
  2. Once a user views the new update, the highlighted icon should disappear for that specific user.
  3. The highlighted icon should appear for all logged-in users the first time they access the update. If one user opens it, the icon will disappear for them, but remain visible for others who have not viewed the update yet.
  4. If a new change is made to the Confluence page and a user has not seen this update, the highlighted icon should reappear for that user.

Can you provide guidance on how I can achieve these functionalities? Thank you for your assistance. https://i.sstatic.net/r6mJh.png

javascriptjavajsonjspservlets

Answer №1

When seeking a solution to your issues, consider the following:

  1. Implement websockets for real-time chat notifications from the backend.

  2. Use JavaScript code to target the notification icon element #notifIcon. To hide:

    document.getElementbyId('notifIcon').style.display = 'none'

    To show:

    document.getElementbyId('notifIcon').style.display = 'block'

  3. To personalize it for users, retrieve data from the database schema and make updates accordingly.

  4. Update your data using websockets once again.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

The dropdown feature powered by javascript fails to execute onchange functionality

I have a dropdown menu that is supposed to show student data from MySQL when "STUDENT" is selected. However, when the user selects "STUDENT", the page briefly displays the student data before returning to the original content. I am struggling to fix this i ...

javascriptphpjquerymysql

Having difficulty creating the probot.github app due to an error: The removal of the programmatic API in npm version 8.0.0 causing failure

Currently, I am facing an issue while attempting to set up the probot.github app using the command npx create-probot-app my-first-app which can be found at: . My system is running on the latest node version v19.3.0 with npm version 9.2.0. However, upon exe ...

javascriptnode.jsnpmgithub-appprobot

Reactjs failing to fetch data with Axios

I am currently working on a project using Reactjs/nextjs and trying to fetch data using "Axios". The API URL is successfully fetching the data, but on my webpage, it only shows "There are no records yet". Can anyone help me find where I am going wrong? H ...

javascriptreactjsnext.js

Efficiently Loading AJAX URLs using jQuery in Firefox

setInterval(function(){ if(current_url == ''){ window.location.hash = '#!/home'; current_url = window.location.hash.href; } else if(current_url !== window.location){ change_page(window.location.hash.split('#!/&apo ...

javascriptjqueryajaxhashsetinterval

displaying a div as a pop-up within an ASP.NET MVC 4 web application

One aspect of my asp.net MVC 4 application involves a partial view structured like so: <form class="qty-add" action="#" method="POST"> <label>Qty:</label> <div class="inp-controller"> <a href="#" c ...

javascriptjqueryasp.net-mvcasp.net-mvc-4

AngularJS offers a function known as DataSource for managing data sources

During a recent project, I had to convert xml data to json and parse it for my app. One issue I encountered was related to the DataSource.get() function callback in the controller. After converting the xml data using a service, I stored the converted data ...

javascriptangularjs

Start the Angular $scope when the page first loads

When initializing a user session with specific data, I face the challenge of making sure that the session data is populated before it is required by certain directives in my application. Currently, I check if the local session data is empty on loading the ...

javascriptangularjs

Tips for embedding the <img> element inside the <a> element

I'm attempting to place an image within a hyperlink tag. Current code: <div class="Sample"> <a href="http://www.Sample.com"> <img src="http://www.Sample.com/Sloth.jpg"> </a> </div> I wish to add <img class= ...

javascriptjqueryimage

Creating a basic C++ program using Java concepts (Abstract class)

Java Programming Example (Successful) Define an abstract class Personnell with Manager and Worker as its subclasses. The class contains the abstract function getAnnualIncome(). Personnell employee[] = { new Manager("Thomas", "Nasa", 1337, 250000), ...

javac++arrayspolymorphismabstract-class

Angular router.redirect is not able to pass variables as expected

I am facing an issue with the router redirect and template lifecycle while using Stripe checkout in my Angular 5 project. After a user signs up, I trigger the stripe checkout modal. Once the modal receives a payment source token, I perform some additional ...

javascriptangularstripe-payments

Selecting the first li element using JQuery selectors

Can anyone help me with creating an onclick event that triggers when the user clicks on the first list item which is labeled as "Any Date"? I am looking to use jQuery to target this specific element. <ul id="ui-id-1" class="ui-menu ui-widget ui-widge ...

javascriptjqueryhtmlcssjquery-ui

Is there a way to completely clear a form using jQuery in JavaScript?

I have a functioning script that sends emails via Ajax and PHP. However, I am also looking to reset the form after sending an email. Below is my jQuery code: <script src="http://code.jquery.com/jquery-latest.js"></script> <script> $(doc ...

javascriptjqueryajax

The autocomplete feature in React is not displaying properly due to a problem with rendering

I am currently working on creating an autocomplete/autosuggest search bar using the Material-UI library with data fetched from an API. Below is a step-by-step breakdown of the code implementation. We first define the options for the autosuggest search bar ...

javascriptreactjsecmascript-6axiosmaterial-ui

Learn how to verify changing form inputs with Vue watchers. The challenge of numbers

Currently, I am working on a sum application and encountering some challenges with input validations. I have implemented Watcher to handle the validations, and I am exploring the possibility of adding sound and color feedback for accurate validation. Repo ...

javascriptvue.jsvalidation

Can we find a jQuery AJAX equivalent to the 'finally' block in regular JavaScript?

Is there an equivalent of Java's 'finally' in jQuery AJAX calls? I have this code snippet here. Inside my always, I intentionally throw an exception, but I want it to always proceed to the then() method. call.xmlHttpReq = $.ajax({ ...

javascriptjqueryajaxpromise

The return value from the (VUEX + JEST) function is not defined

While working on a test, I ran into an issue. Despite double-checking everything, I can't seem to call the function correctly. Can anyone please assist me with this? The code in index.vue looks like this: import { shallowMount, createLocalVue } from ...

javascriptvue.jsjestjsvue-test-utils

What could be causing my React Router component to display incorrect styling?

While working with react-router, I encountered an issue where the text from the routed page started appearing in the navbar. Even though I separated it as its own component and it functions correctly, this specific problem persists. As a newcomer to React, ...

javascriptcssreactjsreact-router

Storing data with NPM global packages: Best practices

I have developed a global npm package that functions as a CLI tool. https://i.sstatic.net/PdT3Z.png My goal is to customize the user experience by having the package remember the user's previous choices. For example, if the user selects 'Iphone ...

javascriptnpm

Tips for sending requests other than GET on your API

I recently followed a tutorial on creating a REST API using Spring Boot and MongoDB. However, I encountered difficulties when trying to make requests other than GET. Specifically, when attempting to send a delete request (http://localhost:8080/api/v1/emplo ...

javarestcrud

Is there a way to stream audio directly from a URL on the client-side using ASP.NET?

I am currently working on a web page for an ASP.NET application using .NET Framework Version 4.0 and ASP.NET Version 4.7. My goal is to incorporate audio playback from a server. The specific URL I am dealing with is as follows: . However, I am struggli ...

javascriptasp.nethtml5-audio