aui-tabview prevent navigating away from tab with unsaved changes

[Katharina Bächle, modificado hace 11 años.]

I am new to aui.
In my Portlet I use aui-tabview which works properly. The content of a tab is an iframe. By clicking on a tab the iframe source is set. There is a form inside the iframe.

Problem is that when a user clicks on another tab the changes in the form will be lost. I tried to implement the ‘beforeActiveTabChange’ like described in http://yuilibrary.com/forum/viewtopic.php?f=89&t=4096 .
However this does not work for me the event will never fire, only the ‘onActiveTabChange’ fires but this event comes too late. When I try something like this

AUI().use('aui-tabs', 'substitute', function(A) {
		var tabView = new A.TabView({
					boundingBox : '#${eventsTabName}',
					listNode : '#${events}',
					contentNode: '#${eventsContent}',
				});

…

tabView.on('activeTabChange', function(event) {
	if (unsavedChanges) {
	return confirm('You have unsaved data. Are you sure to leave?');
	}
	return true;
});

The message pops up on tab click, but if the user clicks ‘Cancel’ the clicked Tab is active anyway.
Is there another event to prevent loading next tab, if there are unsaved changes in the form of the iframe?

[Katharina Bächle, modificado hace 11 años.]

I found a solution.
Using the 'activeTabChange' event. Instead of returning something I used 'event.preventDefault' described here AlloyUI - working with elements and events

var goON = true;
tabView.on('activeTabChange', function(event) {
    if (unsavedChanges) {
       goON = confirm(msgLeavePage);
		if(goON == false){
		event.preventDefault();
		}
});