Where do I position addEventListener when using createTableViewRow in createTableView?

Question

Where do I position addEventListener when using createTableViewRow in createTableView?

You must Login before you can answer or comment on any questions.

Hello,

I have created a table view and added rows using an http call. To keep this simple I am retrieving just 2 rows and this works fine. The next thing I want to happen is when a click is done on either record/row then a new window will open with the current details passed through. I have managed to create a addEventListener to do this but I am doing something wrong as I can't get the correct details to be passed in the new window. I don't think I am placing the addEventListener in the correct place or my syntax is wrong as it always shows the last row. My data is being created within a loop. Here is my code - can anyone tell me what I am doing wrong please? Thanks in advance.

var win = Ti.UI.currentWindow;
var tab = Titanium.UI.currentTab;
 
var xhr = Ti.Network.createHTTPClient();    
var tv = Ti.UI.createTableView({minRowHeight:50});
 
var data = [];
 
    xhr.onload = function(e)
    {
        // create table view event listener
        Ti.API.info('responseText = ' + this.responseText);
 
        var jsoncaselist = JSON.parse(this.responseText);
 
        for(x = 0; x < jsoncaselist.caserow.length; x++)
        {
            var caselist = jsoncaselist.caserow[x];
            Ti.API.debug('caselist = ' + caselist);
            var internalid = jsoncaselist.caserow[x][0];
            var casenumber = jsoncaselist.caserow[x][1];
            var title = jsoncaselist.caserow[x][2];
            var lastmessage = jsoncaselist.caserow[x][7];
 
            var textfield = internalid + ' ' + casenumber + ' ' + title;
 
            var row = Ti.UI.createTableViewRow({height:'auto',className:"row"});
 
            var textView = Ti.UI.createView({
                height:'auto',
                layout:'vertical',
                left:30,
                top:10,
                bottom:10,
                right:10
            });
 
            var l1 = Ti.UI.createLabel({
                text:'Case Number: ' + casenumber,
                height:'auto'
 
            });
            textView.add(l1);
 
            var l2 = Ti.UI.createLabel({
                text:'Subject: ' + title,
                top:10,
                height:'auto'
            });
            textView.add(l2);
 
            var l3 = Ti.UI.createLabel({
                text:'Last Message: ' + lastmessage,
                top:10,
                height:'auto'
            });
            textView.add(l3);
 
            row.add(textView);
 
            row.addEventListener('click', function()
            {
                Ti.API.debug('in addEventListener ');
 
                var cdetail = Titanium.UI.createWindow({title:'casenumber', hasChild:true, url:'../examples/casedetails.js'});
                cdetail.internalid = internalid;
                cdetail.casenumber = casenumber;
 
                tab.open(cdetail,{animated:true});
            });
 
            data.push(row);
            tv.setData(data);
            win.add(tv);
        }
    }

This is in my new window

var win = Titanium.UI.currentWindow;
 
// pull properties off of current window object an display
var l = Titanium.UI.createLabel({
    top:0,
    height:'auto',
    width:300,
    color:'#777',
    font:{fontSize:16},
    text:'\ninternalid: '   + win.internalid
    + '\ncnumber:' + win.casenumber 
});
win.add(l);

1 Answer

Your Answer

Think you can help? Login to answer this question!

Accepted Answer

Accepted Answer

First, when you create your tableviewrow, add your custom data to be passed to the detail window as custom properties like this:

var row = Ti.UI.createTableViewRow({
    height:'auto',
    className:'row',
    internalid:internalid
    morecustomdata:anothervariable  
});

Then, instead of adding the event listener to the row, create one tableview eventlistener outside of the xhr load and the loop that is creating the rows, like this:

var tv = Ti.UI.createTableView({minRowHeight:50});
 
tv.addEventListener('click', function(e){
    var detailwindow... //create the window
 
    //add some labels to it
    var label = Ti.UI.createLabel({
        text:'internal id: ' + e.rowData.internalid  <<custom row data  
    //add the label
    //open  the window, etc
});

With your custom row data being passed int the event data 'e', you can access whatever you need to create the new detail window.