Question

I am working on an iPhone app for an event and I have to build a table of ‘pavilions’ occurring either on week 1 or week 2, or all (default).

My problem is that when the tabbed bar to filter down to week 1 or week 2 is clicked, it draws the new table rows/list overtop of the existing table view.

I’m sure this is an easy fix but I can’t seem to figure it out. I stripped the code down a little bit to simplify it:

var mac_addy = Titanium.Platform.macaddress;
var win = Titanium.UI.currentWindow;

win.backgroundImage = 'backs/pavilions_background.jpg';
win.backgroundRepeat = 'no-repeat';

var xmlHttp = null;

function api_load(api_params) {  
   var rowData = [];
   var loader = Titanium.Network.createHTTPClient();

// Sets the HTTP request method, and the URL to get data from  
loader.open("GET","http://example.com/api/?pavilions-week="+api_params+"&mac="+mac_addy);  

//loader.setInterval([10000]);

// Runs the function when the data is ready for us to process  
loader.onload = function() { 
    var api_data = eval('('+this.responseText+')');   

    //alert(api_data.pavilions_week[0].pavilion_name);

    var api_total = objectLength(api_data.pavilions_week);
    //alert(api_total);

    var api_whatever = api_total * 3;

    var pavilion_loop = 0;

    for (var i = 0; i < api_whatever; i = i + 3) { 
        var data_line  = api_data.pavilions_week[pavilion_loop]; 

        //alert(data_line.media_content.file_url);
        // Create a row and set its height to auto  
        var row = Titanium.UI.createTableViewRow({height:100, top:10, left:10, right:10, borderRadius:10, hasChild:true, test:'pavilion_profile.js', pav_id:data_line.id, backgroundColor:'#ffffff', header:''});  
        // Create the view that will contain the text and avatar  
        var post_view = Titanium.UI.createView({ height:100, width:226, top:5, left:70, layout:'vertical' });  

        var flag =  Titanium.UI.createImageView({
            image:data_line.media_content.file_url,
            width:50,
            height:50,
            left:10,
            top:5
        });

        var week =  Titanium.UI.createImageView({
            image:'icons/week_'+data_line.pavilion_week+'.png',
            width:50,
            //height:'auto',
            right:-10,
            top:75,
            bottom:0
        });

        var star_path = '';

        if (data_line.pav_rating != '') {
            if (data_line.pav_rating == undefined) {
                star_path = 'icons/stars_0.png';
            }
            else {
                star_path = 'icons/stars_'+data_line.pav_rating+'.png';
            }
        }
        else {
            star_path = 'icons/stars_0.png';
        }

        var stars =  Titanium.UI.createImageView({
            image:star_path,
            width:50,
            //height:'auto',
            left:70,
            top:75
        });



        row.add(flag);
        row.add(week);
        row.add(stars);


        // Create the label to hold the screen name  
        var user_lbl = Titanium.UI.createLabel({  
             text:data_line.pavilion_name,  
             //left:55,    
             top:0,  
             bottom:2,  
             height:18,  
             textAlign:'left',  
             color:'#444444',
             font:{  
                 fontFamily:'Trebuchet MS',fontSize:16,fontWeight:'bold'  
             }  
         });  

        post_view.add(user_lbl);

        // Create the label to hold the tweet message  
        var tweet_lbl = Titanium.UI.createLabel({  
            text: data_line.pavilion_description,    
            top: 0,   
            height: 'auto',  
            //width: 220,  
            right:20,
            textAlign: 'left',  
            font:{ fontSize:11 }
            //borderWidth:1,
            //borderColor:'#444444'
        });  

        post_view.add(tweet_lbl);


        var st_title = 'Showtimes:';
        var st_line = 'Sorry you missed it!';

        var hr_title = 'Hours:';
        var hr_line = 'Sorry you missed it!';

        if (api_data.system.fest_week < data_line.pavilion_week) {
            st_title = 'Future Showtimes:';
            st_line = data_line.showtimes;

            hr_title = 'Future Hours:';
            hr_line = data_line.hours_of_op;
        }
        else if (api_data.system.fest_week == data_line.pavilion_week) {
            st_title = 'Today\'s Showtimes:';
            st_line = data_line.showtimes;

            hr_title = 'Today\'s Hours:';
            hr_line = data_line.hours_of_op;
        }

        // ##############################################################################

        var showtimes_line = Titanium.UI.createTableViewRow({ 
            width:290,
            height:'auto',
            top:135,
            backgroundColor:'#ffffff'
        });

        //row.add(showtimes_line);


        var show_1 = Titanium.UI.createLabel({  
             text: st_title,  
             height:'auto',
             color:'#444444',
             font:{  
                 fontSize:11,
                 fontWeight:'bold'
             },
             left:10,
             width:220,
             top:5
         });

        var show_2 = Titanium.UI.createLabel({  
             text: st_line, //data_line.showtimes,  
             height:'auto',
             color:'#444444',
             font:{  
                 fontSize:11  
             },
             left:10,
             top: 20,
             bottom:5,
             width:220
         });

        showtimes_line.add(show_1);
        showtimes_line.add(show_2);

        if (data_line.dinner_rsrv == 'y') {
            var dinner_icon =  Titanium.UI.createImageView({
                image:'icons/dinner_s.png',
                width:25,
                height:30,
                right:10,
                top:5,
                bottom:5
            });

            showtimes_line.add(dinner_icon);
        }

        // ##############################################################################


        // ##############################################################################

        var hours_line = Titanium.UI.createTableViewRow({ 
            width:290,
            height:'auto',
            title:'',
            hasChild:false,
            backgroundColor:'#ffffff'
        });

        //row.add(hours_line);
        //rowData.push(hours_line);

        var hour_1 = Titanium.UI.createLabel({  
             text: hr_title,  
             height:'auto',
             color:'#444444',
             font:{  
                 fontSize:11,
                 fontWeight:'bold'
             },
             left:10,
             width:220,
             top:5
         });

        var hour_2 = Titanium.UI.createLabel({  
             text: hr_line, //data_line.showtimes,  
             height:'auto',
             color:'#444444',
             font:{  
                 fontSize:11  
             },
             left:10,
             top: 20,
             bottom:5,
             width:220
         });

        if (data_line.late_night == 'y') {
            var party_icon =  Titanium.UI.createImageView({
                image:'icons/nite_party_s.png',
                width:25,
                height:30,
                right:10,
                top:5,
                bottom:5
            });

            hours_line.add(party_icon);
        }

        hours_line.add(hour_1);
        hours_line.add(hour_2);

        // ##############################################################################

        // Add the post view to the row  
        row.add(post_view);  

        // Give each row a class name  
        row.className = "item" + i;  

        // Add row to the rowData array  
        rowData[i] = row;

        var i1 = i + 1;
        var i2 = i + 2;

        rowData[i1] = showtimes_line;
        rowData[i2] = hours_line;

        //alert(i);

        pavilion_loop++;
    }

    // Create the table view and set its data source to "rowData" array  
    var tableView = Titanium.UI.createTableView( { data : rowData,             style:Titanium.UI.iPhone.TableViewStyle.GROUPED, backgroundColor:'transparent' } );  




    // create table view event listener
tableView.addEventListener('click', function(e)
{
if (e.rowData.test)
{
    var win = Titanium.UI.createWindow({
        url:e.rowData.test,
        title:e.rowData.title
    });

    win.pavilion_id = e.rowData.pav_id;

    if (e.rowData.barColor)
    {
        win.barColor = e.rowData.barColor;
    }
    if (e.rowData.title_image)
    {
        win.titleImage = e.rowData.title_image;
    }
    Titanium.UI.currentTab.open(win,{animated:true});
}
});




    //Add the table view to the window  
    win.add(tableView);
};  

// Send the HTTP request  
loader.send();
}


Ti.UI.currentWindow.addEventListener('focus', function() {
var api_stuff = '*';
api_load(api_stuff);
});




// title control
var tb4 = Titanium.UI.createTabbedBar({
labels:['All', 'Week 1', 'Week 2'],
index:0,
backgroundColor:'#336699',
style:Titanium.UI.iPhone.SystemButtonStyle.BAR
});
win.setTitleControl(tb4);


//THIS SWITCHES TABS FOR WHICHEVER WEEK
tb4.addEventListener('click', function(e)
{
var actual_pav = '*';
if (e.index != 0) {
    actual_pav = e.index; //+ 1; //l.text = 'You clicked index = ' + e.index;
}

api_load(actual_pav);
});

Thanks so much for the help! I’m really stuck.

Answer 1

You are creating and adding the table inside the onload event of xhr. This means one new table for each call.
Create an empty table first, add it to the window, then inside onload only use setData(rowData).