Mocking button clicks with IBM JSF's Ajax support

Filed under: JSR168 Portals, Javascript — lars @ 01:52:45 pm

I'm on a project right now where we use IBM's JSF framework (bundled with RAD 7.0.0.1), along with its hx:ajaxRefreshSubmit tag. One problem we found was that commandButtons that have an AJAX behaviour assigned to them do not submit their value with the rest of the form. As a result the JSF framework doesn't realise the button this button is clicked and the action associated with that button is not executed.

We get around this with a nasty Javascript kludge - having a hidden input on the page that, using a bit of javascript, we hack to set the id, name and value of the clicked button. This causes it's value to be submitted in the POST request, which JSF picks up and then executes the button's action.

The gotcha is that after the ajax panel-refresh, some browsers (ie firefox) will hang onto the new id for the hidden 'mock button' input. One solution is to ensure that such hidden inputs are always *inside* the panel being refreshed, so they are reloaded (and hence their id reinitialised) each time it is used.

<script language="javascript">
function doButtonClick(oButtonToClick, mockButtonInputId) {
var mockButtonInput = document.getElementById(oButtonToClick.form.id + ":" + mockButtonInputId);
mockButtonInput.name = oButtonToClick.id;
mockButtonInput.id = oButtonToClick.id;
mockButtonInput.value = oButtonToClick.value;
}
</script>

<h:panelGroup id="ajaxRefreshTarget">
<h:inputHidden id="mockButtonInput />
... Some content to be updated ...
<hx:commandExButton value="My Button" action="#{pc_BackingBean.doSomeAction}">
<hx:behavior id="buttonAjaxBehaviour" event="onclick" behaviorAction="get;stop"
rgetAction="ajaxRefreshTarget" onActionFunction="doButtonClick(this, 'mockButtonInput')"/>
</hx:commandExButton>
</h:panelGroup>
<hx:ajaxRefreshSubmit id="myAjaxRefresh" target="ajaxRefreshTarget"/>

I hope anyone out there that is unfortunate enough to be using IBM's slightly klunky and flaky JSF implementation may find this tidbit useful!

Comments

  • Moloy
    I couldn't implement AJAX with JSF at all for over a week. Your post came as a "blessing" to me. I was giving up on implementing AJAX in websphere 7.0 environment as I couldn't move forward a bit with "hx:ajaxRefreshSubmit" tag ( I have to save data from checkbox click). Traditional "Ajax way" doesn't work with IBM JSF either. Keep up your good post.
    Whoever you are ,,,
    Thank you mate.

    Comment by Moloy [Visitor] — 12/07/10 @ 14:33

Leave a comment

Allowed XHTML tags: <p, ul, ol, li, dl, dt, dd, address, blockquote, ins, del, span, bdo, br, em, strong, dfn, code, samp, kdb, var, cite, abbr, acronym, q, sub, sup, tt, i, b, big, small>


Options:
(Line breaks become <br />)
(Set cookies for name, email & url)




powered by  b2evolution