Displaying details of city on click of row in Titanium

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!!!

Then add an event listener to _nameLabel_ to bring up a Window. You can pass parameter as image or cityID to display whatever you like. — Eduardo Gomez, Apr 13 '15 at 22:47

score 0 · Answer 1 · answered Apr 14 '15 at 00:50

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);

Displaying details of city on click of row in Titanium

1 Answers1