How to automatically click the AJAX button with a Greasemonkey script?

Question

(see below for a solution) I have a Greasemonkey script, which clicks on a link of interest within the target website. My script used to look so:

var MyVar     = $("a:contains('Save')"); 
if (MyVar && MyVar.length)
window.location.href    = MyVar[0].href;   

The problem is: the link does not have any valid target, it looks like:

<div class="controls">
    <a href="#" id="submit" class="special button">Save</a> 
</div>

I guess, that it is an AJAX button, please prove me wrong if it is not so. My script with:

window.location.href    = MyVar[0].click();

keeps clicking it endlessly, and very quickly, so that the page cannot even refresh.
It does not make any sense, but it is the only way I could actually click on that button.

Tried so far:

document.querySelector('special.button').click() //not working

and

setTimeout (clickDownloadButton, 1111);

function clickDownloadButton () {
    var dwnldBttn   = document.querySelector ("special.button");
    var clickEvent  = document.createEvent ('MouseEvents');
    clickEvent.initEvent ('click', true, true);
    dwnldBttn.dispatchEvent (clickEvent); //does not work either.
}

and this (proposed by Broc Adams as awell as found on Greasemonkey script Auto click javascript button (ajax?)):

// ==UserScript==
// @name     clicking
// @include  MY_SITE
// @include  MY-SITE
// @require  http://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js
// @require  https://gist.github.com/raw/2625891/waitForKeyElements.js
// @grant    GM_addStyle
// ==/UserScript==


waitForKeyElements ("a.special:contains('Save')", clickSaveButton);

setTimeout(function clickSaveButton (jNode) {
triggerMouseEvent (jNode[0], "mouseover");
triggerMouseEvent (jNode[0], "mousedown");
triggerMouseEvent (jNode[0], "click");
triggerMouseEvent (jNode[0], "mouseup");
}, 4000);

setTimeout(function triggerMouseEvent (node, eventType) {
var clickEvent = document.createEvent('MouseEvents');
clickEvent.initEvent (eventType, true, true);
node.dispatchEvent (clickEvent);
}, 4000);

as well as

waitForKeyElements ("#submit", clickSaveButton);

setTimeout(function clickSaveButton (jNode) {
triggerMouseEvent (jNode[0], "mouseover");
triggerMouseEvent (jNode[0], "mousedown");
triggerMouseEvent (jNode[0], "click");
triggerMouseEvent (jNode[0], "mouseup");
}, 4000);

setTimeout(function triggerMouseEvent (node, eventType) {
var clickEvent = document.createEvent('MouseEvents');
clickEvent.initEvent (eventType, true, true);
node.dispatchEvent (clickEvent);
}, 4000);

but it doesn't work for me. Unfortunately, i cannot give you the URL, because one must register on that site and it takes two weeks before the account will be activated, so it's not really an option. The problem is, that I am not a programmer, I've just learned some very basics in order to automate my tasks. I know a bit of javascript, bash and ruby, but I must apparently take some "recipes" and modify them. But now things start getting harder and I can't solve my problem.

What has really worked (SOLUTION):

setTimeout(function() {
var link = document.querySelector('#submit');
if(link) {
    link.click();
}
}, 3000);

The AJAX button appears 1-2 seconds after the page has been loaded, so the timeout is needed.

Answer 1

I wonder if the code below is what you want.

var link = document.querySelector('#submit');
if(link) {
    link.click();
}

If the code above does not work, try adding a timeout, e.g.

setTimeout(function() {
    var link = document.querySelector('#submit');
    if(link) {
        link.click();
    }
//1-second delay
}, 1000);

You'd better provide a link to one of the pages on which your script runs, so that I can make sure the script will work as expected.