What is the process for activating an event before another event on the same element with vanilla JavaScript?

Having an issue with the eventListener function. I am using the external library jquery.jstree-pre1.0fix2, which triggers a blur event on an input in my case.

However, I need to trigger my event before the one from the library. I have come across some solutions that involve jQuery, but I am looking for a code example or idea using native JS.

Is there any way you can suggest how I can trigger my event before the library's event? Below is the event I want to execute before the library's event:

document.getElementById('treeView').addEventListener("change", function (ev) {
    if(ev.target.classList.contains('jstree-rename-input')) {
        var inputRename = ev.target;
        inputRename.addEventListener("blur", function(eve) {
            eve.value = encodeURI(eve.value);
        });
    }
});

Answer №1

In case you are unable to guarantee that your code appears before the jstree, there is an alternative solution you can consider - although it is not recommended, it should work.

const intervalId = setInterval(function() {
  [...document.querySelectorAll('jstree-rename-input')].forEach(
    input => input.value=encodeURI(decodeURI(input).value)) // To ensure double encoding does not occur
  );
},300)

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

Looking for a custom textured circle in three.js?

Is there a way to create a circle with a texture on one side in three.js without using sprites? I was considering using THREE.CylinderGeometry, but I'm unsure of where to add the "materials" in the new THREE.CylinderGeometry(...) section. Any suggest ...

What is the method for accessing a variable that has been defined within server.js from within my ejs script tag?

Currently working on my first NodeJS project which involves a significant amount of file management. I've been thinking about how to streamline the process by accessing a variable created in my server.js within a script tag inside one of my ejs files. ...

When data is submitted through the POST method, it mysteriously disappears

When I send the "user" variable to another page called Survey.php, here's how it looks: In the index.html file: <form action="Survey.php" method="post" name="frm"> <div><input type="text" name= ...

How can I reverse a regex replace for sentences starting with a tab in JavaScript?

In order to format the text properly, I need to ensure that all sentences begin with only one Tab [key \t] and remove any additional tabs. input This is aciton Two tab One tabdialog This is aciton Two tab Second tabdialog out ...

Updating cannot be done while rendering, within the onError function of the Image

I recently encountered a warning stating that I cannot update during render. The recommendation was to update in ComponentWillMount. However, since I need to change the state after checking if the image is in an Error (not Loaded) state, I must make the ...

Display information on a web page based on user input using HTML

I've hidden other p tags and divs using display:none, How can I make them visible after inputting my name? I'd like to type in my name and reveal all the content within the previously hidden div <form method="post"> <p> < ...

What is the significance of using a double arrow function in Javascript?

Can someone explain the double arrow notation used in the code snippet below? How does the second arrow function get executed if the first one's response is true? And in what scenarios is this notation typically used? async check({ commit }) { ...

Looking to subtly transition from the current webpage to the next one with a fading effect?

I'm looking to create a smooth transition between web pages on my site by slowly fading out the current page and fading in the next one when a link is clicked. $(document).ready(function() { $('body').css("display","none"); $(&a ...

Exploring the best way to use $set in Mongoose for dynamically updating an embedded

I'm currently attempting to create a unique function that can update the value of a specific embedded MongoDB document within an array. The goal is to change the value based on its position. function removeAddress(accountNum, pos) { const remove ...

Is there a way to repurpose a function to work with both ids and classes?

My current code is affecting all elements instead of just the intended one. I've experimented with classes and ids, ruling out those as potential issues. I'm hoping for my JavaScript to target only the selected element, not all of them. Check ou ...

Retrieving JSON data through HttpClient in Angular 7

I am attempting to retrieve information from this specific URL. The data obtained from this URL is in JSON format. This particular file is named data.services.ts: import { Injectable } from '@angular/core'; import { HttpClient } from '@an ...

What methods does Angular use to handle bounded values?

Consider this straightforward Angular snippet: <input type="text" ng-model="name" /> <p>Hello {{name}}</p> When entering the text <script>document.write("Hello World!");</script>, it appears to be displayed as is without bei ...

What is the process for including an optional ngModelGroup in Angular forms?

I'm encountering an issue with incorporating the optional ngModelGroup in angular forms. Although I am familiar with how to use ngModelGroup in angular forms, I am struggling to figure out a way to make it optional. I have attempted to pass false, nu ...

Prevent automatic scrolling by clicking when you reach the bottom

In order to replicate the issue I am experiencing, please click on the down button four times, and then click on the up button. You will observe that you need to click the up button one extra time for it to function properly. How can I detect when it has r ...

Guide to Increasing Table Index within Nested Loop in Vue.js 3

How can I increment table indices within a nested loop in Vue.js 3? I am currently working with two-level deep arrays using Vue.js, and I need an index that starts at 1 and increases for each item in the top-level array. The desired output is as follows: ...

Unable to locate element using document.getElementById in ASP.NET form

Currently, I am working on a project to create an ASP.NET webforms page that will showcase a Google map using the Google Maps JavaScript API with multiple markers. Everything is functioning smoothly as long as I don't place <div id="map-canvas"> ...

Retrieving the parent value in React-select grouped options

When using react-select with grouped options, the structure is as follows: { label: PARENT_NAME, value: PARENT_ID, options: [ { label: CHILD_NAME, value: CHILD_ID, } ] } An array of these options is passed to the component lik ...

How to incorporate a JavaScript variable into an ERB tag

Exploring the integration of a JavaScript variable within erb <% %> tags has led me to consider using AJAX (refer to How to pass a javascript variable into a erb code in a js view?). As someone new to JavaScript and AJAX, it would be extremely helpfu ...

Next-auth custom authentication provider with unique backend

I am currently experiencing an issue with sessions while using auth authentication. My next-auth version is 4.0.0-beta.4 (also tried beta.7 with the same results). My backend utilizes a custom JWT token system that returns an object containing an access t ...

Guide to Binding a JSON Property (Set or Array) to an Interactive Input Form in AngularJS

My input form is structured like this: <div> <div class="form-group"> <label for="inputQuestion" class="col-sm-2 control-label">Question</label> <div class="col-sm-10"> <input data-ng-model="publication.qu ...