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: users-unsubscr...@wicket.apache.org
For additional commands, e-mail: users-h...@wicket.apache.org
