Event Listeners for multiple objects in a row

Question

I am building a Titanium iOS app. I have a tableview that has two images and some other labels on each row. I want to be able to click on each one of the images and swap for other images and I want to be able to click on a label like a phone number and bring up the dialer. So far, a click anywhere in the row swaps the image. Here is some of my code:

//First I create my table and then call a php file to return some JSON data, then I create my row and define an image

row = Ti.UI.createTableViewRow({
    backgroundImage : 'images/openmatchesrowbackground.png',
    selectionStyle : Titanium.UI.iPhone.TableViewCellSelectionStyle.NONE,
    width : '100%',
    height : '180pt',
    rowId : i
    });

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

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

//Then I add some labels and add everything to the row - Now create my event listener

        tableview.addEventListener('click', function(e) {
        var imageView = e.row.children[0].children[0];

    if (imageView.image == 'images/nomatch.png') {
        imageView.image = 'images/match.png';

    var matchSelected = json.openmatches[e.rowData.rowId];

        var alertWindow = Titanium.UI.createAlertDialog({
            title : 'Accept This Match?',
            message : 'Are you sure you want to accept this match?' + '\n' + matchSelected.matchtype + '\n' + 'Time: ' + matchSelected.datetime + '\n' + 'At: ' + matchSelected.courtname,
            cancel : 1,
            buttonNames : ['Yes', 'Cancel']
        });
alertWindow.addEventListener('click', function(ev) {
            Titanium.API.info("cancel " + ev.cancel);
            Titanium.API.info("index " + ev.index);
switch(e.source.action){
            //switch(ev.index) {
                //case 0:
                case 'swapImages':

                    break;
                case 'swapImages':

                    imageView.image = 'images/nomatch.png';
                    break;

            }
        });
        alertWindow.show();

    } else {

        imageView.image = 'images/nomatch.png';
        var alertWindow = Titanium.UI.createAlertDialog({
            title : 'Cancel This Match?',
            message : 'Are you sure you want to cancel this match?',// + '\n' + matchSelected.matchtype + '\n' + 'Time: ' + matchSelected.datetime + '\n' + 'At: ' + matchSelected.courtname,
            cancel : 1,
            buttonNames : ['Yes', 'Keep Match']
        });

        alertWindow.addEventListener('click', function(ev) {
            Titanium.API.info("cancel " + ev.cancel);
            Titanium.API.info("index " + ev.index);

            switch(e.source.action) {
                case 'swapImages':

                    break;
                case 'swapImages':

                    imageView.image = 'images/match.png';
                    break;

            }
        });
        alertWindow.show();
    }
});

        tableview.setData(tableData);

    },

How do I write my code so it can work on each object in the row?

Answer 1

One approach is to add a property such as action: 'swapImages' to the objects that, when clicked, should swap an image. You can add other ones such as action: 'dial'. Then in your click listener: switch (e.source.action) { case 'swapImages': ... break; ... etc }. This pattern has worked well for me in a number of apps.

Answer 2

In addition to Dawson Toth's answer, try resetting the bubbleParent property to false. In your case the event might be propagated to the parent. Here you have added eventlistener to the tableViewRow. So each click on the child will be propagated tothe parent. Default value for bubbleParent is true. Setting bubbleParent to false will not propagate the action.

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

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