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

then there is a button:

<a4j:mandLink id="edit" action="#{searchController.openAssetEdit}" 
    onplete="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:mandLink>

The Other button

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

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?

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

then there is a button:

<a4j:mandLink id="edit" action="#{searchController.openAssetEdit}" 
    onplete="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:mandLink>

The Other button

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

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?

• javascript
• jsf
• richfaces
• ajax4jsf
• jsf-1.2

• 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 Commented Apr 25, 2012 at 14:33
• what do you mean is it ok? what is the question? – Jakub Commented Apr 25, 2012 at 14:33
• why are you trying to click a hidden element? o-o – Snuffleupagus Commented Apr 25, 2012 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 Commented Apr 25, 2012 at 14:43
• @BalusC Interesting. Is there a less hacky way to interface to it, or are you forced to use click? – Snuffleupagus Commented Apr 25, 2012 at 14:51

2 Answers 2

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

Open the page in browser, rightclick and View Source and locate the JSF-generated HTML <input type="submit"> element of the <a4j:mandButton> 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 ponent tree.

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

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

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