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

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>

Answer 1

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.