Forums

Home » Alloy UI » English

Combination View Flat View Tree View
Threads [ Previous | Next ]
toggle
Katharina Bächle
aui-tabview prevent navigating away from tab with unsaved changes
December 20, 2012 1:41 AM
Answer

Katharina Bächle

Rank: New Member

Posts: 2

Join Date: December 20, 2012

Recent Posts

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

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


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


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
RE: aui-tabview prevent navigating away from tab with unsaved changes
January 7, 2013 6:34 AM
Answer

Katharina Bächle

Rank: New Member

Posts: 2

Join Date: December 20, 2012

Recent Posts

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

 1
 2var goON = true;
 3tabView.on('activeTabChange', function(event) {
 4    if (unsavedChanges) {
 5       goON = confirm(msgLeavePage);
 6        if(goON == false){
 7        event.preventDefault();
 8        }
 9});