Swap an image in a tableViewRow

Question

I am building an iOS 7 app using Titanium. I have a tableView that displays several pieces of data. Each tableViewRow is 180px high. I want to place an image that is 60px by 60px in the top left corner. When the image is clicked I want to change the image to another image. Here is the code I have so far:

var tableview = Ti.UI.createTableView({
backgroundColor : 'transparent',
top : '0px',
width : '99%',
bottom : '10px',
color : '#000',
contentHeight : 'auto'
});

tableview.addEventListener('click', function(e) {
    if(e.row.image == 'images/nomatch.png') {
        e.row.image = 'images/match.png';
    } else {
        e.row.image = 'images/nomatch.png';
    }
});

//Then I get my data from the database and set up my row

row = Ti.UI.createTableViewRow({
backgroundImage : 'images/openmatchesrowbackground.png',
width : '90%',
height : '180px'
});

var acceptmatchView = Ti.UI.createView({
left : '0px',
top : '0px',
width: '60px',
height: '60px'
});

var acceptmatch = Ti.UI.createImageView({
image : 'images/nomatch.png',
left : '0px',
top : '0px',
width: '60px',
height: '60px'
});

//Then I add 7 more labels to the row and add the images and labels to the views and the views to the windows

acceptmatchView.add(acceptmatch);
row.add(acceptmatchView);
...

If I use the row property 'leftImage' I lose the capability to position it in the top left corner and the code doesn't display the image until after the first click, but then the image will change. I have tried some other code that I have found but none have worked properly for this situation.

Answer 1

You can't assign image to acceptmatch using e.row.image.

According to your design acceptmatch is the children of the acceptmatchView, which is the children of your row.

Your row
   - > Children[0] - acceptmatchView
        -> Children[0] - acceptmatch 

So you can assign image to it like:

tableview.addEventListener('click', function(e) {
    var imageView = e.row.children[0].children[0];
    if(imageView.image == 'images/nomatch.png')
    {
        imageView.image = 'images/match.png';
    }
    else
    {
        imageView.image = 'images/nomatch.png';
    }
});