[TIMOB-20619] Windows: App crash on click eventlistener of appended row of tableview

GitHub Issue	n/a
Type	Bug
Priority	Critical
Status	Closed
Resolution	Fixed
Resolution Date	2016-03-28T07:02:20.000+0000
Affected Version/s	Release 5.2.0
Fix Version/s	Release 5.4.0
Components	Windows
Labels	8.1, TableViewRow, Windows, Windows-Phone, appendRow, eventlistener, qe-5.4.0
Reporter	Parmeet Singh
Assignee	Kota Iguchi
Created	2016-03-22T11:15:22.000+0000
Updated	2016-06-21T18:47:39.000+0000

Description

I have a table view and I am appending rows to it. When I click the default values of the table, the click listener is working fine but when I try to click the appended row item, it is exiting the app without any error or log. I have tried adding the event listener to the append row separately but it is also not working. Below is my code

var args = arguments[0] || {};
var toastMsg = require('toastMessage');
//var limit = 10 ;
$.topView.headerLabel.text = "MESSAGES";
//$.topView.menuListImgRight.image = "images/icons/internalScreenIcons/search.png";
var lastPostId;
var allLoaded = false;
var sectionVal = 0;

var messageRefresh = function(e) {

	listMessage();
};

Ti.App.addEventListener("messageRefresh", messageRefresh);

var TimelineMessageRefresh = function(e) {

	listMessage();
};
$.getNext.addEventListener('click', function(e) {
	nextTen(Ti.App.Properties.getString('postid'));
});

Ti.App.addEventListener("TimelineMessageRefresh", TimelineMessageRefresh);

//if (Alloy.Globals.offlineDetect()) {
if (Ti.Network.networkTypeName == Ti.Network.NETWORK_NONE || Ti.Network.networkTypeName == Ti.Network.NETWORK_UNKNOWN) {
	Ti.API.info("offline ");
	offlineList();
} else {
	Ti.API.info("online messagelist");
	listMessage();

}

function listMessage() {

	var data = [];
	Ti.API.info("Called " + lastPostId);

	var tableData = [];
	var session = Ti.App.Properties.getString('sessionId');
	var userid = Ti.App.Properties.getString('userId');
	var _usergroup = [];
	var _ug = "?limit=0";
	for ( i = 0; i < Alloy.Globals.userGroup.length; i++) {
		_usergroup.push(Alloy.Globals.userGroup[i]);
	}

	for (var i = 0; i < _usergroup.length; i++) {
		_ug = _ug + "&userGroup=" + _usergroup[i];
		Ti.API.info("UG: " + _ug);
		if (i == _usergroup.length - 1) {

			var url = Alloy.CFG.api.base + Alloy.CFG.api.post + "?limit=0&postType=1";
			var response;

			var xhr = Ti.Network.createHTTPClient({
				onload : function() {
					// handle the response

					try {
						response = this.responseText;
						//Ti.API.info("Response: " + response);
						var _response = JSON.parse(response);
						Ti.API.info("_response 11 : " + JSON.stringify(_response, null, 2));

						for (var i = 0; i < _response.length; i++) {
							Ti.App.Properties.setString('postid', _response[i].id);
							var row = Ti.UI.createTableViewRow({
								height : '120dp'
								//top : "50dp"
							});

							var imgView = Ti.UI.createImageView({
								width : "45dp",
								height : "45dp",
								left : "15dp",
								top : "10dp",
								image : "images/icons/homeScreenIcons/ViewResponses.png"

							});

							var container = Ti.UI.createView({
								left : "20%",
								layout : "vertical"
							});

							var title = Ti.UI.createLabel({
								text : _response[i].post,
								font : {
									fontFamily : "Century Gothic",
									fontWeight : "Bold",
									fontSize : "18dp"
								},
								color : "#d01227",
								left : '0%',
								width : '90%',
								height : '30%',
								top : "10dp"
							});

							var sendTo = Ti.UI.createLabel({
								text : "Sent to: " + _response[i].sendTo,
								font : {
									fontFamily : "Century Gothic",
									fontWeight : "Normal",
									fontSize : "14dp"
								},
								color : "#999999",
								top : '5dp',
								left : '0dp',
								width : '90%',
								height : '16dp'
							});

							var date = Ti.UI.createLabel({
								text : _response[i].updatedAtDate,
								font : {
									fontFamily : "Century Gothic",
									fontWeight : "Normal",
									fontSize : "14dp"
								},
								color : "#999999",
								top : '6dp',
								left : '0dp'
							});
							var border = Ti.UI.createView({
								height : "2dp",
								top : "110dp",
								backgroundColor : "red",
								width : "80%"
							});
							var commentCount = Ti.UI.createLabel({
								text : _response[i].commentCount + " comments",
								color : "#999999",
								bottom : '10%',
								right : '10%',
								font : {
									fontFamily : "Century Gothic",
									fontWeight : "Normal",
									fontSize : "14dp"
								}
							});

							container.add(title);
							container.add(sendTo);
							container.add(date);
							row.add(container);
							row.add(imgView);
							row.add(border);
							row.add(commentCount);
							//row.postType = _response[i].postType;
							row.id = _response[i].id;
							row.info = _response[i].sendTo;
							row.name = _response[i].post;
							row.date = _response[i].updatedAtDate;
							row.comments = _response[i].commentCount;

							tableData.push(row);

						}
						$.table.data = tableData;
						//Ti.API.info('messageDb:' + JSON.stringify(Alloy.Collections.messageDb.toJSON(), null, 2));
					} catch(e) {
						alert(e);
					}
				},
				onerror : function(e) {
					Ti.API.info(e.code);
					if (e.code == 401) {
						Alloy.createController('login/login').getView().open();
						//$.messageList.close();
					}
					////alert(e.code);
				}
			});

			xhr.open('GET', url);
			xhr.setRequestHeader("x-access-token", session);
			xhr.setRequestHeader("deviceid", encrypt("c3ff7453a0b44a69"));
			xhr.setRequestHeader("userid", encrypt(userid));
			//xhr.setRequestHeader("Content-Type", "application/json");

			xhr.send();
		}
	}
}

$.table.addEventListener('click', function(e) {

	Ti.API.info("onclick msg : " + JSON.stringify(e));
	var data = {

		name : e.row.name,
		info : "Sent to : " + e.row.info,
		date : e.row.date,
		id : e.row.id,
		comments : e.row.comments + " comments"
	};
	Ti.API.info("name 1 : " + JSON.stringify(e.row.name));
	Ti.API.info("date 1 : " + JSON.stringify(e.row.date));
	Ti.API.info("info 1 : " + JSON.stringify(e.row.info));
	Ti.API.info("id 1 : " + JSON.stringify(e.row.id));
	Alloy.createController('viewResponse/commentList', data).getView().open(slide_it_left);
	//$.messageList.close();

});

function nextTen(lastPostId) {

	var data = [];
	var tableData = [];
	var session = Ti.App.Properties.getString('sessionId');
	var userid = Ti.App.Properties.getString('userId');
	var _usergroup = [];
	var _ug = "?limit=" + lastPostId;
	for ( i = 0; i < Alloy.Globals.userGroup.length; i++) {
		_usergroup.push(Alloy.Globals.userGroup[i]);
	}

	for (var i = 0; i < _usergroup.length; i++) {
		_ug = _ug + "&userGroup=" + _usergroup[i];
		Ti.API.info("UG: " + _ug);
		if (i == _usergroup.length - 1) {

			var url = Alloy.CFG.api.base + Alloy.CFG.api.post + "?limit=" + lastPostId + "&postType=1";
			var response;

			var xhr = Ti.Network.createHTTPClient({
				onload : function() {
					// handle the response
					response = this.responseText;
					//Ti.API.info("Response: " + response);
					var _response = JSON.parse(response);
					Ti.API.info("_response 22 : " + JSON.stringify(_response, null, 2));

					if (_response.length > 0) {
						for (var i = 0; i < _response.length; i++) {
							Ti.App.Properties.setString('postid', _response[i].id);

							var row = Ti.UI.createTableViewRow({
								height : '120dp'
								//top : "50dp"
							});

							var imgView = Ti.UI.createImageView({
								width : "45dp",
								height : "45dp",
								left : "15dp",
								top : "10dp",
								image : "images/icons/homeScreenIcons/ViewResponses.png"

							});

							var container = Ti.UI.createView({
								left : "20%",
								layout : "vertical"
							});

							var title = Ti.UI.createLabel({
								text : _response[i].post,
								font : {
									fontFamily : "Century Gothic",
									fontWeight : "Bold",
									fontSize : "18dp"
								},
								color : "#d01227",
								left : '0%',
								width : '90%',
								height : '30%',
								top : "0dp"
							});

							var sendTo = Ti.UI.createLabel({
								text : "Sent to: " + _response[i].sendTo,
								font : {
									fontFamily : "Century Gothic",
									fontWeight : "Normal",
									fontSize : "14dp"
								},
								color : "#999999",
								top : '5dp',
								left : '0dp',
								width : '90%',
								height : '16dp'
							});

							var date = Ti.UI.createLabel({
								text : _response[i].updatedAtDate,
								font : {
									fontFamily : "Century Gothic",
									fontWeight : "Normal",
									fontSize : "14dp"
								},
								color : "#999999",
								top : '6dp',
								left : '0dp'
							});
							var border = Ti.UI.createView({
								height : "2dp",
								top : "115dp",
								backgroundColor : "red",
								width : "80%"
							});
							var commentCount = Ti.UI.createLabel({
								text : _response[i].commentCount + " comments",
								color : "#999999",
								bottom : '10%',
								right : '10%',
								font : {
									fontFamily : "Century Gothic",
									fontWeight : "Normal",
									fontSize : "14dp"
								}
							});

							container.add(title);
							container.add(sendTo);
							container.add(date);
							row.add(container);
							row.add(imgView);
							row.add(border);
							row.add(commentCount);
							//row.postType = _response[i].postType;
							row.id = _response[i].id;
							row.name = _response[i].post;
							row.info = _response[i].sendTo;
							row.date = _response[i].updatedAtDate;
							row.comments = _response[i].commentCount;
							tableData.push(row);

							row.addEventListener('click', function(e) {
								Ti.API.info("onclick inside nextten msg : " + JSON.stringify(e));
								var data = {

									name : e.row.name,
									info : e.row.info,
									date : e.row.date,
									id : e.row.id,
									comments : e.row.comments + " comments"
								};
								Ti.API.info("name 1 : " + JSON.stringify(e.row.name));
								Ti.API.info("date 1 : " + JSON.stringify(e.row.date));
								Ti.API.info("info 1 : " + JSON.stringify(e.row.info));
								Ti.API.info("id 1 : " + JSON.stringify(e.row.id));
								Alloy.createController('viewResponse/commentList', data).getView().open(slide_it_left);
								//$.messageList.close();

								alert("inside row onclick");
							});

						}
						$.table.appendRow(tableData);

					} else {
						allLoaded = true;

					}

				},
				onerror : function(e) {
					Ti.API.info(e.code);
					if (e.code == 401) {
						Alloy.createController('login/login').getView().open();
						//$.messageList.close();
					}
					////alert(e.code);
				}
			});

			xhr.open('GET', url);
			xhr.setRequestHeader("x-access-token", session);
			xhr.setRequestHeader("deviceid", encrypt("c3ff7453a0b44a69"));
			xhr.setRequestHeader("userid", encrypt(userid));
			//xhr.setRequestHeader("Content-Type", "application/json");

			xhr.send();
		}
	}
}

Comments

Sharif AbuDarda 2016-03-22

Hello, Please provide a minimal sample code which generate the issue that you described. The code you provided has additional components which makes the code hard to understand and test it in our environment. Please reduce the code to a smaller one which generates the issue. Also, please provide the complete steps to follow for regenerating the issue. Thanks.

Parmeet Singh 2016-03-23

Hi Sharif, I am adding the dummy code for your reference

   var args = arguments[0] || {};
   var data = [];
   var tableData = [];
   $.getNext.addEventListener('click', function(e) {
   	nextTen();
   });
   
   listing();
   
   $.table.addEventListener('click', function(e) {
   	alert("testing onClick");
   });
   
   function listing() {
   	for (var i = 0; i < 10; i++) {
   		Ti.API.info("inside");
   
   		var row = Ti.UI.createTableViewRow({
   			height : '120dp'
   		});
   		var imgView = Ti.UI.createImageView({
   			width : "45dp",
   			height : "45dp",
   			left : "15dp",
   			top : "10dp",
   			image : "images/icons/homeScreenIcons/ViewResponses.png"
   		});
   		var container = Ti.UI.createView({
   			left : "20%",
   			layout : "vertical"
   		});
   		var title = Ti.UI.createLabel({
   			text : "_response[i].post " + i,
   			font : {
   				fontFamily : "Century Gothic",
   				fontWeight : "Bold",
   				fontSize : "18dp"
   			},
   			color : "#000",
   			left : '0%',
   			width : '90%',
   			height : Ti.UI.SIZE,
   			top : "10dp"
   		});
   		var sendTo = Ti.UI.createLabel({
   			text : " _response[i].sendTo",
   			font : {
   				fontFamily : "Century Gothic",
   				fontWeight : "Normal",
   				fontSize : "14dp"
   			},
   			color : "#999999",
   			top : '5dp',
   			left : '0dp',
   			width : '90%',
   			height : Ti.UI.SIZE,
   		});
   		var date = Ti.UI.createLabel({
   			text : "_response[i].updatedAtDate",
   			font : {
   				fontFamily : "Century Gothic",
   				fontWeight : "Normal",
   				fontSize : "14dp"
   			},
   			color : "#999999",
   			top : '6dp',
   			left : '0dp'
   		});
   		var border = Ti.UI.createView({
   			height : "2dp",
   			top : "110dp",
   			backgroundColor : "red",
   			width : "80%"
   		});
   		var commentCount = Ti.UI.createLabel({
   			text : "_response[i].commentCount ",
   			color : "#999999",
   			bottom : '10%',
   			right : '10%',
   			font : {
   				fontFamily : "Century Gothic",
   				fontWeight : "Normal",
   				fontSize : "14dp"
   			}
   		});
   
   		container.add(title);
   		container.add(sendTo);
   		container.add(date);
   		row.add(container);
   		row.add(imgView);
   		row.add(border);
   		row.add(commentCount);
   		
   		tableData.push(row);
   
   	}
   	$.table.data = tableData;
   }
   
   function nextTen(lastPostId) {
   
   	var data = [];
   	var tableData = [];
   
   	for (var i = 0; i < 10; i++) {
   
   		var row = Ti.UI.createTableViewRow({
   			height : '120dp'
   			//top : "50dp"
   		});
   		var imgView = Ti.UI.createImageView({
   			width : "45dp",
   			height : "45dp",
   			left : "15dp",
   			top : "10dp",
   			image : "images/icons/homeScreenIcons/ViewResponses.png"
   		});
   		var container = Ti.UI.createView({
   			left : "20%",
   			layout : "vertical"
   		});
   		var title = Ti.UI.createLabel({
   			text : "_response[i].post" + i,
   			font : {
   				fontFamily : "Century Gothic",
   				fontWeight : "Bold",
   				fontSize : "18dp"
   			},
   			color : "#d01227",
   			left : '0%',
   			width : '90%',
   			height : Ti.UI.SIZE,
   			top : "0dp"
   		});
   		var sendTo = Ti.UI.createLabel({
   			text : "_response[i].sendTo",
   			font : {
   				fontFamily : "Century Gothic",
   				fontWeight : "Normal",
   				fontSize : "14dp"
   			},
   			color : "#999999",
   			top : '5dp',
   			left : '0dp',
   			width : '90%',
   			height : Ti.UI.SIZE,
   		});
   		var date = Ti.UI.createLabel({
   			text : "_response[i].updatedAtDate",
   			font : {
   				fontFamily : "Century Gothic",
   				fontWeight : "Normal",
   				fontSize : "14dp"
   			},
   			color : "#999999",
   			top : '6dp',
   			left : '0dp'
   		});
   		var border = Ti.UI.createView({
   			height : "2dp",
   			top : "115dp",
   			backgroundColor : "red",
   			width : "80%"
   		});
   		var commentCount = Ti.UI.createLabel({
   			text : " _response[i].commentCount",
   			color : "#999999",
   			bottom : '10%',
   			right : '10%',
   			font : {
   				fontFamily : "Century Gothic",
   				fontWeight : "Normal",
   				fontSize : "14dp"
   			}
   		});
   
   		container.add(title);
   		container.add(sendTo);
   		container.add(date);
   		row.add(container);
   		row.add(imgView);
   		row.add(border);
   		row.add(commentCount);
   		tableData.push(row);
   
   	}
   	$.table.appendRow(tableData);
   }
   $.index.open();

======================================================================== And the XML Code is : ========================================================================

   <Alloy>
   	<Window class="container">
   		<View layout="vertical" id="parent" top="10%" height="80%">
   			<TableView id="table"></TableView>
   		</View>
   		<View backgroundColor="#fcf2e2" height="10%"  bottom="0dp">
   			<ImageView id="getNext"  height="90%" width="80%" image="/images/icons/load_more.png" />
   		</View>
   	</Window>
   </Alloy>

Kota Iguchi 2016-03-28

Confirmed that it's fixed in latest master. TableView and ListView had big data model changes recently in TIMOB-19961 which is scheduled to release in 5.4.0. Since our code was bit messy and we had big changes there, I would like to move this ticket to 5.4.0. Does this sound good [~cwilliams] ? Test code (classic app)

   var win = Ti.UI.createWindow({
       backgroundColor: 'green',
       layout: 'vertical'
   });
   var button = Ti.UI.createButton({
       width: Ti.UI.FILL,
       height: '10%',
       title:'PUSH'
   });
   
   var table = Ti.UI.createTableView({
       width: Ti.UI.FILL, height: '80%'
   });
   var data = [];
   
   function listing() {
       for (var i = 0; i < 10; i++) {
           Ti.API.info("inside");
   
           var row = Ti.UI.createTableViewRow({
               height: '120dp'
               , rowId_test: 'test_' + i
           });
           var imgView = Ti.UI.createImageView({
               width: "45dp",
               height: "45dp",
               left: "15dp",
               top: "10dp",
               image: "images/icons/homeScreenIcons/ViewResponses.png"
           });
           var container = Ti.UI.createView({
               left: "20%",
               layout: "vertical"
           });
           var title = Ti.UI.createLabel({
               text: "_response[i].post " + i,
               font: {
                   fontFamily: "Century Gothic",
                   fontWeight: "Bold",
                   fontSize: "18dp"
               },
               color: "#000",
               left: '0%',
               width: '90%',
               height: Ti.UI.SIZE,
               top: "10dp"
           });
           var sendTo = Ti.UI.createLabel({
               text: " _response[i].sendTo",
               font: {
                   fontFamily: "Century Gothic",
                   fontWeight: "Normal",
                   fontSize: "14dp"
               },
               color: "#999999",
               top: '5dp',
               left: '0dp',
               width: '90%',
               height: Ti.UI.SIZE,
           });
           var date = Ti.UI.createLabel({
               text: "_response[i].updatedAtDate",
               font: {
                   fontFamily: "Century Gothic",
                   fontWeight: "Normal",
                   fontSize: "14dp"
               },
               color: "#999999",
               top: '6dp',
               left: '0dp'
           });
           var border = Ti.UI.createView({
               height: "2dp",
               top: "110dp",
               backgroundColor: "red",
               width: "80%"
           });
           var commentCount = Ti.UI.createLabel({
               text: "_response[i].commentCount ",
               color: "#999999",
               bottom: '10%',
               right: '10%',
               font: {
                   fontFamily: "Century Gothic",
                   fontWeight: "Normal",
                   fontSize: "14dp"
               }
           });
   
           container.add(title);
           container.add(sendTo);
           container.add(date);
           row.add(container);
           row.add(imgView);
           row.add(border);
           row.add(commentCount);
   
           data.push(row);
   
       }
       table.data = data;
   }
   function nextTen(lastPostId) {
       var tableData = [];
       for (var i = 0; i < 10; i++) {
   
           var row = Ti.UI.createTableViewRow({
               height: '120dp'
               , rowId_test: 'test_' + (lastPostId + i)
   
           });
           var imgView = Ti.UI.createImageView({
               width: "45dp",
               height: "45dp",
               left: "15dp",
               top: "10dp",
               image: "images/icons/homeScreenIcons/ViewResponses.png"
           });
           var container = Ti.UI.createView({
               left: "20%",
               layout: "vertical"
           });
           var title = Ti.UI.createLabel({
               text: "_response[i].post" + i,
               font: {
                   fontFamily: "Century Gothic",
                   fontWeight: "Bold",
                   fontSize: "18dp"
               },
               color: "#d01227",
               left: '0%',
               width: '90%',
               height: Ti.UI.SIZE,
               top: "0dp"
           });
           var sendTo = Ti.UI.createLabel({
               text: "_response[i].sendTo",
               font: {
                   fontFamily: "Century Gothic",
                   fontWeight: "Normal",
                   fontSize: "14dp"
               },
               color: "#999999",
               top: '5dp',
               left: '0dp',
               width: '90%',
               height: Ti.UI.SIZE,
           });
           var date = Ti.UI.createLabel({
               text: "_response[i].updatedAtDate",
               font: {
                   fontFamily: "Century Gothic",
                   fontWeight: "Normal",
                   fontSize: "14dp"
               },
               color: "#999999",
               top: '6dp',
               left: '0dp'
           });
           var border = Ti.UI.createView({
               height: "2dp",
               top: "115dp",
               backgroundColor: "red",
               width: "80%"
           });
           var commentCount = Ti.UI.createLabel({
               text: " _response[i].commentCount",
               color: "#999999",
               bottom: '10%',
               right: '10%',
               font: {
                   fontFamily: "Century Gothic",
                   fontWeight: "Normal",
                   fontSize: "14dp"
               }
           });
   
           container.add(title);
           container.add(sendTo);
           container.add(date);
           row.add(container);
           row.add(imgView);
           row.add(border);
           row.add(commentCount);
           tableData.push(row);
           data.push(row);
   
       }
       table.appendRow(tableData);
   }
   table.addEventListener('click', function (e) {
       alert(JSON.stringify(data[e.index].rowId_test));
   });
   button.addEventListener('click', function () {
       nextTen(data.length);
   })
   win.addEventListener('open', function () {
       listing();
   });
   win.add(button);
   win.add(table);
   win.open();

Christopher Williams 2016-03-28

Given that this fix was in a much larger refactor of the TableView/ListView code, I'm ok with just assigning it to 5.4.0 rather than trying to extract out the exact change that fixed the behavior for 5.3.0 release. Users needing this fix will have to use builds off master for now... appc ti idk install -b master
Josh Longton 2016-06-21

Verified as fixed. Tested on: Microsoft Lumia 640 (8.1) Windows Simulator (8.1) Microsoft Lumia 640 (10) Windows Simulator (10) Windows 10 Pro Studio: 4.7.0.201606150733 Ti SDK: 5.4.0.v20160617074028 Appc NPM: 4.2.7-2 App CLI: 5.4.0-18 Node v4.4.4 *Closing Ticket.*

JSON Source