How to link js pages in Titanium?

Question

I'm a beginner coder whose trying to link my js pages together such that when I click on a button it will open up the window of the other js file. However I keep getting the following error message:

"Message: Uncaught TypeError: object is not a function [ERROR] : TiExceptionHandler: (main) [0,654] - Source: new Window().open();"

whenever I run my application.

Code for my app.js file:

var NavigationController = require('NavigationController').NavigationController,
ApplicationWindow = require('ui/handheld/android/ApplicationWindow').ApplicationWindow;


//create NavigationController which will drive our simple application
var controller = new NavigationController();

//open initial window
controller.open(new ApplicationWindow(this.controller));

Code for my main/home window: (in ApplicationWindow.js)

//Application Window Component Constructor
exports.ApplicationWindow = function(navController) {
//----------------Main Page-------------------------
var winMainPage = Titanium.UI.createWindow({  
title:'Radio',
backgroundColor: 'transparent',
});
.
.
.
//open second window
var CategoryButton = Titanium.UI.createButton({
bottom: 20,
left: 50,
width: 60,
height: 60,
backgroundImage: '/images/category.png',
backgroundSelectedImage:'/images/category.gif',
backgroundDisabledImage: '/images/categoryoff.gif',
backgroundColor: 'transparent'
});

//Action listener
CategoryButton.addEventListener('click', function() {
navController.open(new PlayMusic(navController));

});



//to exit app by clicking return button
winMainPage.addEventListener('androidback', function(e){
var confirmClear = Titanium.UI.createAlertDialog({


    message:'Exit App?', 
    buttonNames: ['Yes','No']
});
confirmClear.show();
confirmClear.addEventListener('click',function(e) {
    if (e.index === 0) {

     winMainPage.close();


       }
   });
   winMainPage.open();
 });

return winMainPage;

}

Code in second window: (in PlayMusic.js)

exports.PlayMusic = function(navController){
var self = Ti.UI.createWindow({
    backgroundColor:'#ffffff',
    navBarHidden:true,
    exitOnClose:true
  });
  .
  .
  .
  return self;
 }

The Navigation controller window: (NavigationController.js)

exports.NavigationController = function() {
this.windowStack = [];
};

exports.NavigationController.prototype.open = function(/*Ti.UI.Window*/windowToOpen) {
//add the window to the stack of windows managed by the controller
this.windowStack.push(windowToOpen);

//grab a copy of the current nav controller for use in the callback
var that = this;
windowToOpen.addEventListener('close', function() {
    that.windowStack.pop();
});

 //hack - setting this property ensures the window is "heavyweight" (associated with an        Android activity)
windowToOpen.navBarHidden = windowToOpen.navBarHidden || false;

  //This is the first window
  if(this.windowStack.length === 1) {
    if(Ti.Platform.osname === 'android') {
        windowToOpen.exitOnClose = true;
        windowToOpen.open();
    } else {
        this.navGroup = Ti.UI.iPhone.createNavigationGroup({
            window : windowToOpen
        });
        var containerWindow = Ti.UI.createWindow();
        containerWindow.add(this.navGroup);
        containerWindow.open();
    }
   }
  //All subsequent windows
   else {
    if(Ti.Platform.osname === 'android') {
        windowToOpen.open();
    } else {
        this.navGroup.open(windowToOpen);
      }
   }
  };

  //go back to the initial window of the NavigationController
  exports.NavigationController.prototype.home = function() {
 //store a copy of all the current windows on the stack
   var windows = this.windowStack.concat([]);
  for(var i = 1, l = windows.length; i < l; i++) {
    (this.navGroup) ? this.navGroup.close(windows[i]) : windows[i].close();
  }
  this.windowStack = [this.windowStack[0]]; //reset stack
 };

Sorry if the way I present my question is unclear. Can anyone please tell me where I've gone wrong? Thanks in advance :)

That's lot of code, which is a little messy. Could you post whole traceback with your error. Also it looks like you are trying to create some MVC framework on top of Titanium SDK. Why don't you try using Alloy? — daniula

Adam Magaña Adam Magaña · Accepted Answer · 2014-07-06T16:18:19

Pay close attention to your error message:

Message: Uncaught TypeError: object is not a function [ERROR] : TiExceptionHandler: (main) [0,654] - Source: new Window().open();

It looks like you you might be defining Window as an object somewhere and not as a function. Your shared code does not currently show the declaration of Window, however, based on your error message I would say that checking its type is a good place to start debugging. If you could post the declaration of Window it would be much easier to help you :)

How to link js pages in Titanium?

1 Answers