Is it possible to programmatically click a plotly mode bar button using JavaScript in a Shiny app?

After some research, I've discovered that in order to achieve my goal, I need to incorporate shinyjs and extendShinyjs. Here's what I have implemented so far:

In the ui.R file, outside of the ui function:

js_reset_axes <- "shinyjs.reset_axes = function(){ }"

Within the ui function:

extendShinyjs(text = js_reset_axes, functions = c("reset_axes"))

And in the server function:

js$reset_axes()

Although I'm not familiar with JavaScript syntax, it is evident that I need to specify the location of the mode bar button in the ui.R function and indicate that it should be clicked. It seems like this code corresponds to the reset axes button location:

<a rel="tooltip" class="modebar-btn" data-title="Reset axes" data-attr="zoom" data-val="reset" data-toggle="false" data-gravity="n">

What is the correct JavaScript syntax to trigger a click on this element?

Given that there are multiple elements sharing the same classname, I may need to differentiate using the data-title or data-val identifier. Alternatively, I could remove all other elements and focus solely on the one that interests me.

https://i.sstatic.net/2dgDe.png https://i.sstatic.net/ju0VE.png

Answer №1

If you are looking to target the fourth element with a specific class name, consider using the following JavaScript code snippet:

document.querySelectorAll('.modebar-btn')[3].click();

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

Inform the user that an error has occurred when attempting to perform an invalid

While using redux promise middleware for my front end, I am wondering about the correct status code to throw from my backend in case of an error. I know that I can use res.status(500).json(something), but is 500 the appropriate code for all types of erro ...

Using MongoDB to find a specific element in an array and then make updates

I have performed aggregation to calculate the total and the objects that contribute to the total. Now, I need to update the source table with the aggregated object ID for the elements involved in the aggregation, establishing a two-way relationship. col ...

How do I fix the build error that says "Operator '+' cannot be used with types 'number[]'?

The function below is designed to generate unique uuidv4 strings. function uuidv4() { return ([1e7] + -1e3 + -4e3 + -8e3 + -1e11).replace(/[018]/g, c => ( c ^ (crypto.getRandomValues(new Uint8Array(1))[0] & (15 >> (c / 4)) ...

Efficiently managing multiple database updates with PHP and JQuery

Having trouble processing multiple mySQL updates simultaneously? I have 4 select/option boxes fetching data from a db table and I want to update the database onChange using JQuery. It's working with one select module, but adding more causes issues. Th ...

Switch between viewing outcomes retrieved from a database

I'm fairly new to working with jQuery, PHP and databases, but I have managed to successfully create a database and retrieve data using PHP. When a search term is entered, the retrieved data from the database is displayed on the results page. For exam ...

Implementing a class addition on focus event using Angular 2

Currently, I am in the process of upgrading an Angular 1 application to Angular 2 and encountering an issue with one of my existing directives. The task at hand is straightforward. When an input field is focused, a class should be added (md-input-focus) a ...

Best practices for establishing a conditional statement with JQuery's inArray function

I am working on a code snippet to generate a list of unique random numbers. Each generated number is supposed to be added to an array after checking that it doesn't already exist in the array. However, I seem to be facing some challenges with getting ...

Three.js - Exploring the Significance of "THREE" within the THREE.scene Framework

Just starting out in JavaScript and experimenting with animations using three.js library. I'm trying to grasp the meaning behind: const scene = new THREE.Scene(); Why is the "THREE" necessary in THREE.Scene? Could we not simply write const scene = n ...

Display a modal window in Bootstrap when the countdown timer reaches zero

I am facing another challenge. I am trying to set up a scenario where a countdown timer triggers a modal window to appear once it reaches 0. I have the codes for both the modal and the countdown timer, but I am struggling to figure out how to make them wo ...

Is there a foolproof method to authenticate form submissions using Javascript/Ajax instead of relying on PHP?

Currently, my process of handling HTML form submissions is done in PHP where I submit the form to a PHP file that: Verifies against a cookie created at page load to prevent CSRF. Includes a require_once() function for validation purposes. Executes other ...

What causes certain files to sporadically duplicate themselves in Visual Studio Code?

While using vscode for NodeJS development, I have noticed that certain files seem to duplicate themselves sporadically. Why is this happening and what steps can I take to resolve it? I am unsure of how to tackle this issue... ...

Is Angular 2+ responsible for loading the entire module or only the exported components within it?

I'm dealing with a situation where I have a large module but only need to export one specific component. I'm wondering if Angular loads the entire module or just the exported components, as I want to optimize performance without compromising the ...

What is the method for including a plus-minus ± error in a text label within a plot?

Here is how my data is structured: var1, var2, mean, std 1 , 2 , 3 , 4 etc.. I am looking to create a visual representation of this data similar to a heat map, but with the addition of text labels inside each cell. These labels should display the ...

IE presenting problems with JQuery content loaded via Ajax

I operate a website that showcases various products, each with a corresponding link to a fancybox displaying detailed information about the product (detailed.php file). <a class="fancy fancy'.$_GET['type'].'" href="detail.php?id=&ap ...

Is it possible for two node scripts running on the same machine to interfere with each other's execution

In the scenario where a parent node file (such as an express server) spawns child nodes that execute computationally intense tasks, will these children cause blocking for the parent process? ...

Incorporating a dropdown feature into the navigation bar

Greetings, I am currently learning on the job as I work on a new website for my family business. I am struggling to make the drop-down navigation menu function properly on both desktop and mobile. I want it to have a simple design similar to the main nav ...

Exploring and identifying matching pairs within a JavaScript object

Currently, I have a JavaScript object that looks like this: records: [ { id: 1, name: michael, guid: 12345 }, { id: 2, name: jason, guid: 12345 }, { id: 3, name: fox, guid: 54321 }, { id: 4, ...

Extract JSON data from a web address using JavaScript

A unique system has been created to parse JSON and style it using CSS. Instead of outputting the data within the script, the goal is to retrieve data from a local or remote URL. <script type='text/javascript'> $(window).load(function(){ va ...

To prevent the need for redundant iterations, arrange an object based on a specific field

Looking for a way to avoid repeating the same loop multiple times while sorting an object efficiently. Take a look at this sample object: movies = [ { title: "The Lord of the Rings: The Fellowship of the Ring" year: 2001 ...

I'm searching for a universal guidebook on creating web page layouts

After 5 years of creating webpages, I have realized that my sites tend to have a nostalgic 1995 internet vibe. Despite being a C# programmer with knowledge in HTML, JavaScript, and CSS, my design skills could use some improvement. Is there a quick referenc ...