Stopping a tab change for an Accordian

[mattharr]

I'm using PrimeFaces 3.4.1, and what I'm looking to do is when a user clicks to open a new tab on the Accordian, do some validation in the backend, and then either allow the change, or send them back to the original tab. The onTabChange event seems to get quite close - but can I cancel the event in some way? or just reset the activeIndex?

I tried having the activeIndex as a dynamic property, and then setting it in onTabChange - but it seems like the tab clicked on expands anyway, never mind what I've set it to.

Any thoughts on if this is feasible, and if so how would be greatly appreciated.

Thanks,

Matt

[mattharr]

If anyone's interested I think I have a way forward, using this snippet

Code: Select all

<script type="text/javascript">
	$("h3.ui-accordion-header")
		.off('click')
		.on(
			'click',
			function() {
				 newSelectedIndex = $(
					'h3.ui-accordion-header')
					.index(this);
				confirmation.show()
			});
</script>
<p:confirmDialog id="confirmDialog"
		message="Are you sure about destroying the world?"
		header="Initiating destroy process" severity="alert"
		widgetVar="confirmation">

		<p:commandButton id="confirm" value="Yes Sure" 
			oncomplete="confirmation.hide();accordian.select(newSelectedIndex);" />
		<p:commandButton id="decline" value="Not Yet"
			onclick="confirmation.hide();" type="button" />

</p:confirmDialog>

basically to put in the check before allowing the expand etc to happen. So far looks ok - but as you can see I'm just pulling it together from the samples. If anyone can foresee a problem please let me know, otherwise I hope this is of use to someone if they need to do something similar.

[Montyzoomer]

Hi Matt, that has been very helpful for me, thank you

Code: Select all

<p:accordionPanel widgetVar="accordian" dynamic="true" cache="false">    
    <p:ajax event="tabChange" listener="#{docMan.clearEditMode()}" update="js" />
    ...


 <p:confirmDialog id="confirmDialog" appendTo="@(body)"
    message="Warning: You have not saved your edit"
    header="Document NOT Saved!" severity="alert" widgetVar="confirmation">

    <p:commandButton id="confirm" value="Continue and loose changes" 
        oncomplete="PF('confirmation').hide();PF('accordian').select(newSelectedIndex);" />
    <p:commandButton id="decline" value="Return to form"
        onclick="PF('confirmation').hide();" type="button" />

</p:confirmDialog>

<p:fragment id="js">
    <script type="text/javascript">
        $("h3.ui-accordion-header")
            .off('click')
            .on('click',
                function () {
                    newSelectedIndex = $(
                    'h3.ui-accordion-header')
                    .index(this);
                     if (#{docMan.docEditMode} == true) {
                         PF('confirmation').show()
                     } else {
                         PF('accordian').select(newSelectedIndex);
                     }

                });
    </script>
</p:fragment>

[cagatay.civici]

Returning false at onTabChange callback should also do it.