h:commandButton action in ui:fragment sometimes not doing action

Question

Using JSF 2.1

We have a form that encapsulates blocks of search results. Each block has a "Delete" button that talks to the View scoped backing and removes the block (from a Session scoped bean).

Visually something like this:

  -- group
    -- block (delete button)
      -- search result
    -- block 
      -- search result
    ...

When the last block is deleted the entire group disappears.

Anyways. The follow implementation of a delete works fine:

<h:commandButton 
  styleClass="delete"
  action="#{backing.taBortFranTrafflista(sokning)}"
  value="#{backing.getText('trafflista.taBort')}"
  onclick="return confirm('#{backing.getText('FR100', sokning.sokbegrepp, backing.aktuelltAntalTraffar(sokning))}');"
  rendered="#{backing.javascriptEnabled}"
  disabled="#{commons.trafflistaLast}">
    <f:ajax render="@form" />
</h:commandButton>

However, the following implementation with a confirmation do in JQuery works but NOT with the last search result whereby the action (assigned to the h:commandButton) is never called:

<ui:fragment rendered="#{backing.javascriptEnabled}">
  <div id="dialog#{sokning.hashCode()}" title="Ta bort" class="dialog">
    <p>#{backing.getText('FR100', sokning.sokbegrepp, backing.aktuelltAntalTraffar(sokning))}</p>
    <h:commandButton 
      styleClass="delete dialog-button"
      action="#{backing.taBortFranTrafflista(sokning)}"
      value="#{backing.getText('trafflista.taBort')}"   
      onclick="closeDialog('dialog#{sokning.hashCode()}')"              
      disabled="#{commons.trafflistaLast}">
      <f:ajax render="@form" onerror="ajaxError"/>
    </h:commandButton>
    <input 
       type="submit" 
       data="dialog#{sokning.hashCode()}" 
       class="closeDialog dialog-button" 
       value="#{backing.getText('trafflista.avbryt')}" />
  </div>
  <ui:fragment rendered="#{not commons.trafflistaLast}">
    <input 
       type="submit" 
       data="dialog#{sokning.hashCode()}" 
       class="delete showDialog" 
       value="#{backing.getText('trafflista.taBort')}" />
  </ui:fragment>
  <ui:fragment rendered="#{commons.trafflistaLast}">
    <input 
       type="submit" 
       class="delete showDialog" 
       value="#{backing.getText('trafflista.taBort')}" 
       disabled="disabled"/>
  </ui:fragment>
</ui:fragment>

Side note, the problem (with the ui:fragment implementation) does not happen when there is only one search result block in a group. Weird. — Matthew Campbell
Some strange thing I see in your given code that don't like very much. First #{backing.getText('trafflista.taBort')}. Well, getters are getters in java, and are used for properties. They have no argument. So you should rename that method to something like textForArg(String arg). Second thing, is your button supposed to cause ajax or whole-submit behaviour? h:commandButton is designed to behave as non-ajax when action specified. However, you're making kind of mix of both of them. Have a look at the docs about the tag: docs.oracle.com/javaee/6/tutorial/doc/gkace.html — Xtreme Biker
get/set syntax noted. Read the documentation about the listener attribute in the f:ajax rather than in the h:commandButton action. Has no effect, both cases a partial/ajax request. — Matthew Campbell
putting a ui:fragment around the h:commandButton in the working implementation and moving the rendered attribute to the fragment yields a working result. — Matthew Campbell
Problem does not arise if the blocks are removed from last to first. — Matthew Campbell

Matthew Campbell Matthew Campbell · Accepted Answer · 2014-06-23T08:16:24

Reason faces-redirect=true works is that DOM components inside the form match up with the server representation. The JQuery dialog was rendered outside the form at the bottom of the page. Doing a render equal @all solved the problem. Another solution was to render the dialog inside the form.

h:commandButton action in ui:fragment sometimes not doing action

1 Answers