accordion: validation stop flow - move changestart from_toggle to _clickHandler
Hello Jquery/UI developers and users. I'd like to thank you for all the great work as both the core and UI widgets are a pleasure to work with.
While I'm new to using the UI aspects and widgets I encountered an item which many people elsewhere have discussed but I didn't think the work-arounds were appropriate. Many times when using an accordion, the user wants to validate data before the _toggle performs.
I've found by moving the changestart to _clickHandler it's easy to control the state of the toggle. When the changestart function returns true continue with the flow but on false return before any action in _clickHandler is performed.
And from the user application perspective, they can more easily control whether to validate the step when going back, forward, or both. Many times if one step has already been validated and the user is going back to the previously validated step you may not want to run the validation. But when leaving a step and going forward, it's a best practice to validate as data could have changed.
Diff for jquery.ui.accordion.js:
<code>
310,314d309
<
< res = options.changestart(event);
< if(!res && res != undefined)
< return;
<
408c403
< //self._trigger( "changestart", null, self.data );
---
> self._trigger( "changestart", null, self.data );
</code>
End user usage(assumes each section has Step [0-9] for easier detection of phase):
<code>
var ops = {changestart: function(event) {
var current_step = parseInt($('h3.ui-state-active').html().match(/Step [0-9]/)[0].replace('Step ', ''))
var next_step = parseInt(event.currentTarget.innerHTML.match(/Step [0-9]/)[0].replace('Step ', ''))
if(next_step > current_step)
return step_res = step_validator(current_step);
else
return true;
}
<code>