Creating a search function

You must Login before you can answer or comment on any questions.

I've created a form which passes a query to a server and returns json data back. I build rows using some of that data. So far so good. I am stuck on how I allow a user to select a row to get more detail on the selected item. The touch event would basically make another call passing and id and get the detail info back and display it.

Can someone help me a little on how to pass that id with the row to another page that will show the detail? I don't know how to reference the row and pass the id for that row.

Here's what I have for the listener (its not correct for sure): 

table.addEventListener('click', function(e) {
 
    var detail = Titanium.UI.createWindow({
            title:e.rowData.nameLabel,  
            url:'detail.js'
        });
        detail.ID = 10004;
        Titanium.UI.currentTab.open(detail,{animated:true});
 
        });

— asked 11 months ago by Mike Stahl
2 Comments

  • Hi Mike,

    Please share your row creation code to understand how you add object in that row.

    — commented 11 months ago by Nitin Chavda

  • Thanks for asking. Here it is: 

    var xhr = Ti.Network.createHTTPClient({
    onload: function() {
    Ti.API.debug(this.responseText);
    json = JSON.parse(this.responseText);
 
    for (i = 0; i < json.providers.length; i++) {
 
        provider = json.providers[i];
 
        row = Ti.UI.createTableViewRow({
            height:'60dp'
        });
 
        var image = Ti.UI.createImageView({
          image:provider.image,
          height:'60dp',
          width:'50dp',
          left:'0dp',
          top:'0dp'
        });
 
       nameLabel = Ti.UI.createLabel({
            text:provider.firstName + ' '+ provider.lastName,
            font:{
                fontSize:'20dp',
                fontWeight:'bold'
            },
            height:'auto',
            left:'60dp',
            top:'5dp',
            color:'#000',
            touchEnabled:false
            });
 
 
           specialty = Ti.UI.createLabel({
                text: provider.specialties[0].name,
                font:{
                    fontSize:'14dp'
                },
                height:'auto',
                left:'60dp',
                bottom:'5dp',
                color:'#000',
                touchEnabled:false
            });
 
 
       id = Ti.UI.createLabel({
        text:provider.id,
            font:{
                fontSize:'20dp',
                fontWeight:'bold'
            },
            height:'auto',
            left:'60dp',
            top:'5dp',
            color:'#000',
            touchEnabled:false
        });
 
        row.add(image);
        row.add(nameLabel);
        row.add(specialty);
        //row.add(id)
        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();
win.add(table);
 
 
table.addEventListener('click', function(e) {
 
    var detail = Titanium.UI.createWindow({
            title:e.rowData.title,  <-- want this to be nameLabel
            url:'detail.js'
        });
        detail.providerID = 10004;
        Titanium.UI.currentTab.open(detail,{animated:true});
 
 
 
        });

    — commented 11 months ago by Mike Stahl

1 Answer

Accepted Answer

Hi Mike,

just put below line in your row creation code before push row into array.

row.obj = provider;
and add below code in your table click event.
detail.obj = e.row.obj;
and put alert in your detail.js file like below if your window name is not win then just replace with win in alert. 
alert(JSON.stringify(win.obj));

— answered 11 months ago by Nitin Chavda
answer permalink
2 Comments

  • Thanks! That is exactly what I needed.

    — commented 11 months ago by Mike Stahl

  • One more related question. I am trying to use the same concept you provided to use an event on a button to open a map. I keep getting undefined when I try to click the map button. 

    mapButton = Ti.UI.createButton({
            title:'Map',
            font:{
                fontSize:'12dp'
            },
            width: 80,
            height: 30
        });
 
row.add(image);
        row.add(nameLabel);
        row.add(adresses);
        row.add(mapButton);
    mapButton.obj = detail.geocode;
        tableData.push(row);
 
 
table.setData(tableData);
 
win.add(table);
 
mapButton.addEventListener('click', function(e) {
            var map = Titanium.UI.createWindow({
                    title:'Map',    
                    url:'map.js'
                });
                coor = detail.addresses[0].geocode;
                scoor = coor.split(',');
                map.lat = scoor[0];
                map.longi = scoor[1];
                map.obj = e.mapButton.obj;
                Titanium.UI.currentTab.open(map,{animated:true});
        });

    — commented 11 months ago by Mike Stahl

Your Answer

Think you can help? Login to answer this question!