Databases
StackOverflow2013
Postsdbo
POTitanium Appcelerator table views getting stacked on top of eachother
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POTitanium Appcelerator table views getting stacked on top of eachother
    primarykey
    data
    text
    <p>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).</p> <p>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.</p> <p>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:</p> <pre><code>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+"&amp;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 &lt; 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 &lt; 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); }); </code></pre> <p>Thanks so much for the help! I'm really stuck.</p>
    singulars
    1. PO
      singulars
      1. PTAnswer
    1. This table or related slice is empty.
    1. PTQuestion
    1. This table or related slice is empty.
    1. USgrandcameo
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. PO
      singulars
      1. PTAnswer
    1. This table or related slice is empty.
    1. This table or related slice is empty.
 

Querying!

 
Guidance
A row detail

Detail views are divided into sections. All the information in the data section comes from columns in the selected row. The other sections display data from other, related rows.

Related data can be related in a to-one or a to-many fashion. Captions of data related in a to-many fashion link to a list view showing a filtered view of the table.

Try moving around until you find a non-empty to-many entry and click on the label to get to one. You can move back to the root by clicking on the database name in the header.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload