Appcelerator Titanium: Using eventListener & fireEvent on Database Array on View

Question

I'm new to titanium. I've been having some problems on this for a while now. Help would be greatly appreciated.

I have a array loop that cycles through a database to retrieve images and labels. These are all stored in a view. I am adding an event listener to the the view and then adding fire event to the listener to open the selected image in a new window with the id of that video acting as a reference point to play the selected video in the new window. Hope my code makes more sense.

The problem is that the even listener will only return the value of the last row in the database, not the info of the video image that the user clicks on

function getChannelVideos(){
    // create an empty data array
    var video = [];

    // create the httpRequest 
    var xhr = Titanium.Network.createHTTPClient(); 

    xhr.open('GET','getVideoFeed.php?chid='+channelView.channelId); 


    // this method will be called when the request is complete
    xhr.onload = function() 
    { 

        // parse json coming from the server
        var json = JSON.parse(this.responseText);

        // if Channel Videos are returned
        if(json.channelVideos)
        {
            for (var i = 0; i < json.channelVideos.length; i++){

                var video = Ti.UI.createView({  // creates video view
                    width:'60%', // sets height
                    backgroundColor: 'transparent',
                });

                var videoThumb = Ti.UI.createImageView({  // creates thumb
                    image:json.channelVideos[i].vThumb, 
                    width:'100%', // sets height
                    top:150 + i*200, // positions from top
                    backgroundColor: '#000'
                });
                video.add(videoThumb);  // adds thumb to video view

                var videoTitle = Ti.UI.createLabel({  // creates label
                    text:json.channelVideos[i].vTitle,
                    font:{
                        fontSize:12
                    },
                    color:'#fff',
                    backgroundColor:'#000',
                    textAlign:'center',
                    width:'100%',
                    height:20,
                    top:140 + i*200, // positions from top
                });
                video.add(videoTitle);  // adds video title to video view

                var videoSpeaker = Ti.UI.createLabel({  // creates Label
                    text:json.channelVideos[i].vSpeaker,
                    font:{
                        fontSize:12
                    },
                    color:'#fff',
                    backgroundColor:'#000',
                    textAlign:'center',
                    width:'100%',
                    height:20,
                    top:295 + i*200, // positions from top
                });
                video.add(videoSpeaker);  // adds speaker name to video view

                var videoPlay = Ti.UI.createImageView({
                    image:'/images/light_play.png',
                    top:215 + i*200, // positions from top
                });

                video.add(videoPlay);  // adds playbutton to videoview

                chContentAreaView.add(video);  // adds video view to scrollview 

                var vId=json.channelVideos[i].vId;

                video.vId = vId;  // Here vId is custom property of video

                video.addEventListener('click', function(e){
                    alert(e.source.vId);
                    Ti.App.fireEvent('videoPlay',{
                        videoId:e.source.vId                        
                    });
                });

            }

        }
    };

    // this method will be called if there is an error 
    xhr.onerror = function(){
        alert(this.error + ': ' + this.statusText);
        return false;
    };

    // open the httpRequest 
    xhr.setRequestHeader("contentType","application/json; charset=utf-8");
    xhr.send();
}

Answer 1

try some things:

1. give video.vId = json.channelVideos[i].vId directly in the property of video like :

   var video = Ti.UI.createView({ // creates video view width:'60%', // sets height backgroundColor: 'transparent', vId : json.channelVideos[i].vId });

2. use property touchEnabled : false in other views and labels for videoThumb, videoTitle, videoSpeaker, videoPlay etc.

I think by doing this all things will work fine.