Get facebook pics to Titanium

Question

I have a band and i want to build a section in our titanium app that shows our facebook fanpage pics.

I have gotten to the part where i can get the pics in a table row but when i click on them it only shows the last one.

Kind of strange....

Well here is my code so maybe you can help to see what i have done wrong....

var win = Ti.UI.currentWindow;

win.hideNavBar();


Ti.UI.backgroundColor = '#dddddd';




var url = "https://graph.facebook.com/98604492365/photos";
var win = Ti.UI.createWindow();
var table = Ti.UI.createTableView();
var tableData = [];
var json, data, position,picture, source,link,icon;

var xhr = Ti.Network.createHTTPClient({
onload: function() {
// Ti.API.debug(this.responseText);

json = JSON.parse(this.responseText);
for (i = 0; i < json.data.length; i++) {
    data = json.data[i];
    row = Ti.UI.createTableViewRow({
        height:'60dp'
    });
  var  name = Ti.UI.createLabel({
        text:data.position,
        font:{
            fontSize:'18dp',
        fontWeight:'bold'
    },
    height:'auto',
    left:'50dp',
    top:'5dp',
    color:'#000',
    touchEnabled:true
    });



  // Avatar
            var img = Ti.UI.createImageView({
                image   : data.picture,
                width   : 35,
                height  : 35,
                top     : 5,
                bottom  : 5,
                borderRadius: 5,
                left    : 5
            });
            row.add(img);


    row.add(name);

    tableData.push(row);
    }

table.setData(tableData);
},
onerror: function(e) {
Ti.API.debug("STATUS: " + this.status);
Ti.API.debug("TEXT:   " + this.responseText);
Ti.API.debug("ERROR:  " + e.error);
alert('There was an error retrieving the remote data. Try again.');
},
timeout:5000
});

xhr.open("GET", url);
xhr.send();

// Handle a click event on the table
    table.addEventListener('click',function(e) {
        // Create the new window with the link from the post
        var faceWindow = Ti.UI.createWindow({
            title   : data.name,
            modal   : true,
            barColor: '#050505',
            backgroundColor: '#050505'              
        });
        var webView = Ti.UI.createWebView({url: data.source});
        faceWindow.add(webView);

        // Create the close button to go in the left area of the navbar popup
        var close = Titanium.UI.createButton({
            title: 'Close',
            style: Titanium.UI.iPhone.SystemButtonStyle.PLAIN
        });
        faceWindow.setLeftNavButton(close);

        // Handle the close event
        close.addEventListener('click',function() {
            faceWindow.close();
        });



        faceWindow.open();
    });


win.add(table);
win.open();

Pls help me i am losing my mind......

Thanx

//R

Answer 1

Looking at your code, I have the indenting is wrong. Seeing that, I notice that you, in the event handler 'click', use the data.name and data.source. This data seems to be set in a foreach loop.

the click event doesn't work that way. It is event driven. You would be wise setting the source url and the name as a variable on the row.

row.photoName = data.name;
row.photoSource = data.source;

Then, in the event handler, you set e as a callback variable. Use that:

e.row.photoName;
e.row.photoSource;