Ways to utilize setActiveTab from a different JavaScript file

I am currently experimenting with a TabGroup feature in my application, but I encountered an issue when trying to utilize the setActiveTab function from a separate JavaScript file.

The problem arises specifically when attempting to click button3 located within the third tab. An error message stating "tabGroup is not defined" is displayed.

The following code snippet is from app.js:

var tabGroup = Titanium.UI.createTabGroup()

var window1 = Titanium.UI.createWindow({
    backgroundColor: 'cyan'
})
var window2 = Titanium.UI.createWindow({
    backgroundColor: 'magenta'
})
var window3 = Titanium.UI.createWindow({
    backgroundColor: 'yellow',
    url: 'thirdTab.js'
})

var tab1 = Titanium.UI.createTab({
    title: 'First tab',
    window: window1
})
var tab2 = Titanium.UI.createTab({
    title: 'Second tab',
    window: window2
})
var tab3 = Titanium.UI.createTab({
    title: 'Third tab',
    window: window3
})

tabGroup.addTab(tab1)
tabGroup.addTab(tab2)
tabGroup.addTab(tab3)
tabGroup.open()

var button1 = Titanium.UI.createButton({
    title: 'go to second',
    widgh: Titanium.UI.SIZE,
    height: Titanium.UI.SIZE
})
button1.addEventListener('click', function(e){
    tabGroup.setActiveTab(1);
})

var button2 = Titanium.UI.createButton({
    title: 'go to third',
    widgh: Titanium.UI.SIZE,
    height: Titanium.UI.SIZE
})
button2.addEventListener('click', function(e){
    tabGroup.setActiveTab(2);
})

window1.add(button1)
window2.add(button2)

This piece of code belongs to the thirdTab.js file:

var window3 = Titanium.UI.currentWindow

var button3 = Titanium.UI.createButton({
    title: 'go to first',
    widgh: Titanium.UI.SIZE,
    height: Titanium.UI.SIZE
})
window3.add(button3)

button3.addEventListener('click', function(e){
    tabGroup.setActiveTab(0);
})

Answer №1

When you load the third window using the URL 'thirdTab.js', a separate JavaScript context is created. By creating window3 in the same manner as window1 and window2, you will have access to the same JavaScript variables.

If you want to better organize your code in Titanium, I recommend exploring CommonJS modules in Titanium. One approach that aligns well with Titanium's style is as follows:

app.js

....
var window3 = require('window3').createView(tabGroup);
....

window3.js

exports.createView = function(tabGroup) {
    var win = Ti.UI.createWindow({
        backgroundColor: 'yellow'
    });
    var button = Ti.UI.createButton({
        title: 'go to first',
        width: Ti.UI.SIZE, height: Ti.UI.SIZE
    });
    button.addEventListener('click', function(e){
        tabGroup.setActiveTab(0);
    });
    win.add(button);
    return win;
};

This method allows for clear tracking of passed variables and their usage within the code.

I hope this explanation proves helpful!

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Error in typing on a prismic application utilizing a ContentRelationshipField

I am facing a type error in my Prismic Next.js application that I am struggling to resolve. While the app functions properly, I keep encountering type errors like the following: The property 'data' does not exist on the type 'ContentRelati ...

Is being unfazed by work a common occurrence?

After completing a complex cycle that processes data from the database and writes it to an array, I encounter a situation where the array processing function is triggered before the array is fully populated. This forces me to use setTimeout() for proper ti ...

What are the steps to create a mirror image of an object within itself?

Can an object reflect itself? I am interested in seeing a self-reflection on a metallic object. In essence, the two rings of the mechanism should be reflected in the lower part. Thank you in advance! https://i.sstatic.net/m3KUY.jpg https://i.sstatic.n ...

When combining Socket.io 1.0 with express 4.2, the outcome is a lack of socket connection

According to the title, I am attempting to integrate socket.io 1.0.4 with express 4.2, but all requests with "/?EIO" are resulting in a 404 error. Below are my file configurations: ./bin/www : #!/usr/bin/env node var debug = require('debug')(& ...

Optimal method for creating a seamless loop of animated elements passing through the viewport

My challenge involves managing a dynamic set of elements arranged next to each other in a row. I envision them moving in an infinite loop across the screen, transitioning seamlessly from one side to the other, as illustrated here: https://i.stack.imgur.com ...

What is the best way to send a React prop that is buried deep within a JSON structure?

Currently, I am in the process of creating a product table to showcase items for a store. The headers of this table include: id, title, imagePath, newPrice, oldPrice. To accomplish this, I have developed an ItemTable component within my React application t ...

Using Vue.js, you can easily convert a JSON string into a number

I need help sorting a table by both numbers and words obtained from an API. The words sort correctly, but the numbers do not. How can I convert the string values to numbers? Here is the API call I am using: axios.get(`/json/secciones`+ tienda +`.json`) ...

Mongooses, Callbacks, and Bears, oh my! I'm having trouble accessing the values

Greetings everyone, I find myself stuck in a callback nightmare while attempting to retrieve basic values from a Mongoose count by passing a {query}. Although I can access the value and see it fine in the console within the callback, extracting it from an ...

The only numbers that can be typed using Typescript are odd numbers

I am looking for a way to create a type in Typescript that can check if a value is an odd number. I have searched for solutions, but all I find are hardcoded options like odds: 1 | 3 | 5 | 7 | 9. Is there a dynamic approach to achieve this using only Types ...

Accessing the SDK update on the Android platform

In my country, access to the Android website is blocked by Google, making it difficult for programmers here to download the SDK and use the resources available. To remedy this, I have uploaded the SDK to my own hosting platform, allowing local developers t ...

Transfer the document into JavaScript by copying and pasting

I am in need of some assistance with a basic form that includes an input field. While the form is functional, I would like to provide users with the option to upload a file by simply pasting it into the browser using CTRL+V. Is there a way to achieve this ...

Adding text to a text area that is created in React JS is simple with the use of the

I'm currently working with some code that involves creating a text area component. interface IReceiverProps { receivedMessage: string; topic: string; } export default class Receiver extends React.Component<IReceiverProps, {}> { re ...

Implementing a one-time watcher with user input in Vue.js

I am facing an issue with using the input tag in a Vue template. I need to change the type from 'password' to 'text'. <input type="text" v-model="form.password" /> To achieve this, I have created a watch code to convert text s ...

Fill up a dropdown menu in HTML when clicking on it

My webpage has multiple HTML select dropdowns that need to be populated onclick of the element. To achieve this, I use an AJAX call in the click event listener of the select elements. The decision to populate on click is driven by the importance of perfor ...

Unable to locate Dependency in React Native

I am currently working on integrating a native Android SDK into a React Native app. I'm facing an issue while trying to implement the dependency, as the terminal throws an error during the ./gradlew build process: Could not resolve all task depend ...

What is the process for swapping one object for another within an array?

Is there a way in vue.js to substitute the social key in the array with another object's key that has a matching value? For instance: netTeams: { 0: { social: 'Twitter', name: 'Red', ...

Accessing information from req.files in a TypeScript environment

I am currently using multer for uploading images. How can I retrieve a specific file from req.files? Trying to access it by index or fieldname has been unsuccessful. Even when I log it, I see that it's a normal array, so I suspect the issue may be rel ...

Guide on correctly importing a node module, ensuring all functions are exported

I am facing an issue with my file stats.js. Upon inspecting its contents, I found the following code: (function () { func1 = function () { } func2 = function () { } module.exports = this; }).call(this); According to what I have r ...

Transfer an object for reusability in a different JavaScript file without utilizing the default operator

I have a scenario where I have two files organized in a tree structure that defines an object. The first file is called common.js. export default { table: { actions: { save: 'Save', delete: 'Delete', update: ...

I'm having trouble making a Javascript ajax request to my Web API controller page. It seems like I just can't figure out the correct URL

Currently, I am facing an issue with my registration page where I am attempting to save input fields into a new record in the Users table. <button class="btn-u" type="submit" onclick="submitclicked()">Register</button> The click event trigger ...