Reduce the value of a Perl scalar variable each time an ajax script is executed

My webpage features a header with a notification button that indicates the count of unarchived notifications using this Perl code snippet:

@notices_posts = System::Notice->fetch_all_posts(userid => $user->userid(), visible => 1);
@regular_posts = sort { $a->created() cmp $b->created() } grep { !$_->important() } @notices_posts;

This count is displayed in the header as follows:

<b><%= (scalar @regular_posts) %></b>

An ajax script is implemented on the page:

$(document).on('click', '.archive-button', function(){
    var notice_id = $(this).data('notice_id');
    var archiveaddress = '/user/notices/archivenotice/' + notice_id;
    var archived_notice = 'tr.notification-' + notice_id;

    $.post(archiveaddress, {notice_id: notice_id}).done(function(){
        $(archived_notice).css("background" , "#F2F2F2");
    });
});

This script executes every time a user clicks the "archive" button on a notification. Currently, when the Perl script for archiving runs successfully, the notification turns gray. However, I also want it to update the displayed count of unarchived notifications every time a user archives an item. Ideally, this would involve decrementing the displayed value each time the ajax script is executed.

Answer №1

To update the number, assign an ID to the element and utilize JQuery.

<b id="newID"><%= (scalar @regular_posts) %></b>
...
$(document).on('click', '.archive-button', function(){
    var notice_id = $(this).data('notice_id');
    var archiveaddress = '/user/notices/archivenotice/' + notice_id;
    var archived_notice = 'tr.notification-' + notice_id;

    $.post(archiveaddress, {notice_id: notice_id}).done(function(){
        $(archived_notice).css("background" , "#F2F2F2");
        $('#newID').html(parseInt($('#newID').html(), 10)+1)
    });
});

For further information: jQuery increment value of <span> tag

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

Enhancing AngularJS functionality through the integration of jQuery within a TypeScript module

As I try to integrate TypeScript into my codebase, a challenge arises. It seems that when loading jQuery and AngularJS in sequence, AngularJS can inherit functionalities from jQuery. However, when locally importing them in a module, AngularJS fails to exte ...

Tips for incorporating real-time data into your nodeJS and express applications

I am currently utilizing express for managing all the routing in my web application. Additionally, I have integrated firebase to store my data. For organization purposes, I decided to divide my code as follows: index.js: This file serves as the main node ...

Angular 2 - AOT Compilation Issue: Running Out of JavaScript Heap Memory

I've been working on an angular2 project and when I try to build the AOT package using the command below, I encounter errors: ng build --aot --prod The errors returned are related to memory allocation failures and out of memory issues in the JavaS ...

What steps do I need to take to ensure this function runs sequentially? Perhaps my understanding of async and await is lacking

I have a function that is responsible for adding data to my database. However, I'm encountering some inconsistency where it works sometimes and fails other times. My suspicion is that the eDataBuilder function is taking too long to iterate through the ...

Enhance user input with Struts 2 autocompletion feature

<ajax:autocompleter name="cityName" list="list" size="1" label="Select City" listValue="cityName" listKey="id" autoComplete="true"></ajax:autocompleter> I encountered an issue while implementing Struts 2 with AJAX, as the autocomplete fun ...

Using JSDoc and Visual Studio Code: Writing documentation for a function that is being passed as an argument to another

Struggling to properly document the input parameters for a JavaScript function using JSDoc. The documentation suggests using the @callback comment, but Visual Studio Code (VSCode) doesn't seem to recognize it. In VSCode, the intellisense for the loca ...

What causes unexpected outcomes when using async / await with Array.map()?

Below is a functional version of my code that produces the expected output: ***.then(r => r.json()).then(async r => { for (let i = 0; i < r.length; i++) { let pipeline = r[i]; p ...

Journeying through JSON: Presenting the value alongside its hierarchical parent

I'm completely new to JSON Path, so I'm not sure how complicated this could be, or if it's even possible. The JSON structure I have consists of multiple groups, each containing a set of fields. Both the groups and the fields have their own ...

Verifying whether an object has received any additional items

I am looking for a way to determine if an object has new subobjects. Specifically, I have an object with multiple nested objects and I want to check if the main object has any new objects added to it. Is there an existing method to achieve this? methods: ...

Looking to replace a background image using javascript?

(apologies for any language mistakes) I have multiple divs with a common background image. I assigned them the same class and set the background image using CSS in style.css which worked perfectly fine. Now, I want to change the background image dynamical ...

Can a string or javascript object be uploaded without being saved in a file? - IPFS

I've been exploring the capabilities of js-ipfs API and I'm curious to know if js-ipfs is limited to only uploading files/folders. Is there a way to upload other types of data, such as a JavaScript object like: { heading:"SomeHeading", c ...

Issue encountered while attempting to run executeJavascript()

Hello, I’m looking to insert the output of a Python function that I have stored in the variable data. However, when I attempt to insert the value of this variable using the command document.getElementById("h1-fs-s5").innerHTML, it doesn’t work as expec ...

Determine in uibmodal /route

Within my code, I have the following: var b = 1 var a = $uibModal.open({ ariaLabelledBy: 'modal-title', ariaDescribedBy: 'modal-body', templateUrl: 'enteModal.html', controller: 'enteCtrl', reso ...

Trouble in Angular JS: Syntax glitches

Here is the factory that I am working with: (function() { angular.module('temp') .factory('Factory',Factory); employeeFactory.$inject = ['$http']; function employeeFactory($http) { var factory = {}; ...

What is the best way to pass information between Express middleware and endpoints?

Many middleware packages come with factories that accept an options object, which often includes a function to provide necessary information to the middleware. One example of this is express-preconditions: app.use(preconditions({ stateAsync: async (re ...

I encountered an issue while attempting to establish a connection to an API using WebSocket. Specifically, I received an error message stating: "Uncaught ReferenceError

Guide on Installing the API from GitHub; const WebSocket = require("ws"); const DerivAPI = require("@deriv/deriv-api/dist/DerivAPI"); // Use your own app_id instead of 1089 for testing // Register your own app at api.deriv.com to get a ...

Manipulating HTML content with jQuery

Review the code snippet provided below <div id="post-1234"> <h3><a href="some link">text</a></h3> <div> <div> <div> <span class"Event-Date">Event Date 1</span> </div> < ...

Problem with Safari: File downloaded with name "Unknown" due to Javascript issue

After successfully converting my data to text/csv, I can easily download the file in Chrome. However, when attempting to do so in Safari on an iPad or Mac, it opens a tab with the name "unknown" or "Untitled". The code snippet I am using for this is as fol ...

Present information using Vue.js

Struggling to display just the name from the request object in my form using JavaScript. I'm new to working with JS and need some guidance. I attempted to use {{ request.name }}, but it's not functioning as expected. When I tried {{request}}, it ...

Accessing data in JSON format from a URL

I'm working on a website that analyzes data from the game Overwatch. There's this link () that, when visited, displays text in JSON format. Is there a way to use JavaScript to read this data and display it nicely within a <p> tag on my si ...