You are viewing a plain text version of this content. The canonical link for it is here.
Posted to users@tapestry.apache.org by Jani Lindqvist <ac...@gmail.com> on 2006/08/08 15:25:27 UTC
dynamic comboboxes
Hi All,
I need a combobox that populates based on the selection of other combobox.
It´s pretty simple to do in jsp, but i want to convert it to a tapestry
component that just takes 2 collection as parameters. contents of the first
combobox and then a map of lists, with the id of the object contained in the
first combobox as a key.
I havent used javascript in tapestry, otherwise than call some functions
that are generated using Any component.
my jsp function generates couple of arrays holding the mappings and values
and when the first combobox is changed the function is called. i think i´ve
figured out from the documentation how to pass the name of the form and
component to the script so it can read the value that was changed but how do
i generate the arrays?
here is an example of one function generated in the jsp
function change_combo()
{
var comboone_value = new Array();
var comboone_title = new Array();
comboone_value[0] = "51";
comboone_title[0] = "username1";
comboone_value[1] = "37";
comboone_title[1] = "username2";
var combotwo_title = new Array();
var combotwo_value = new Array();
combotwo_title[51] = new Array();
combotwo_value[51] = new Array();
combotwo_value[51][0] = "296";
combotwo_title[51][0] = "Customer A";
combotwo_value[51][1] = "294";
combotwo_title[51][1] = "Customer B";
combotwo_value[51][2] = "297";
combotwo_title[51][2] = "Customer C";
combotwo_title[37] = new Array();
combotwo_value[37] = new Array();
combotwo_value[37][0] = "277";
combotwo_title[37][0] = "Customer 1";
combotwo_value[37][1] = "283";
combotwo_title[37][1] = "Customer 2";
combotwo_value[37][2] = "300";
combotwo_title[37][2] = "Customer 3";
var combo1_selection;
combo1_selection = document.customerCall.userId[
document.customerCall.userId.selectedIndex].value;
if (combo1_selection != 0) {
var combo2_values = combotwo_value[combo1_selection];
var combo2_titles = combotwo_title[combo1_selection];
if(combo2_values == null)
{
document.customerCall.customerId.options[0].value = "-";
document.customerCall.customerId.options[0].text = "-";
document.customerCall.customerId.length = 1;
} else
{
document.customerCall.customerId.length = combo2_values.length;
for(i=0;i<combo2_values.length;i++){
document.customerCall.customerId.options[i].value=
combo2_values[i];
document.customerCall.customerId.options[i].text=combo2_titles[i];
}
}
}else{
document.customerCall.customerId.options[0].value
= "-";
document.customerCall.customerId.options[0].text =
"-";
}
}
how do i do for loops in the script?
we´re thinking of upgrading to 4.1, is there some component that i could use
to populate the second one with ajax, so i would be spared of this
javascript generation?
Re: dynamic comboboxes
Posted by Pedro Viegas <pv...@gmail.com>.
One note about that handy doc page... a little error on it...
Where this is...
....
@Component(type = "Autocompleter", id = "projectSelect",
bindings = { "model=projectModel", "value=selectedProject",
"displayName=message:choose.project", "filterOnChange=true",
"validators=validators:required"})
public abstract Autocompleter getProjectSelection();
@EventListener(targets = "projectChoose", events = "selectOption")
public void projectSelected()
{
// do something
}
....
I think this should be instead...
....
@Component(type = "Autocompleter", id = "projectSelect",
bindings = { "model=projectModel", "value=selectedProject",
"displayName=message:choose.project", "filterOnChange=true",
"validators=validators:required"})
public abstract Autocompleter getProjectSelection();
@EventListener(targets = "projectSelect", events = "selectOption")
public void projectSelected()
{
// do something
}
....
And while I'm here... great job Jesse!
This EventListener annotation is just a little life saviour .
Regards,
On 8/8/06, Jesse Kuhnert <jk...@gmail.com> wrote:
>
> Yep. No need for all of that complexity with Tapestry. I would reccomend
> using the EventListener to do this. It should be a fairly simple task to
> update your second combo box when the first has a value selected in it.
>
> http://tapestry.apache.org/tapestry4.1/ajax/EventListener.html
>
> On 8/8/06, Jani Lindqvist <ac...@gmail.com> wrote:
> >
> > Hi All,
> >
> > I need a combobox that populates based on the selection of other
> combobox.
> > It´s pretty simple to do in jsp, but i want to convert it to a tapestry
> > component that just takes 2 collection as parameters. contents of the
> > first
> > combobox and then a map of lists, with the id of the object contained in
> > the
> > first combobox as a key.
> >
> > I havent used javascript in tapestry, otherwise than call some functions
> > that are generated using Any component.
> >
> > my jsp function generates couple of arrays holding the mappings and
> values
> > and when the first combobox is changed the function is called. i think
> > i´ve
> > figured out from the documentation how to pass the name of the form and
> > component to the script so it can read the value that was changed but
> how
> > do
> > i generate the arrays?
> >
> >
> > here is an example of one function generated in the jsp
> >
> > function change_combo()
> > {
> > var comboone_value = new Array();
> > var comboone_title = new Array();
> >
> >
> > comboone_value[0] = "51";
> >
> > comboone_title[0] = "username1";
> >
> > comboone_value[1] = "37";
> > comboone_title[1] = "username2";
> >
> >
> > var combotwo_title = new Array();
> > var combotwo_value = new Array();
> >
> >
> > combotwo_title[51] = new Array();
> > combotwo_value[51] = new Array();
> >
> >
> > combotwo_value[51][0] = "296";
> > combotwo_title[51][0] = "Customer A";
> >
> > combotwo_value[51][1] = "294";
> >
> > combotwo_title[51][1] = "Customer B";
> >
> > combotwo_value[51][2] = "297";
> > combotwo_title[51][2] = "Customer C";
> >
> >
> >
> >
> > combotwo_title[37] = new Array();
> > combotwo_value[37] = new Array();
> >
> >
> >
> > combotwo_value[37][0] = "277";
> > combotwo_title[37][0] = "Customer 1";
> >
> > combotwo_value[37][1] = "283";
> > combotwo_title[37][1] = "Customer 2";
> >
> > combotwo_value[37][2] = "300";
> >
> > combotwo_title[37][2] = "Customer 3";
> >
> >
> >
> >
> > var combo1_selection;
> > combo1_selection = document.customerCall.userId[
> > document.customerCall.userId.selectedIndex].value;
> >
> >
> >
> > if (combo1_selection != 0) {
> >
> >
> > var combo2_values = combotwo_value[combo1_selection];
> > var combo2_titles = combotwo_title[combo1_selection];
> > if(combo2_values == null)
> > {
> >
> > document.customerCall.customerId.options[0].value = "-";
> >
> > document.customerCall.customerId.options[0].text = "-";
> > document.customerCall.customerId.length = 1;
> > } else
> > {
> >
> >
> > document.customerCall.customerId.length = combo2_values.length;
> >
> >
> > for(i=0;i<combo2_values.length;i++){
> >
> > document.customerCall.customerId.options[i].value=
> > combo2_values[i];
> > document.customerCall.customerId.options
> > [i].text=combo2_titles[i];
> > }
> >
> >
> > }
> > }else{
> > document.customerCall.customerId.options[0].value
> > = "-";
> > document.customerCall.customerId.options[0].text =
> > "-";
> > }
> > }
> >
> >
> > how do i do for loops in the script?
> >
> > we´re thinking of upgrading to 4.1, is there some component that i could
> > use
> > to populate the second one with ajax, so i would be spared of this
> > javascript generation?
> >
> >
>
>
> --
> Jesse Kuhnert
> Tacos/Tapestry, team member/developer
>
> Open source based consulting work centered around
> dojo/tapestry/tacos/hivemind.
>
>
--
Pedro Viegas
Re: dynamic comboboxes
Posted by Jesse Kuhnert <jk...@gmail.com>.
Yep. No need for all of that complexity with Tapestry. I would reccomend
using the EventListener to do this. It should be a fairly simple task to
update your second combo box when the first has a value selected in it.
http://tapestry.apache.org/tapestry4.1/ajax/EventListener.html
On 8/8/06, Jani Lindqvist <ac...@gmail.com> wrote:
>
> Hi All,
>
> I need a combobox that populates based on the selection of other combobox.
> It´s pretty simple to do in jsp, but i want to convert it to a tapestry
> component that just takes 2 collection as parameters. contents of the
> first
> combobox and then a map of lists, with the id of the object contained in
> the
> first combobox as a key.
>
> I havent used javascript in tapestry, otherwise than call some functions
> that are generated using Any component.
>
> my jsp function generates couple of arrays holding the mappings and values
> and when the first combobox is changed the function is called. i think
> i´ve
> figured out from the documentation how to pass the name of the form and
> component to the script so it can read the value that was changed but how
> do
> i generate the arrays?
>
>
> here is an example of one function generated in the jsp
>
> function change_combo()
> {
> var comboone_value = new Array();
> var comboone_title = new Array();
>
>
> comboone_value[0] = "51";
>
> comboone_title[0] = "username1";
>
> comboone_value[1] = "37";
> comboone_title[1] = "username2";
>
>
> var combotwo_title = new Array();
> var combotwo_value = new Array();
>
>
> combotwo_title[51] = new Array();
> combotwo_value[51] = new Array();
>
>
> combotwo_value[51][0] = "296";
> combotwo_title[51][0] = "Customer A";
>
> combotwo_value[51][1] = "294";
>
> combotwo_title[51][1] = "Customer B";
>
> combotwo_value[51][2] = "297";
> combotwo_title[51][2] = "Customer C";
>
>
>
>
> combotwo_title[37] = new Array();
> combotwo_value[37] = new Array();
>
>
>
> combotwo_value[37][0] = "277";
> combotwo_title[37][0] = "Customer 1";
>
> combotwo_value[37][1] = "283";
> combotwo_title[37][1] = "Customer 2";
>
> combotwo_value[37][2] = "300";
>
> combotwo_title[37][2] = "Customer 3";
>
>
>
>
> var combo1_selection;
> combo1_selection = document.customerCall.userId[
> document.customerCall.userId.selectedIndex].value;
>
>
>
> if (combo1_selection != 0) {
>
>
> var combo2_values = combotwo_value[combo1_selection];
> var combo2_titles = combotwo_title[combo1_selection];
> if(combo2_values == null)
> {
>
> document.customerCall.customerId.options[0].value = "-";
>
> document.customerCall.customerId.options[0].text = "-";
> document.customerCall.customerId.length = 1;
> } else
> {
>
>
> document.customerCall.customerId.length = combo2_values.length;
>
>
> for(i=0;i<combo2_values.length;i++){
>
> document.customerCall.customerId.options[i].value=
> combo2_values[i];
> document.customerCall.customerId.options
> [i].text=combo2_titles[i];
> }
>
>
> }
> }else{
> document.customerCall.customerId.options[0].value
> = "-";
> document.customerCall.customerId.options[0].text =
> "-";
> }
> }
>
>
> how do i do for loops in the script?
>
> we´re thinking of upgrading to 4.1, is there some component that i could
> use
> to populate the second one with ajax, so i would be spared of this
> javascript generation?
>
>
--
Jesse Kuhnert
Tacos/Tapestry, team member/developer
Open source based consulting work centered around
dojo/tapestry/tacos/hivemind.