Cannot click hidden button by JavaScript

Question

function openEditDialog(){
    window.showModalDialog('/atmew/pages/asset/searchInclude/assetEdit.mew');
    document.getElementById('reData').click();
    alert('after rerender');
}

then there is a button:

<a4j:commandLink id="edit" action="#{searchController.openAssetEdit}" 
    oncomplete="openEditDialog()" immediate="true" ajaxSingle="true">
    <h:graphicImage url="/images/edit_icon.png" </h:graphicImage>
    <f:param name="arId" id="arId" value="#{vo.assetReceiving.id}"/>
</a4j:commandLink>

The Other button

<a4j:commandButton id="reData" reRender="data_grid" style="visibility: hidden;" onclick="javascript:alert('rerender clicked');"></a4j:commandButton>

the reData button does not get clicked. The console of IE does not show any message. How is this caused and how can I solve it?

Your other button doesn't need the javascript: part inside its onclick attribute that's only when the javascript is inside a href attribute. — GillesC, Apr 25 '12 at 14:33
@user1090190: the particular button will re-render (reload) a specific portion in the HTML structure identified by `data_grid` by ajax. — BalusC, Apr 25 '12 at 14:43
@BalusC Interesting. Is there a less hacky way to interface to it, or are you forced to use `click`? — Snuffleupagus, Apr 25 '12 at 14:51
@user1090190: Depends on OP's concrete functional requirement which is nowhere stated in the question. — BalusC, Apr 25 '12 at 14:55
@BalusC sure, only asking out of curiosity. I've never worked with jsf before. — Snuffleupagus, Apr 25 '12 at 15:01

BalusC · Answer 1 · 2012-04-25T14:45:37.303

3

You need to use the JSF-generated HTML element ID, not the JSF component ID.

Open the page in browser, rightclick and View Source and locate the JSF-generated HTML <input type="submit"> element of the <a4j:commandButton> in the HTML source. It'll look like this:

<input type="submit" id="someFormId:reData" ... />

You need to use exactly that ID in JavaScript, simply because JavaScript works on the HTML DOM tree, not on the JSF component tree.

document.getElementById('someFormId:reData').click();

Further you'd better be using <a4j:commandLink> instead of <a4j:commandButton> in order to get click() to work.

edited Apr 25 '12 at 14:45

answered Apr 25 '12 at 14:34

BalusC

1,082,665
372
3,610
3,555

Thanks @BalusC. I must be tired & out of brains to have used jsp ID. No more comments for a question that got 2 -ve ratings. :( – Viola Apr 26 '12 at 06:02
I thought I my approach was wrong, but its working after ID correction. Thanks again :) – Viola Apr 26 '12 at 06:34

score 2 · Answer 2 · edited May 23 '17 at 12:03

Is it possible to call the onclick via document.getElementById("my-id").click()? At least doing this in Chrome shows me the error "has no method 'click'". Or this possible when using jsf? (EDIT: sorry, might be a stupid question, but I never used jsf)

I think the only reliable way to artificially create a click event on a native node is to do that via browser mechanisms:

function doEvent(element, eventType, event) {
  // modern browsers
  if (document.createEvent) {
    event = document.createEvent("MouseEvents");
    event.initMouseEvent(eventType, true, true, element.ownerDocument.defaultView,
                0, 0, 0, 0, 0, false, false, false, false, 0, null);
    element.dispatchEvent(event);

  // older browsers (IE6/7 for exmaple)
  } else if (element.fireEvent) {
    element.fireEvent("on"+eventType);
  }
}

doEvent(document.getElementById("my-id"), "click");

regarding the ID consider the answer of BalusC

Cannot click hidden button by JavaScript

2 Answers2

Linked