Application level event firing problem

Hi all,

I have a scenario like this. I am having a two tab application. I have three .js files named as first.js, second.js and third.js each opening a new window.

On first.js there is a button , when clicked opens second.js. On second.js there is a text field and a save button. After entering the name in the text field , the user clicks on the save button. On click of the save button i am storing the name in the database called abcdef in a table test , then firing an application level event then closing this page..

I am firing application level event because i want to view those saved names in the table view on tab one which is associated with first.js

I want the same behavoiur with tab 2 which is associated with third.js.

But my problem is if i enter the name then click save button, then the name gets displayed in the table view on tab 1 , but doesnt comes on tab 2 . But the name comes the second time when i enter the second name and then click on tab 2,.

What should i do to view the name in the first time when i click on the tab 2 . What changes i have to make in my file third.js.

app.js

var tabGroup = Titanium.UI.createTabGroup();
 
var db = Titanium.Database.open('abcdef');
 
    db.execute('DROP TABLE IF EXISTS test');
    db.close();
var win1 = Titanium.UI.createWindow({  
    title:'Tab 1',
    backgroundColor:'#fff',
    url:'first.js'
});
 
var tab1 = Titanium.UI.createTab({  
    icon:'KS_nav_views.png',
    title:'abcd',
    window:win1
});
 
var win2 = Titanium.UI.createWindow({  
    url:'third.js',
    backgroundColor:'#fff'
});
var tab2 = Titanium.UI.createTab({  
    icon:'KS_nav_ui.png',
    window:win2
});
tabGroup.addTab(tab1);  
tabGroup.addTab(tab2);  
 
 
// open tab group
tabGroup.open();

first.js

var win=Titanium.UI.currentWindow;
 
var button=Ti.UI.createButton({
    title:'click',
    top:290,
    height:50,
    width:100
});
win.add(button);
 
button.addEventListener('click',function(){
    var win2 = Titanium.UI.createWindow({  
   url:'second.js',
    backgroundColor:'#fff'
});
win2.open();
});
 
 
Titanium.App.addEventListener('app:clicked',function(){
    var db = Titanium.Database.open('abcdef');
    var data=[];
    var rows = db.execute('SELECT * FROM test');
 
    while (rows.isValidRow()) {
        var custom_row = Ti.UI.createTableViewRow();
 
        var label = Ti.UI.createLabel({
        text: rows.fieldByName('name'),
        font:{fontWeight:'bold',fontSize:14},
        left:60,
        color:'white',
        height:30,
        width:150
        });
 
        custom_row.add(label);
 
        data.push(custom_row);
 
    rows.next();
    }
 
    rows.close();
    var tableView=Titanium.UI.createTableView({
        data:data,
        height:250,
        top:45,
        backgroundColor:'#454545',
        allowsSelection:false
 
    })
    tableView.footerView = Ti.UI.createView({width: 0, height: 0});
 
     db.close('abcdef');
 
    win.add(tableView);
    });

second.js

var win=Titanium.UI.currentWindow;
 
var label = Ti.UI.createLabel({
        height:30,
        top:190,
        color:'#606060',
        text: "NAME",
        font:{fontWeight:'bold',fontSize:12},
        left:25
        });
 
    win.add(label);
 
var name_textfield = Titanium.UI.createTextField({
    //hintText:'Hint text',
    height:28,
    top:190,
    width:210,
    left:80,
    font:{fontSize:14,fontWeight:'bold'},
    color:'white',
    paddingLeft:10,
    borderRadius:8,
    backgroundGradient:{type:'linear',
    colors:['#101010','#555555'],
    startPoint:{x:0,y:0},
    endPoint:{x:2,y:60},
    backFillStart:false},
    enabled:true,
    //autocapitalization:false
    });
 
    win.add(name_textfield);
 
var save_button = Titanium.UI.createButton({
        title:'SAVE',
        top:260,
        left:130,
        height:42,
        width:80
    });
    win.add(save_button);
 
save_button.addEventListener('click',function(){
        var db=Titanium.Database.open('abcdef');
        db.execute('CREATE TABLE IF NOT EXISTS test (name TEXT)');
        db.execute('INSERT INTO test (name) VALUES(?)',name_textfield.value);
        //db.execute('INSERT INTO attendees (attendee_image) VALUES(?)',attendee_image.image);
 
 
        Titanium.App.fireEvent('app:clicked',{
 
        });
 
        Titanium.App.fireEvent('app:clicked1',{
 
        });
        win.close();
    });

third.js

var win=Titanium.UI.currentWindow;
 
 
Titanium.App.addEventListener('app:clicked1',function(){
 
var db = Titanium.Database.open('abcdef');
    var data=[];
    var rows = db.execute('SELECT * FROM test');
 
    while (rows.isValidRow()) {
        var custom_row = Ti.UI.createTableViewRow();
 
        var label = Ti.UI.createLabel({
        text: rows.fieldByName('name'),
        font:{fontWeight:'bold',fontSize:14},
        left:60,
        color:'white',
        height:30,
        width:150
        });
 
        custom_row.add(label);
 
        data.push(custom_row);
 
    rows.next();
    }
 
    rows.close();
    var tableView=Titanium.UI.createTableView({
        data:data,
        height:250,
        top:45,
        backgroundColor:'#454545',
        allowsSelection:false
 
    })
    tableView.footerView = Ti.UI.createView({width: 0, height: 0});
 
     db.close('abcdef');
 
    win.add(tableView);
});

I think that this is due to win2 is not drawn until you open it at least one time. If you run the app, go to tab2, return to tab1 and click the button, does it work?

You could force win2 initialization, but I suggest you to capture tab changes and refresh the window when the user clicks tab2. This way, you only refresh the window onlye when the user need it, and not every time data is changed.

You can capture tabgroup changes with this piece of code:

tabGroup.addEventListener('focus', function(e){
                Ti.API.info('tab click ' + e.source.activeTab.index);
                if(e.source.activeTab.index === 1){
                    //refresh data in win2
                }               
        });

Use the window level events to refresh your data.

So on focus you can refresh your content.

Generally you could also move to a single context using a nav controller and that would also help.

A window wont be created untill it has focus so the reason why you get these problems is because you havent taken into account different actions that occur.

Generally it is a good practive to have your events trigger functions so that multiple listeners can fire the same function.

Hope that makes sense.