How to prevent Accordion Panel from collapsing when I use button added to header?

Question

I have problem with Accordion Panel. I have Accordion similar to this:

<p:accordionPanel>
    <p:tab title="tabTitle">
        <f:facet name="title">
            <!-- problematic button -->
            <p:commandButton value="button"/>
        </f:facet>
        <h:PanelGrid>
            <p>Accordion content</p>
        </h:panelGrdi>
    </p:tab>
</p:accordionPanel>

The problem is - when I click the button, whole Accordion Tab will collapse.

My question is: How to prevent Accordion from collapsing on button click? At the same time I would like Accordion to collapse when I click on header but outside the button.

I'm using PrimeFaces 5.3 and JSF 2.2.11

This is a bit complicated. Problem here is that accordion has a click event binded to it and the button which is inside the accordion, inherits this binding the solution would be trick. I see two options here, 1-you create a layer outside the accordion , place the button on it and programaticaly position it over the accordion. 2- Change the code to not propagate the click event on the button. — Jorge Campos, Feb 13 '17 at 13:34
do you want to make it open even if you click on another element ??? — Yagami Light, Feb 13 '17 at 14:03
@JorgeCampos - do you know maybe how can I achieve the effect of not propagating click event? — Michał Przybylak, Feb 13 '17 at 14:10
@YagamiLight - When I click on the button I **don't** want accordion to open or close. But when I click on accordion header (outside button) I would like accordion to behave regular way — Michał Przybylak, Feb 13 '17 at 14:13
anh how it be behave regular way post an example (image) sure it will help — Yagami Light, Feb 13 '17 at 14:18
As I said you will have to change the code to not propagate the event. See it here: http://stackoverflow.com/questions/387736/how-to-stop-event-propagation-with-inline-onclick-attribute — Jorge Campos, Feb 13 '17 at 14:21
@JorgeCampos - thanks. I used `onclick="event.stopPropagation()"` and now everything is working like I wanted to. Thank you very much — Michał Przybylak, Feb 13 '17 at 15:20
Great to know that you were able to solve your problem. You should add this as an answer it may help others! Don't forget to mark it as the accepted one. — Jorge Campos, Feb 13 '17 at 16:12

score 1 · Accepted Answer · answered Feb 13 '17 at 16:52

As it was suggested by @JorgeCampos - we can use event.stopPropagation() in order to prevent event to "bubble" from button to accordion. Usage for code posted in question will looks like this:

<p:accordionPanel>
    <p:tab title="tabTitle">
        <f:facet name="title">
            <p:commandButton value="button" onclick="event.stopPropagation();"/>
        </f:facet>
        <h:PanelGrid>
            <p>Accordion content</p>
        </h:panelGrdi>
    </p:tab>
</p:accordionPanel>

We can of course use other events to do something else, or use actionListener to call method from ManagedBean, use update. For example

<p:commandButton
    value="button"
    onclick="event.stopPropagation();"
    oncomplete="PF('someDialog').show();" <!-- open dialog by js -->
    actionListener="#{someBean.someMethod}" <!-- call java method -->
    update="someComponent" <!-- update component -->
/>

Stoping event propagation will not interfere

David Florez · Answer 2 · 2017-02-13T14:44:16.987

0

unbind all the events of your headers and then bind them again calling the init method of your component.

<p:accordionPanel widgetVar="myAccordion">
  <p:tab title="tabTitle">
    <f:facet name="title">
        <!-- problematic button -->
        <p:commandButton value="button"
          onclick="PF('myAccordion').jq.find('.ui-accordion-header').unbind()" 
          oncomplete= "PF('myAccordion').init(PF('myAccordion').cfg)"/>
    </f:facet>
    <h:PanelGrid>
        <p>Accordion content</p>
    </h:panelGrdi>
  </p:tab>
</p:accordionPanel>

edited Feb 13 '17 at 14:44

answered Feb 13 '17 at 14:27

David Florez

1,460
2
13
26

Thank you very much for this solution, I've tested it and it works, but I found (according on comments below question post) much simpler solution using `event.stopPropagation()` in `onclick` action – Michał Przybylak Feb 13 '17 at 15:21

How to prevent Accordion Panel from collapsing when I use button added to header?

2 Answers2