You are viewing a plain text version of this content. The canonical link for it is here.
Posted to users@wicket.apache.org by shimin_q <sm...@hotmail.com> on 2012/12/06 18:40:25 UTC
Recommended way to hide and show table rows dynamically?
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-unsubscribe@wicket.apache.org
For additional commands, e-mail: users-help@wicket.apache.org
Re: Recommended way to hide and show table rows dynamically?
Posted by William Speirs <ws...@apache.org>.
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 <sm...@hotmail.com> 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: users-unsubscribe@wicket.apache.org
> For additional commands, e-mail: users-help@wicket.apache.org
>
>