Search code examples
javascriptjqueryajaxgreasemonkey

How to access hidden buttons and click them

I am trying to make a web page easier to use. At the moment, there is a drop down menu with a 'Delete' button. When I inspect, it looks like this:

<a title="" class="ajax-command" command="deletePost" href="#">Delete</a>

Is there any way I can execute this somehow? I am trying to create a new button that executes this command without the need of the dropdown. It is part of a set of buttons under this dropdown menu:

<ul class="dropdown-menu" role="menu" aria-labelledby="dLabel">
                        <li class="item">

I have tried just replicating the click of the drop down selection, but I can't get it to work. Any help would be great!

Solution

  • Simulate the click event on the link, it doesn't matter that it's hidden. I'll demonstrate this here by writing script that clicks meta link in hidden stackoverflow dropdown to the left:

    image description

    // Straight from MDN

    var evt = new MouseEvent("click", {
  bubbles: true,
  cancelable: true,
  view: window
});

var cb = document.querySelectorAll("div.js-help-dialog li:nth-child(3) a.js-gps-track");

var canceled = !cb[0].dispatchEvent(evt);

    This is what you should do. If you try to run their AJAX request you will find yourself re-inventing half of the whole application frontend.