What is the best way to manage the "open link in a new tab" action?

I am currently working on a project that involves displaying a series of resources on a web page. Each resource is stored as a record in a database with two fields: "url" and "visited."

One issue I have encountered is that when a user clicks on a resource's URL, the "visited" field is updated to true in the database via an AJAX PUT request. However, if the user decides to open the URL in a new tab, this event is not captured by the JavaScript and the database record remains unchanged.

I came across a discussion on Stack Overflow suggesting to switch from using a "click" handler to an "onmousedown" handler. Unfortunately, this approach only captures the opening of the context menu, even if no action is taken.

Is there a standard method for handling the "open in new tab" event effectively?

Any insights or suggestions would be greatly appreciated!

javascriptbrowser

Answer №1

By rerouting resource URLs through your own site (

yoursite.com/redirect?url=actual.url
), you can effectively monitor when users access the links. This method eliminates the necessity for an AJAX request, making tracking more efficient.

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

Using CKEditor in an AngularJS web application: Tips and tricks

I'm having trouble integrating the ckeditor into an HTML page that's built with angularjs. Despite trying out numerous examples, such as the ng-ckeditor and ckeditor directives, I haven't found a solution that works for me. What I need is ...

javascriptjqueryhtmlangularjsckeditor

Having trouble with WebRTC video streaming on Firefox?

I have implemented one-way broadcasting in my Dot Net MVC website for video streaming using the example found at https://github.com/muaz-khan/WebRTC-Experiment/blob/master/webrtc-broadcasting/index.html. While it works perfectly in Google Chrome, unfortuna ...

javascriptjqueryasp.net-mvcfirefoxvideo-streaming

Steps to customize Button Color and Label in a specific cell within a Material UI Table

I've implemented the Material Table to display my data, and it seems like this: In my code, I have a declared state as follows: const [sharedOrdersList, setShareOrdersList] = useState([]) When the User clicks the Share button, I push the Order Id in ...

javascriptreactjsreact-hooksmaterial-ui

Creating a radial progress chart using Plotly JavaScript

I recently started working with the Plotly library and now I need to display a circular progress graph in Vuejs 2, like the one shown below. While Plotly is a comprehensive tool, I have not come across an example that matches this specific design using Ja ...

javascriptvue.jsplotlyplotly.js

Retrieving information from an external API in response to an express GET request

After reviewing the sample code in the gtfs-realtime-bindings library's documentation, I attempted to implement a similar logic within my router. However, I encountered issues with extracting the result from the request() route.get('/', (req ...

javascriptnode.jsapiexpressgtfs

Node.js: How to handle spaces when running a UNIX command

Currently, I am utilizing the following command to compress files in node.js: var command = '7z a ' + dest + ' ' + orig; exec( command, function(err, stdout, stderr) { ...}); An issue arises when a file containing spaces is involved, ...

javascriptnode.jsescaping

Tips for boosting the tabindex in a React search result list with ul-li elements

Implementing search results using ul li: <ul className="search-result"> <li tabindex="1">title here...</li> <li tabindex="2">title here...</li> <li tabindex="3">title here... ...

javascripthtmlcssaccessibility

Implementing Google Ads Code in NextJS for Automated Units

I'm currently working on a NextJS project and I need to integrate the Google AdSense code for automatic ads. The Google ad code I have is: <script async src={`https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=${process.env. ...

javascriptnext.js

Angular allows users to interact with objects in THREE.js by simply clicking on

I've tried numerous solutions, but none of them seem to work - the cube is in the wrong position and only one face is detected. Since the angular event is easy to call. 1. Insert a tag into the HTML code. <div (click)="onClickCanvas($event)"> ...

javascriptangularthree.js

Utilizing logic classes in conjunction with styled components

I am seeking a way to utilize this logic in order to assign the appropriate class to an element: <ul onClick={handleClick} className={click ? 'dropdown-menu clicked' : 'dropdown-menu'}> However, as I am employing styled component ...

javascriptreactjsnext.jsstyled-components

Explore the wonders of generating number permutations using JavaScript recursion!

After providing the input of 85 to this function, I noticed that it only returns 85. I am confused as to why it is not recursively calling itself again with 5 as the first number. console.log(PermutationStep(85)); function PermutationStep(num) { var ...

javascriptrecursionpermutation

Creating a template based on an object type in JavaScript with Angular: A step-by-step guide

I have a collection of objects, each with a property indicating its type. Here's an example: [ { "type" : "date", ... },{ "type" : "phone", ... },{ "type" : "boolean", ... } ] I'm ...

javascriptangularjsoop

Having difficulties integrating a login solution due to an error saying "eslint Promise executor functions should not be async no-async-promise-executor"

I'm currently working on integrating a login solution into my Vue app using the JWT Authentication plugin. While I have a test solution that is functional, I'm facing an issue in my main branch where the eslint version seems to be causing an err ...

javascriptvue.jspromisevuexeslint

What is the best way to trigger a re-render of a Vue component after a change in Vuex

I'm interested in developing a custom component to modify the basemap of a leaflet map without relying on L.control.layers. To achieve this, I created a sidebar component that offers options to switch between different basemaps. In my implementation, ...

javascriptvue.jsleafletvue-componentvuex

Retrieve the visible text content of an element by utilizing various ids

I am currently working on a project using AngularJS with multiple conditions all sharing the same id. My goal is to extract text only from the condition that evaluates to true. Recently, I discovered a major bug in an app that I am preparing for release. ...

javascriptjqueryangularjsionic-framework

Using AJAX to dynamically update a div's class following a POST request

Upon double clicking a row, I am attempting to trigger the function outlined below. Despite my efforts, I have not been able to update the div class with any changes. function book(id) { $.ajax({ type: "POST", url: "ajax_servlet. ...

javascriptjqueryhtmlajax

When utilizing the .populate() method in Mongoose, how can you retrieve and append ObjectIds with extra attributes to an array (which is returned by .populate()) collected from the

When using the .populate() method in Mongoose, how can I retrieve and add ObjectIds with additional properties to an array (returned by .populate()) if their corresponding document in the collection no longer exists? This question pertains to MongoDB and ...

javascriptnode.jsmongodbexpressmongoose

Tips for evaluating an array of objects in JavaScript

Welcome to the world of coding! Here's a scenario with an array: [ { "question1": "Apple", "question2": 5, "question3": "Item 1" }, { "question1": ...

javascriptarraysjsonchart.jssurveyjs

Preventing the submission of form post values by using jQuery remote validation

     Within my form, I have incorporated two submit buttons (save & exit, next) and implemented remote email address duplication checks. Everything is functioning properly, however, upon submission of the form, I am unable to determine which specific s ...

javascriptphpjqueryhtmlcodeigniter-3

The issue of undefined return for multiple columns in MVC when using MCAutocomplete Jquery UI

My MVC multiple column is returning undefined. What am I missing or what is wrong with my code? Please help. https://i.sstatic.net/euwe8.png Controller public ActionResult EmployeeIDSearch(string term) { // Get Tags from data ...

javascriptjqueryasp.net-mvcautocompleteasp.net-mvc-5