Question

I’m using JSF 1.2 and RichFaces 3.3.3. I work on pages designed using Twitter Bootstrap. I need to process an action on an order like that:

1. user clicks on an action button on page,
2. a modal dialog opens and ask to user to confirm the action (if the user cancel the action, process ends here of course),
3. in case of its confirmation, the content of the dialog changes from the confirmation text to some other content to follow the action processing (in some cases displaying a progress bar for example, here in the code simply a wait text),
4. when the action is completed, the dialog disappears.

So i need to make two things in the same time, alternate the dialog content and launch an action in the page bean. Today, i’m able to make the dialog content to change but action to launch in my bean is not processed…
To do that, i’m using a flag in my bean to toggle dialog content, modified by an a4j:support onclick (executed before action called normally) inside an a4j:commandButton executing an action.

<a4j:commandButton 
    type="button"
    value="#{common.COMMON_Confirm}"
    styleClass="btn btn-danger"
    action="#{orderDetailBean.cancelOrder}"
    oncomplete="showCancelOrderModal(false);">
    <a4j:support 
        event="onclick" 
        actionListener="#{orderDetailBean.startProcessingMainAction}"
        reRender="cancelOrderForm" />
</a4j:commandButton>

Perhaps this approach is erroneous…
I successfully make that work just once! Now i spent many time to make it work again and some help should be great. Note, i learn JSF and RichFaces by myself since few weeks.

Now, the code.

Below some code of my web page, first the button to launch the process (open the dialog through the javascript function), then the Twitter Bootstrap dialog itself.

<!-- Main action button -->
<h:form>
    <a4j:commandButton 
        id="cancelOrder"
        styleClass="btn btn-danger btn-large"
        style="width: 100%; margin-bottom: 7px;"
        value="#{app.ACTION_OrderCancel}"
        oncomplete="showCancelOrderModal(true);"
        reRender="cancelOrderForm" />
</h:form>

<script type="text/javascript">
    function showCancelOrderModal(visible) {
        jQuery( function($) {
            $('#cancelOrderModal').modal(visible ? 'show' : 'hide');
        });
    }
</script>

<!-- Cancel order modal -->
<div class="modal modal-narrow modal-small hide fade" id="cancelOrderModal">
    <div class="modal-header">
        <h3>
            <h:outputText value="#{app.MODAL_CancelOrderTitle}" />
        </h3>
    </div>
    <a4j:form id="cancelOrderForm">
        <a4j:outputPanel 
            id="cancelOrderConfirm"
            rendered="#{!orderDetailBean.processingAction}">
            <div class="modal-body">
                <p>
                    <h:outputText value="#{app.MODAL_CancelOrderConfirm}" />
                </p>
            </div>
            <div class="modal-footer">
                <a href="#" 
                    class="btn btn-primary" 
                    data-dismiss="modal">
                    #{common.COMMON_Cancel}
                </a>
                <a4j:commandButton 
                    type="button"
                    value="#{common.COMMON_Confirm}"
                    styleClass="btn btn-danger"
                    action="#{orderDetailBean.cancelOrder}"
                    oncomplete="showCancelOrderModal(false);">
                    <a4j:support 
                        event="onclick" 
                        actionListener="#{orderDetailBean.startProcessingMainAction}"
                        reRender="cancelOrderForm" />
                </a4j:commandButton>
            </div>
        </a4j:outputPanel>
        <a4j:outputPanel 
            id="cancelOrderWait"
            rendered="#{orderDetailBean.processingAction}">
            <div class="modal-body">
                <h:outputText value="#{app.MODAL_CancelWait}" />
            </div>
        </a4j:outputPanel>
        <a4j:poll 
            id="cancelOrderPoll"
            interval="1000"
            enabled="#{orderDetailBean.processingAction}"
            reRender="cancelOrderPoll, cancelOrderWait" />
    </a4j:form>
</div>

And code in my bean

private boolean processingAction;

public void startProcessingMainAction(ActionEvent event) {
    logger.debug("Set processing order main action to TRUE");
    processingAction = true;
}

public String cancelOrder() {
    logger.debug("Start to cancel order with id " + order.getId());
    try {
        processingAction = true;
        cancelProductionOrder(order.getId());
    }
    catch (Exception e) {
        logger.error("Unable to cancel production order" + order.getId(), e);
        addErrorMessage("An error occured cancelling order: " + e.getMessage(), null);
        return "error";
    }
    finally {
        processingAction = false;
    }
    return "";
}

So, what happens at execution?

Dialog is opening, after user confirmation the dialog content alternates (so a4j:support works well), but because a4j:commandButton action is not called, its oncomplete is executed instantly and my dialog disappears.

I hope you’ll can help me, it is an important part of my UI and deadline is at the end of the week ^_^

---

Update I observe a random behavior. Rarely (2 times for now) but sometimes, all works fine and at 99% commandButton’s action is not called :/

Answer 1

You’re re-rendering the entire form when the <a4j:support> action completes. This way the HTML DOM tree of the form will be trashed and replaced with the one from the ajax response. This would be happening at almost the same time as that the default action of <a4j:commandButton> needs to be executed. There’s means of a race condition here. If it happens before that the default action will be executed, then it will never be executed as the source has completely disappeared.

The concrete functional requirement is not entirely clear as the startProcessingMainAction() makes no sense in the given example, it seems to be totally superfluous. But I think that you can solve it by moving the reRender attribute from the <a4j:support> to the <a4j:commandButton>, so that it’s only re-rendered when the default action completes. Or even better, just remove that <a4j:support> altogether, you don’t seem to need it at all.