Get Value from textField in TableView
How do I create a event listener to capture the values of each textfield created in the data array?
data = [];
data[0] = Ti.UI.createTableViewSection({ headerView:headerView });
data[1] = addRow('First Name');
data[2] = addRow('Last Name');
data[3] = addRow('E-Mail');
data[4] = addRow('Password');
data[5] = addRow('Confirm Password');
tableView = Ti.UI.createTableView({
data:data,
style: Titanium.UI.iPhone.TableViewStyle.GROUPED
});
I am calling this function for each data row to create the label and the textfield
function addRow(labelName)
{
row = Ti.UI.createTableViewRow({height:50});
label = Titanium.UI.createLabel({
font:{fontSize:13,fontFamily:'Helvetica Neue', fontWeight:'bold'},
color: '#666',
text: labelName,
left: 5,
height:'auto',
width:'auto',
textAlign:'left'
});
row.add(label);
tf1 = Titanium.UI.createTextField({
font:{fontSize:18,fontFamily:'Marker Felt', fontWeight:'bold'},
color:'#888',
height:35,
top:10,
right:10,
width:190,
textAlign: 'right',
borderStyle:Titanium.UI.INPUT_BORDERSTYLE_NONE
});
if((labelName == 'First Name') || (labelName == 'Last Name')){
tf1.autocorrect = false;
}
if(labelName == 'Phone'){
tf1.keyboardType = Titanium.UI.KEYBOARD_NUMBER_PAD;
}
if(labelName == 'E-Mail'){
tf1.keyboardType = Titanium.UI.KEYBOARD_EMAIL;
}
row.add(tf1);
row.selectionStyle = Ti.UI.iPhone.TableViewCellSelectionStyle.NONE;
return row;
}
4 Answers
-
This is probably the incorrect way of doing (Im looking for this answer too) but I had it working by adding the event listener into the addRow function.
So put it in before return row:
tf1.addEventListener('blur', function(e){ var txtf = e.source; //do stuff with it such as e.value or txtf.mycustomproperty }
Like I said it appears to work, but the scope makes it seem like its the wrong way of doing it. Im not sure either way.
-
This is probably the incorrect way of doing (Im looking for this answer too) but I had it working by adding the event listener into the addRow function.
So put it in before return row:
tf1.addEventListener('blur', function(e){ var txtf = e.source; //do stuff with it such as e.value or txtf.mycustomproperty }
Like I said it appears to work, but the scope makes it seem like its the wrong way of doing it. Im not sure either way.
-
I think I found a better solution, though now I cant find the source (it somewhere in the Q&As). It appears the best way is to create a seperate function that takes a textfield as a parameter and then creates an event listener for it.
So you'll have something like this:
function addEvent(textfield){ textfield.addEventListener('blur', function(e){ tf = e.source; //do stuff }); };
Then in your code when you are filling up your tableView data or when you change it you'll be passing rows around so right after use the same data reference to add the event listener like this:
//data is an array of rows //addRow() returns a new row w/ a textbox as the first child data[i] = addRow(name, id); addEvent(data[i].children[0]);
or for table modification work:
//newRow() returns a row w/ a textfield as the first child tableView.insertRowBefore(0, newRow(), {animationStyle:Titanium.UI.iPhone.RowAnimationStyle.DOWN}); addEvent(tableView.data[0].rows[0].children[0]);
It works but I havent had a chance to test performance or see if its an optimal solution but at least it seems cleaner.
-
Hi, is this the best solution so far? Thanks!