What is the best way to add a button to every row in Titanium Studio?

Question

What is the best way to add a button to every row in Titanium Studio?

Is there a way to add a different button inside each row (createTableViewRow)? I have created five buttons using Titanium.UI.createButton, but I'm struggling to figure out how to place all five buttons in every row. Can someone provide some guidance on how to achieve this?


function sendAjax() {

    var xhr = Titanium.Network.createHTTPClient();

    xhr.onerror = function(e){
        var error = e.error;
        alert(error);               
    };
    xhr.open('GET', 'http://xxxxxxxxxxxxxx');
    xhr.send();

    var tv = Titanium.UI.createTableView({
        height: Titanium.UI.SIZE,
        width: Titanium.UI.FILL
    });
    win2.add(tv);

    xhr.onload = function() {

        var data = [];
        var schools = JSON.parse(this.responseText);

        for (s in schools) {
            data.push(Titanium.UI.createTableViewRow({
                title: schools[s].Name
            }));
        }
        tv.data = data;
    };
}

javascript android titanium httpclient

Answer 1

Answer №1

Instead of adding listener events to each button inside the row, it is recommended to add the listener event on the tableView itself:

tableView.addEventListener("click", function (event) {
    if (event.source.buttonid) {
       //handle button click
    }
});

Answer 2

Instead of adding listener events to each button inside the row, it is recommended to add the listener event on the tableView itself:

tableView.addEventListener("click", function (event) {
    if (event.source.buttonid) {
       //handle button click
    }
});

Answer 3

Answer №2

Give this a try:

var win = Ti.UI.createWindow({
backgroundColor : '#fff'
});

var tableData = [];

for(var i = 0; i < 10; i++) {
var row = Ti.UI.createTableViewRow();
var button = Ti.UI.createButton({
    title : 'Button ' + i,
    width : 100,
    height : 40,
    buttonid : i    //our custom button property
});
row.add(button);
tableData.push(row);

button.addEventListener('click', function(e) {
    Ti.API.info('button ' + e.source.buttonid + ' clicked.');
    alert('Button ' + e.source.buttonid);
});
}

var tableView = Ti.UI.createTableView({
data : tableData
});

win.add(tableView);

win.open();

This solution was found on this page

UPDATE :

function sendAjax() {

var xhr = Titanium.Network.createHTTPClient();

xhr.onerror = function(e){
    var error = e.error;
    alert(error);               
};
xhr.open('GET', 'http://xxxxxxxxxxxxxx');
xhr.send();

var tv = Titanium.UI.createTableView({
    height: Titanium.UI.SIZE,
    width: Titanium.UI.FILL
});
win2.add(tv);

xhr.onload = function() {

    var data = [];
    var schools = JSON.parse(this.responseText);
    for (s in schools) {
    var row = Ti.UI.createTableViewRow();
    var rowItem = Ti.UI.createView({
       height : 40,
       width : Ti.UI.FILL,
       layout : 'horizontal'
    });
    row.add(rowItem);
    var title = Ti.UI.createLabel({
       height : 40,
       text : schools[s].Name,
       width : Ti.UI.SIZE
    });

    rowItem.add(title);
    var button = Ti.UI.createButton({
        title : 'click ',
        width : 100,
        height : 40,
        buttonid : s    //our custom button property
    });
    rowItem.add(button);
    data.push(row);

    button.addEventListener('click', function(e) {
        Ti.API.info('button ' + JSON.stringify(e.source.buttonid) + ' clicked.');

    });
    };

    tv.data = data;
};
};

Remember to mark this as the correct answer if it helped you.

Answer 4

Give this a try:

var win = Ti.UI.createWindow({
backgroundColor : '#fff'
});

var tableData = [];

for(var i = 0; i < 10; i++) {
var row = Ti.UI.createTableViewRow();
var button = Ti.UI.createButton({
    title : 'Button ' + i,
    width : 100,
    height : 40,
    buttonid : i    //our custom button property
});
row.add(button);
tableData.push(row);

button.addEventListener('click', function(e) {
    Ti.API.info('button ' + e.source.buttonid + ' clicked.');
    alert('Button ' + e.source.buttonid);
});
}

var tableView = Ti.UI.createTableView({
data : tableData
});

win.add(tableView);

win.open();

This solution was found on this page

UPDATE :

function sendAjax() {

var xhr = Titanium.Network.createHTTPClient();

xhr.onerror = function(e){
    var error = e.error;
    alert(error);               
};
xhr.open('GET', 'http://xxxxxxxxxxxxxx');
xhr.send();

var tv = Titanium.UI.createTableView({
    height: Titanium.UI.SIZE,
    width: Titanium.UI.FILL
});
win2.add(tv);

xhr.onload = function() {

    var data = [];
    var schools = JSON.parse(this.responseText);
    for (s in schools) {
    var row = Ti.UI.createTableViewRow();
    var rowItem = Ti.UI.createView({
       height : 40,
       width : Ti.UI.FILL,
       layout : 'horizontal'
    });
    row.add(rowItem);
    var title = Ti.UI.createLabel({
       height : 40,
       text : schools[s].Name,
       width : Ti.UI.SIZE
    });

    rowItem.add(title);
    var button = Ti.UI.createButton({
        title : 'click ',
        width : 100,
        height : 40,
        buttonid : s    //our custom button property
    });
    rowItem.add(button);
    data.push(row);

    button.addEventListener('click', function(e) {
        Ti.API.info('button ' + JSON.stringify(e.source.buttonid) + ' clicked.');

    });
    };

    tv.data = data;
};
};

Remember to mark this as the correct answer if it helped you.

What is the best way to add a button to every row in Titanium Studio?

Answer №1

Answer №2

Similar questions

The perplexing problem of scrolling in Dojox/mobile/scrollableview

Troubleshooting Puppeteer compatibility issues when using TypeScript and esModuleInterop

What could be causing the issue with uglify not functioning properly with AngularJS content?

The ajax success response transforms when using @html.raw

Is it possible to incorporate HTML and CSS into a npm package?

Displaying the currently logged in user's name with NodeJS/ExpressJS/Passport

Drawing graphics on an HTML5 Canvas with the power of React Native

Confirm the email address using the autocomplete feature in the field

The error message popping up reads as follows: "TypeError: _this2.setState cannot

Issue with karma-ng-html2js-preprocessor failing to generate modules

The error message displayed in Andriod Studio states that there is an issue converting the value "<br" of type java.lang.String to a JSONObject,

What is the solution to setting true and false equal to true in an AngularJS expression?

When the table is clicked, a dynamic accordion table should appear

Splitting Code in React Components using Webpack within a Ruby on Rails Application

Real Android Integration tests without mocking

What could be causing my .vue component to be undefined?

What is the solution to resolving the problem indicated by the error message "at process.processTicksAndRejections (node:internal/process/task_queues:95:5)"?

After receiving the go-ahead from JavaScript, I am planning on integrating PHP into my project. I have come across some recommendations

Retrieve your Docusign Access Code using the typescript httpClient.post method

Traversing a two-dimensional array backwards in JavaScript