Is it possible to manually activate a dropdown event using pure JavaScript?

I am attempting to manually trigger a dropdown event using JavaScript. Below is the function where I am trying to achieve this. I have successfully halted the initial event that occurs and now I need to initiate a dropdown event.

stopNavigationTriggerDropDown(event: any){
     event.stopImmediatePropagation();
     event.stopPropagation();
     event.preventDefault();

     //code to manually trigger dropdown event
}

Here is the corresponding HTML code:

<tr (click)="goToPlan(plan)">
    <td>....</td>...
    <td>
       <div class="input-group">
           <button (click)="stopNavigationTriggerDropDown($event)" type="button" class="btnTransparent" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
               <i class="fa fa-ellipsis-h"></i>
               <span class="sr-only">Toggle Dropdown</span>
           </button>
         <div class="dropdown-menu dropdown-menu-right">
            <a class="dropdown-item" (click)="action(apl)">Go</a>
         </div>
        </div>
      </td> 
  </tr>

I am specifically seeking solutions using pure JavaScript as I cannot use jQuery in this scenario. Despite finding examples online that utilize jQuery, I require a purely JavaScript approach. Thank you all for your help!

javascriptangulartypescript

Answer №1

There are a couple of ways to achieve this task.

Method 1: Using the fire button's click event

var btn = document.getElementsByClassName("example");
btn.click();

Method 2: Generating and triggering an event on the page (refer to: https://developer.mozilla.org/en-US/docs/Web/Guide/Events/Creating_and_triggering_events)

var btn = document.getElementsByClassName("example");
var customEvent = new Event('click');
btn.dispatchEvent(customEvent);

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

What is the proper method for appending a string to the id of a React JSX div element?

Is it possible to dynamically change the id of a div in JSX using the following code snippet? { ['A','B','C','D'].map((element, cell) => ( <div id="alphabet_{element}"> Some </div> )) ...

javascriptreactjsbrowserfrontendjsx

When the webpage first loads, the CSS appears to be broken, but it is quickly fixed when

Whenever I build my site for the first time, the CSS breaks initially, but strangely fixes itself when I press command + s on the code. It seems like hot reloading does the trick here. During development, I can temporarily workaround this issue by making ...

javascriptreactjsnext.js

The webpage is not refreshing or reloading despite using window.location.href

When creating a refreshcart() function, the window.location.href is assigned to currentUrl. However, when making an ajax call in the else block with window.location.href = currentUrl, true; it does not successfully refresh the page. $(document).ready(fu ...

javascriptjqueryajax

"Exploring the dynamic duo: Algolia integration with Angular

I've been following a tutorial on implementing instantsearchjs in my website, which can be found here. Everything is set up correctly and I can query for results in .JSON format from my website. However, I'm having trouble figuring out how to r ...

angularalgolia

What is the best practice for using templates in a constructor versus connectedCallback?

Should I apply template in the constructor or connectedCallback of a custom element? In my experience, when I apply it in connectedCallback, sometimes attributeChangedCallback is called before and I can't query for elements. export class TestElement ...

javascriptweb-componentcustom-elementhtml5-template

Showcase a sizable picture broken down into smaller sections

I am interested in creating a mapping application similar to Google Maps that can asynchronously load images from the backend. I am seeking guidance on where to begin and how to proceed in this endeavor. The ultimate goal is to have the image displayed w ...

javascriptjqueryhtml

Adding a Resource Bundle to a Vue project

I am looking to integrate the ResourceBundle package into my Vue project. After installing it with the following command: npm install resource-bundle I discovered these exported functions in the index.js file of the ResourceBundle package: export functi ...

javascriptecmascript-6vue.jsvuejs2es6-modules

Is localStorage.getItem() method in NextJS components behaving differently?

I'm working on my nextjs application and I wanted to utilize the power of localstorage for storing important data throughout my app. Within the pages directory, specifically in the [slug].tsx file, I implemented the following logic: export default fu ...

javascriptreactjsnext.jslocal-storage

Confirm the dimensions of an image prior to uploading using Node, Express, and Multer

Currently, I am developing a project using Nodejs with the express framework and ejs as the view engine. I have encountered an issue while working on image uploads. I am utilizing Multer for this task, but I need to implement a requirement where images wil ...

javascriptnode.jsexpressnpm

Vue randomly sets the prototype of props in its definition

When the same code with the identical data structure is passed to the prop, it randomly sets the prop as an array or an object. The following is the code fragment: const props = defineProps({ all: { type: Array, default: [], } }) ...

javascriptlaravelvue.jsinertiajs

Tips for targeting a specific element with providers in Ionic

By using the specified pattern, I am aiming to achieve a unique toolbar or header for only certain pages. Is there a way to accomplish this without injecting the provider and keeping the page as a standalone? My understanding of Ionic is still developing, ...

angularjstypescriptionic2

Is it possible to alter CSS attributes dynamically without setting a limit on the number of changes that can be made?

In my current project, I am looking to add a feature that allows users to choose the color scheme of the software. While the choices are currently limited, I plan to implement a color picker in the future to expand the options available. So far, I have ex ...

htmlcssangular

I am encountering an issue where body-parser is not functioning properly with typescript. Whenever I make a request, the request.body is returning as undefined

Below is the code snippet for my Express application using TypeScript version 3.7.4: import bodyParser from "body-parser"; import config from "config"; import cookieParser from "cookie-parser"; import express from "express"; import mongoose from "mongoose ...

javascriptnode.jstypescriptexpressbody-parser

Running pre-commit eslint autofix but encountering errors that do not exist

Encountering an issue with committing changes to a file due to a failed pre-commit eslint --fix task, displaying the following errors: × eslint --fix: C:\Users\user\source\repos\project\project-frontend\src\compone ...

reactjstypescriptgitwebpackeslint

Is it possible to generate a Date object from a predetermined string in typescript?

I have a string with values separated by commas, and I'm trying to create a Date object from it. It seems like this is not doable -- can someone verify this and provide a solution if possible? This code snippet doesn't work : let dateString=&a ...

datetypescript

Issue with Validators in Model-driven Forms

Currently conducting testing on a basic application. These are the files in use: home.component.ts import { Component } from '@angular/core'; import { FormGroup, FormControl, Validators, FormBuilder } from '@angular/forms'; @Componen ...

angulartypescriptangular2-templateangular2-formsangular2-cli

What is the process of transforming async/await code into synchronous code in JavaScript?

Blocking the event loop is generally considered bad practice due to its consequences. However, even the native fs module includes some synchronous functions for specific purposes, such as CLIs using fs.readFileSync. I am interested in converting the follo ...

javascriptnode.jsasynchronous

Limiting Ant Design Date range Picker to display just a single month

insert image description here According to the documentation, the date range picker is supposed to display two months on the calendar, but it's only showing one month. I carefully reviewed the documentation and made a change from storing a single va ...

javascriptreactjsantd

Injecting script into a webpage and initiating an ajax request prior to receiving a response

Trying to accomplish something a bit complex that I believe is feasible, or perhaps someone could offer a suggestion on how to achieve it. At website A, there is a database containing booking data. At website B, the goal is to display information about w ...

javascriptphpjqueryajaxxss

Trouble with a basic Angular demonstration

After replicating an angular example from w3schools (found here), I encountered some issues with it not functioning correctly. Despite my efforts, the code appears to be accurate. Can anyone spot what might be going wrong? To provide more context, here is ...

javascriptangularjstwitter-bootstrap