How to load another js file on a button click in t

Question

I have App.js

(function() {       
    Window = require('ui/tablet/ApplicationWindow');

    }
    new Window().open();
    })();

From there ApplicationWindow.js is loaded.
In ApplicationWindow.js

function ApplicationWindow() {
    //load component dependencies
    var FirstView = require('ui/common/FirstView');

    //create component instance
    var self = Ti.UI.createWindow({
        backgroundColor:'#ffffff'
    });
    var win2 = Titanium.UI.createWindow({
    backgroundColor: 'red',
    title: 'Red Window'
    }); 

    //construct UI
    var firstView = new FirstView();
    var nav = Titanium.UI.iPhone.createNavigationGroup({
    window: win2
    });
    win2.add(firstView);
    self.add(nav);
    self.open();
    //self.add(firstView);
    if (Ti.Platform.osname === 'ipad') {
        self.orientationModes = [Ti.UI.LANDSCAPE_LEFT] ;
    };
    return self;
}

//make constructor function the public component interface
module.exports = ApplicationWindow;

I get a view with 2 textfields and a button login in FirstView.js.The view has a navigation bar with title Red Window. I want to load Home.js on loginButton Click. Here is the loginButtonClick Code :

  loginButton.addEventListener ('click', function(e){
          //navigate to Home.js
      }); 

How can I do that.Can anyone please help me out.

Answer 1

Try the following method in your current file

loginButton.addEventListener('click', function(e){
    var win = Ti.UI.createWindow({
        backgroundColor : 'white',
        url             : 'home.js' //Path to your js file
    });
    win.open();
});

home.js

var myWin = Ti.UI.currentWindow;
//You can add your controls here and do your stuff.
// Note that never try to open myWin in this page since you've already opened this window

You can also try the following method

Method 2

//In your current page
loginbutton.addEventListener('click', function(e) {
    var Home = require('/ui/common/Home');
    var homePage = new Home();
    homePage.open();
});

Your Home.js file

function Home() {
    var self = Ti.UI.createWindow({
        layout : 'vertical',
        backgroundColor:'white'
    });
    //Do your stuff here
    //Add other controls here

    return self;
}
module.exports = Home;

Look at this answer, it's also same as your question