Displaying details of city on click of row in Titanium - titanium-mobile

Question

Hi i am beginner in programming and i am trying to build a simple Titanium app using HTTPClient. This piece of code displays the full list of cities, I want that on click of each city it will display in another window, photo of clicked city.
This piece of code display the full list of cities:
Ti.UI.backgroundColor = '#000';
var url = "http://10.0.3.2:8000/cities/.json";
var win = Ti.UI.createWindow();
var table = Ti.UI.createTableView();
var tableData = [];
var json, i, row, nameLabel, nickLabel;
var xhr = Ti.Network.createHTTPClient({
onload: function() {
// Ti.API.debug(this.responseText);
json = JSON.parse(this.responseText);
for (i = 0; i < json.length; i++) {
row = Ti.UI.createTableViewRow({
height:'60dp'
});
nameLabel = Ti.UI.createLabel({
text:json[i].city,
font:{
fontSize:'24dp',
fontWeight:'bold'
},
height:'auto',
left:'10dp',
top:'5dp',
color:'#000',
touchEnabled:false
});
nickLabel = Ti.UI.createLabel({
text:'"' + json[i].city + '"',
font:{
fontSize:'16dp'
},
height:'auto',
left:'15dp',
bottom:'5dp',
color:'#000',
touchEnabled:false
});
row.add(nameLabel);
row.add(nickLabel);
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('Per momentin nuka ka te dhena! ju lutem provojeni perseri me vone!!!');
},
timeout:5000
});
xhr.open("GET", url);
xhr.send();
win.add(table);
win.open();
Here are APIs:
a) API that displays the full list of cities http://10.0.3.2/cities/.json :
[{"id": 1, "city": "Shkoder", "photo_city": "null"}, {"id": 2, "city": "Lezhe", "photo_city": "null"}, {"id": 3, "city": "Lac", "photo_city": "null"}]
b) API that displays details of a clicked city http://10.0.3.2/city/2/.json :
[{"id": 2, "city": "Lezhe", "photo_city": "null"}]
I hope in your help!!!

Answer 1

Here is a video showing the complete coding process: https://www.youtube.com/watch?v=MwjogxcrqlE
/**
* called when user clicks on table view. The _event will provide
* the index of the item clicked in the table
*
* #param {Object} _event
*/
function clickedOnTableView(_event) {
// display to console log the _event object for debugging
Ti.API.info(JSON.stringify(_event,null,2));
// get data using index provided, show alert
// show all data changes now
alert("clicked on " + tableData[_event.index].city + " " +
tableData[_event.index].id);
}
Add the event listener
table.addEventListener('click',clickedOnTableView);