This might be of zero use to you, but I had something similar where I was exposing a table row by button/link. I created a somewhat generic solution and posted it here: https://github.com/wspeirs/wicket-details-table
Bill- On Thu, Dec 6, 2012 at 12:40 PM, shimin_q <[email protected]> wrote: > I have a table that includes only two rows when it is first loaded, but > later, depending on the selected value of the first row, I will need to add > a number of rows to the table. I assume it is a quite common AJAX task, is > there a recommended way to do this? My existing way of handing this has > run > into an issue where all the DropDownChoice (select option menu on HTML) > components that were dynamically added to the table are unable to display > the selected value after user selection, so I am trying to figure out if it > is due to my existing AJAX code... (I am using latest wicket 6.3 and > jQuery mobile 1.8.2) > > Here is the html portion: > > > <body> > <div data-role="page" data-theme="b"> > <div data-role="header" data-theme="b" id="header"> > message > > </div> > <form id="createMPForm" wicket:id="createMPForm"> > > > > > > > <label for="profileType" wicket:id="profileTypeLabel" > class="requiredLabel">Metaprofile Type</label> > <select id="profileType" name="profileType" > wicket:id="type"> > <option>default</option> > </select> > > > > <label for="profileName" wicket:id="profileNameLabel" > class="requiredLabel">Metaprofile > Name</label> > <input name="profileName" type="text" id="profileName" > wicket:id="profileName"/> > > > > > > > <label for="oxeNode" wicket:id="oxeNodeLabel" > class="requiredLabel">OXE Node</label> > <select id="oxeNode" name="oxeNode" wicket:id="oxeNode"> > <option selected>OXENode</option> > </select> > > > > <label for="range" wicket:id="rangeLabel" > class="requiredLabel">Free Number Range</label> > <select name="range" id="range" wicket:id="range"/> > > > > <label for="deviceType" wicket:id="deviceTypeLabel" > class="requiredLabel">Device Type</label> > <select name="deviceType" wicket:id="deviceType"> > <option selected>SIP Extension</option> > </select> > > ... > > > Now the Wicket code for these: > > profileTypeBox = new > DropDownChoice<MetaProfileType>("type", > new > PropertyModel<MetaProfileType>(profile, "type"), > Arrays.asList(MetaProfileType.values()), > new IChoiceRenderer<MetaProfileType>() { > private static final long > serialVersionUID = 1L; > @Override > public Object > getDisplayValue(MetaProfileType object) { > return object.name(); > } > @Override > public String > getIdValue(MetaProfileType object, int index) { > return object.name(); > } > } > ); > profileTypeBox.setOutputMarkupId(true); > add(profileTypeBox); > > profileTypeBox.add(new > AjaxFormComponentUpdatingBehavior("onChange") { > private static final long serialVersionUID = 1L; > protected void onUpdate(AjaxRequestTarget target) { > resetFieldsPerProfileType(target); > //add any component that will be called in > resetFieldsPerProfileType() > target.add(oxeNodeAsteriskImg); > target.add(oxeNodeLabel); > target.add(oxeNodeBox); > target.add(rangeAsteriskImg); > target.add(rangeLabel); > target.add(freeNumRangeBox); > target.add(deviceTypeAsteriskImg); > target.add(deviceTypeLabel); > target.add(deviceTypeBox); > //... > }; > }); > > //... > oxeNodeModel = new > LoadableDetachableModel<List<String>>() { > private static final long serialVersionUID > = 1L; > @Override > protected List<String> load() { > try { > List<String> names = null; > if ((profile!=null) && > (profile.getType().equals(MetaProfileType.OXE) > || profile.getType().equals(MetaProfileType.OXE_WITH_OT))) > names = > getOXENodeList(); > if (names == null) > return > Collections.emptyList(); > else { > return names; > } > } > catch (Exception e) { > return > Collections.emptyList(); > } > } > }; > } > oxeNodeBox = new DropDownChoice("oxeNode", > new PropertyModel<String>(profile, "oxeNodeName"), > oxeNodeModel); > > IChoiceRenderer<String> rendererd = new > IChoiceRenderer<String>() { > private static final long serialVersionUID = 1L; > public Object getDisplayValue(String str) { > return str; > } > public String getIdValue(String str, int index) { > return str; > } > }; > > oxeNodeBox.setChoiceRenderer(rendererd); > oxeNodeBox.setEnabled(!disableOXENode); > oxeNodeBox.setOutputMarkupId(true); > add(oxeNodeBox); > //... > IModel<List<UserDeviceType>> deviceTypes = new > LoadableDetachableModel<List<UserDeviceType>>() { > public List<UserDeviceType> load() { > return getDeviceTypeList(); > } > }; > deviceTypeBox = new > DropDownChoice<UserDeviceType>("deviceType", new > PropertyModel<UserDeviceType>(profile, "stationType"), deviceTypes); > deviceTypeBox.setNullValid(true); > IChoiceRenderer<UserDeviceType> renderer = new > IChoiceRenderer() { > public Object getDisplayValue(Object obj) { > UserDeviceType c = (UserDeviceType) obj; > return c.getLocalizedName(); > } > public String getIdValue(Object obj, int index) { > UserDeviceType c = (UserDeviceType) obj; > return c.getldapName(); > } > }; > > deviceTypeBox.setChoiceRenderer(renderer); > deviceTypeBox.setOutputMarkupId(true); > add(deviceTypeBox); > //... > > protected void resetFieldsPerProfileType(AjaxRequestTarget target) > { > MetaProfileType selectedProfileType = > profileTypeBox.getModelObject(); > if (selectedProfileType.equals(MetaProfileType.OXE)) > { > oxeNodeAsteriskImg.add(new > AttributeModifier("style", "display:")); > oxeNodeLabel.add(new AttributeModifier("class", > "requiredLabel")); > oxeNodeBox.setChoices(getOXENodeList()); > oxeNodeBox.add(new AttributeModifier("style", > "display:")); > profile.setOxeNodeName(null); > > rangeAsteriskImg.add(new > AttributeModifier("style", "display:")); > rangeLabel.add(new AttributeModifier("class", > "requiredLabel")); > freeNumRangeBox.setChoices(new > ArrayList<String>()); > profile.setFreeNumberRange(null); > deviceTypeAsteriskImg.add(new > AttributeModifier("style", "display:")); > deviceTypeLabel.add(new AttributeModifier("class", > "requiredLabel")); > > profile.setType(MetaProfileType.OXE); > //... > } > > > > > > -- > View this message in context: > http://apache-wicket.1842946.n4.nabble.com/Recommended-way-to-hide-and-show-table-rows-dynamically-tp4654560.html > Sent from the Users forum mailing list archive at Nabble.com. > > --------------------------------------------------------------------- > To unsubscribe, e-mail: [email protected] > For additional commands, e-mail: [email protected] > >
