Add keyListener to simulate a mouse click on a link, page is made with Javax jspx servlets. getElementById returns null

Question

I´m trying to add hotkeys to the web application we use at work. The solution was to apply a Greasemonkey script, but the web system uses Liferay Portal, which is made with JavaX and jspx server applets.

I DON´T KNOW HOW TO APPLY "WAITFORKEYELEMENTS" answer, my knowledge is not that advanced.

What is the problem? I need to search the label for a link, i.e. “case file history” , add a keylistener event and simulate a mouse click. Here´s an example link:

<a id="form1:commandLink1211" name="form1:commandLink1211" 
onclick="submitForm('form1',1,{source:'form1:commandLink1211'});
return false;" 
class="linkMenu" href="#">
Look case file history
</a>

I need it to simulate a mouse click into this link, but the getElementById returns null. The page loads “empty” and then loads the jspx module. I know greasemonkey puts the script first. I tried to use

window.onload=funcion
document.ready() //didn´t know how to add this to my code

Other solutions include using a timer, but I don´t know how to apply it.

Current greasemonkey script:

(function(){
document.addEventListener('keydown', function(e) {
// pressed alt+g
if (e.keyCode == 71 && !e.shiftKey && !e.ctrlKey && e.altKey && !e.metaKey)
{
console.log ("key pressed");
document.getElementById('form1:commandLink1211').click();
}
}, false);
})();

@Brock Adams: I really don´t know how to apply your solution, I´m pretty confused right now. — Martincho, Dec 10 '18 at 20:41

Pinke Helga · Answer 1 · 2018-12-16T14:03:27.580

The default behaviour of GreaseMonkey and similar alternatives is to run userscripts after the DOM (document-object-model) has been loaded, i.e. as soon the HTML has been parsed but before included resources have finished to load.

Some Scripts need to do stuff before the DOM has loaded. To achieve this they use the meta block entry @run-atdocument-start. This gives you the chance to intercept anything the site is doing while loading. However, with this entry your scripts do not know anything about the document when they start running. (Note the limited support in GM 4.0)

If you do not need to do stuff before the site has been loaded, use the meta entry @run-at document-end or omit this entry at all.

The more accurate approach is to implement an event listener. Modern browsers support the DOMContentLoaded event, formerly known as "domready" event in some JS-frameworks.

document.addEventListener('DOMContentLoaded', evt =>
{
  // Do DOM-based stuff here...
  document.addEventListener('keydown', evt =>
  {
    document.getElementById('form1:commandLink1211').click();
  });
});

Using JQuery the shorthand $(evt => {/* DOM ready stuff */} ); will also work.

score 0 · Answer 2 · answered Dec 10 '18 at 19:11

0

The element was not loaded yet when the Javascript ran, so the element with the given id was not found. Try to wrap a function around your code:

function loaded(){
document.addEventListener('keydown', function(e) {
// pressed alt+g
if (e.keyCode == 71 && !e.shiftKey && !e.ctrlKey && e.altKey && !e.metaKey)
{
console.log ("key pressed");
document.getElementById('form1:commandLink1211').click();
}
}, false);
}

and make sure you have

onload="loaded()"

in the body tag.

answered Dec 10 '18 at 19:11

Lajos Arpad

64,414
37
100
175

Remember: I´m using Greasemonkey. I don´t know how to apply this. You mean I must add onload="loaded()" on the body tag with greasemonkey? (something I also do not know how to do) – Martincho Dec 10 '18 at 19:58
@Martincho Is Greasemonkey in a js file? – Lajos Arpad Dec 10 '18 at 19:59
I don´t know that much about Greasemonkey. I know it stores the scripts somewhere in profile data, on Firefox. – Martincho Dec 10 '18 at 20:04
@Martincho how did you see the current script? – Lajos Arpad Dec 10 '18 at 20:05
I got that script from another question on this site. Now someone put "ajax driven site" etc answer on top, but that is for an specific class, my element is "linkmenu". – Martincho Dec 10 '18 at 20:23
@Martincho can you change the source-code of that file? – Lajos Arpad Dec 10 '18 at 20:27
Of course, but I really don´t know how to apply that "waitforkeyelements" function – Martincho Dec 10 '18 at 20:36

score 0 · Answer 3 · answered Dec 10 '18 at 19:15

0

Instead of document.getElementById('form1:commandLink1211').click(); can yo instead do submitForm('form1',1,{source:'form1:commandLink1211'});. It should do the same thing, right?

answered Dec 10 '18 at 19:15

Justin

1,356
2
9
16

Yes, but the form must be loaded first, which is the issue. Even so, I´m taking notes, thanks! – Martincho Dec 10 '18 at 19:56

Add keyListener to simulate a mouse click on a link, page is made with Javax jspx servlets. getElementById returns null

3 Answers3