Hi Mauricio,
I can definitely see why that might be useful ;)
The API on that piece could use some polish, but the latest demo (we will be pushing to the website soon) has an example of how to push data into a TextBoxList, but here's something I think should work for you:
From what I can tell, you want to incorporate it as part of a form where users may select options, and those options will persist across the form submit.
The way we handle this in Liferay is to push the entries to a hidden input that are comma-separated.
So let's say you want to add new entries into your TextBoxList, I'm assuming that you've stored the entries in a comma separated list on a hidden input like so:
Then, you could create your TextBoxList like in the demo:
Then you could prefill it with values from the hidden input like so:
Basically, every TextBoxList widget as an add, insert, and remove method that will let you manipulate the entries in there.
Now the question is, how to get the values back into the hidden input?
All TextBoxLists have an underlying DataSet object that is stored as an "entries" property.
You could do it one of two ways, depending on how you're submitting your form. If you're submitting your form like normal, you can just update the hidden form on submit, like so:
If you're submitting the form field via ajax, or want to update it every time an item is added or removed from the entry box, you can do this:
I hope that helps, but let me know if you have any other questions
I can definitely see why that might be useful ;)
The API on that piece could use some polish, but the latest demo (we will be pushing to the website soon) has an example of how to push data into a TextBoxList, but here's something I think should work for you:
From what I can tell, you want to incorporate it as part of a form where users may select options, and those options will persist across the form submit.
The way we handle this in Liferay is to push the entries to a hidden input that are comma-separated.
So let's say you want to add new entries into your TextBoxList, I'm assuming that you've stored the entries in a comma separated list on a hidden input like so:
<input name="hiddenInput" id="hiddenInput" value="test1,test2,test3">Then, you could create your TextBoxList like in the demo:
var TBL = new A.TextboxList(
{
dataSource: [
['NM', 'New Mexico', 'Land of Enchantment'],
['NY', 'New York', 'Empire State'],
['NC', 'North Carolina', 'First in Freedom'],
['ND', 'North Dakota', 'Peace Garden State'],
['OH', 'Ohio', 'The Heart of it All'],
['OK', 'Oklahoma', 'Oklahoma is OK'],
['OR', 'Oregon', 'Pacific Wonderland'],
['PA', 'Pennsylvania', 'Keystone State'],
['RI', 'Rhode Island', 'Ocean State']
],
schema: {
resultFields: ['name']
},
matchKey: 'name',
typeAhead: true,
contentBox: '#myAutoComplete',
width: 600
}
);
TBL.render('#demo');
Then you could prefill it with values from the hidden input like so:
var values = A.one('#hiddenInput').val().split(',');
A.each(values, TBL.add, TBL);Basically, every TextBoxList widget as an add, insert, and remove method that will let you manipulate the entries in there.
Now the question is, how to get the values back into the hidden input?
All TextBoxLists have an underlying DataSet object that is stored as an "entries" property.
You could do it one of two ways, depending on how you're submitting your form. If you're submitting your form like normal, you can just update the hidden form on submit, like so:
A.one('#form').on('submit', function(event) {
A.one('#hiddenInput').val(TBL.entries.keys.join());
});If you're submitting the form field via ajax, or want to update it every time an item is added or removed from the entry box, you can do this:
var updateHiddenInput = function(event){
A.one('#hiddenInput').val(TBL.entries.keys.join());
}
TBL.entries.after('add', updateHiddenInput);
TBL.entries.after('remove', updateHiddenInput);I hope that helps, but let me know if you have any other questions
Hello,
I know this is an old entry, but maybe somebody will answer
The problem is that in case similar to the one described, the following code:
works in Chrome, but does not in Firefox.
The behaviour is quite strange. When I modify the code above to:
I get alert window with proper values, but in form submitted the value of hiddenInput field is unchanged.
Any ideas how to work this out?
I know this is an old entry, but maybe somebody will answer
The problem is that in case similar to the one described, the following code:
Nate Cavanaugh:
Hi Mauricio,A.one('#form').on('submit', function(event) { A.one('#hiddenInput').val(TBL.entries.keys.join()); });
works in Chrome, but does not in Firefox.
The behaviour is quite strange. When I modify the code above to:
A.one('#form').on('submit', function(event) {
var node = A.one('#_20_hiddenInput');
A.one('#hiddenInput').val(TBL.entries.keys.join());
alert( node.attr('value') );
});I get alert window with proper values, but in form submitted the value of hiddenInput field is unchanged.
Any ideas how to work this out?
