Fóruns

Início » Liferay Portal » English » 3. Development

Visualização combinada Visão plana Exibição em árvore
Tópicos [ Anterior | Próximo ]
toggle
Mauricio Saglietto
Alloy TextBoxList
4 de Julho de 2010 17:51
Resposta

Mauricio Saglietto

Ranking: New Member

Mensagens: 3

Data de entrada: 4 de Julho de 2010

Mensagens recentes

Hi all..
I'm working on a portlet and trying to implement a TexboxList from Alloy... i followed the example from: http://alloy.liferay.com/demos.php?demo=textbox_list ...

What want to do is a form to save the selected options...
Then I need to get the data.. what is the point of having a textfield if I can get the data that the user selected xD ... and don't see how to in the example...
And following the same reasoning .. I don't now how i have to do to have some data pre load.. for when the user want to edit the selection...

Can someone give me some directions to do this?

And one last thing .. there is any example out there to load the datasource from a servlet or something like that? ..
Nate Cavanaugh
RE: Alloy TextBoxList
6 de Julho de 2010 09:30
Resposta

Nate Cavanaugh

LIFERAY STAFF

Ranking: Junior Member

Mensagens: 67

Data de entrada: 27 de Novembro de 2006

Mensagens recentes

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:
1<input name="hiddenInput" id="hiddenInput" value="test1,test2,test3" />


Then, you could create your TextBoxList like in the demo:

 1var TBL = new A.TextboxList(
 2    {
 3        dataSource: [
 4            ['NM', 'New Mexico', 'Land of Enchantment'],
 5            ['NY', 'New York', 'Empire State'],
 6            ['NC', 'North Carolina', 'First in Freedom'],
 7            ['ND', 'North Dakota', 'Peace Garden State'],
 8            ['OH', 'Ohio', 'The Heart of it All'],
 9            ['OK', 'Oklahoma', 'Oklahoma is OK'],
10            ['OR', 'Oregon', 'Pacific Wonderland'],
11            ['PA', 'Pennsylvania', 'Keystone State'],
12            ['RI', 'Rhode Island', 'Ocean State']
13        ],
14        schema: {
15            resultFields: ['name']
16        },
17        matchKey: 'name',
18        typeAhead: true,
19        contentBox: '#myAutoComplete',
20        width: 600
21    }
22);
23
24TBL.render('#demo');


Then you could prefill it with values from the hidden input like so:

1var values = A.one('#hiddenInput').val().split(',');
2
3A.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:

1A.one('#form').on('submit', function(event) {
2A.one('#hiddenInput').val(TBL.entries.keys.join());
3});



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:

1var updateHiddenInput = function(event){
2A.one('#hiddenInput').val(TBL.entries.keys.join());
3}
4
5TBL.entries.after('add', updateHiddenInput);
6TBL.entries.after('remove', updateHiddenInput);


I hope that helps, but let me know if you have any other questions emoticon
Mauricio Saglietto
RE: Alloy TextBoxList
6 de Julho de 2010 16:22
Resposta

Mauricio Saglietto

Ranking: New Member

Mensagens: 3

Data de entrada: 4 de Julho de 2010

Mensagens recentes

Thanks for your answer Nate, the way it works is little bit complicated... I will check it because im needing the key and name of each element...

Look at this http://www.emposha.com/javascript/fcbkcomplete.html ... they make a input hidden for each element.. and will submit as array..
Andrius Kurtinaitis
RE: Alloy TextBoxList
9 de Julho de 2010 07:16
Resposta

Andrius Kurtinaitis

Ranking: Junior Member

Mensagens: 62

Data de entrada: 24 de Janeiro de 2010

Mensagens recentes

Hello,
1TBL.entries.keys.join()
returns the names of the states. What can I do to get the keys?
Ex.: AL,AK,AZ,AR
Andrius Kurtinaitis
RE: Alloy TextBoxList
9 de Julho de 2010 08:24
Resposta

Andrius Kurtinaitis

Ranking: Junior Member

Mensagens: 62

Data de entrada: 24 de Janeiro de 2010

Mensagens recentes

Furthermore,
1A.each(values, TBL.add, TBL);
would add only labels, what about keys?
Akash Mohan Patil
RE: Alloy TextBoxList
21 de Abril de 2011 14:36
Resposta

Akash Mohan Patil

Ranking: Junior Member

Mensagens: 70

Data de entrada: 12 de Dezembro de 2010

Mensagens recentes

hey Andrius ,

did u get the solution for below's question . .?



Hello,
1TBL.entries.keys.join()
returns the names of the states. What can I do to get the keys?
Ex.: AL,AK,AZ,AR




Please help me to find out.

Thanks in advance,
Akash Patil
Aikon Labs Pvt. Ltd. IND
Hitoshi Ozawa
RE: Alloy TextBoxList
21 de Abril de 2011 15:02
Resposta

Hitoshi Ozawa

Ranking: Liferay Legend

Mensagens: 7954

Data de entrada: 23 de Março de 2010

Mensagens recentes



Hello,
1TBL.entries.keys.join()
returns the names of the states. What can I do to get the keys?
Ex.: AL,AK,AZ,AR



Aren't they the keys?
Which values in the following do you want to get?
['NM', 'New Mexico', 'Land of Enchantment']
Akash Mohan Patil
RE: Alloy TextBoxList
21 de Abril de 2011 22:08
Resposta

Akash Mohan Patil

Ranking: Junior Member

Mensagens: 70

Data de entrada: 12 de Dezembro de 2010

Mensagens recentes

hey Hitoshi Ozawa,
Thanks for your response,

The above code returns New Mexico, New York .
But i want is NM,NY format.

Please help me to find it.

Thanks,
Akash Patil
Hitoshi Ozawa
RE: Alloy TextBoxList
21 de Abril de 2011 22:53
Resposta

Hitoshi Ozawa

Ranking: Liferay Legend

Mensagens: 7954

Data de entrada: 23 de Março de 2010

Mensagens recentes

It seems it's only possible to add one element. May be set matchKey: 'key' and retrieve the name from the key to other object.
Katarzyna B
RE: Alloy TextBoxList
26 de Março de 2012 13:32
Resposta

Katarzyna B

Ranking: New Member

Mensagens: 18

Data de entrada: 7 de Janeiro de 2012

Mensagens recentes

Hello,

I know this is an old entry, but maybe somebody will answer emoticon

The problem is that in case similar to the one described, the following code:
Nate Cavanaugh:
Hi Mauricio,

1A.one('#form').on('submit', function(event) {
2A.one('#hiddenInput').val(TBL.entries.keys.join());
3});




works in Chrome, but does not in Firefox.

The behaviour is quite strange. When I modify the code above to:
1A.one('#form').on('submit', function(event) {
2var node = A.one('#_20_hiddenInput');
3A.one('#hiddenInput').val(TBL.entries.keys.join());
4alert( node.attr('value') );
5});


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?
Marco Napolitano
RE: Alloy TextBoxList
18 de Dezembro de 2012 06:16
Resposta

Marco Napolitano

Ranking: New Member

Mensagens: 19

Data de entrada: 14 de Fevereiro de 2012

Mensagens recentes

Nate Cavanaugh:
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:
1<input name="hiddenInput" id="hiddenInput" value="test1,test2,test3" />

[...]


Hi Nate,
your example works great but I/we need a little more.
Your dataSource contains something like:
1['NM', 'New Mexico', 'Land of Enchantment']

and the matchKey attribute is name; so the element shows New Mexico.
But on submit I need to have NM passed to the portlet and not the label New Mexico.

How can I do?

Tnx
Marco