i follow this example but I want to change it. I want to select row when you click wherever on the certain row not just to some value so I add AjaxEventBehavior. Problem is that player is selected but colour of row is still same. What is wrong ?
listItem.add(new AjaxEventBehavior("onclick") {
private static final long serialVersionUID = 1L;
#Override
protected void onEvent(final AjaxRequestTarget target) {
selectedPlayer = player;
HighlitableDataItem<Player> hitem = (HighlitableDataItem<Player>) listItem;
hitem.toggleHighlite();
}
});
As #jordeu already pointed out in his comment, you've got to add hitem to the AjaxRequestTarget:
target.addComponent(hitem);
Adding the component to the AjaxRequestTarget will send back to the XML response the markup of the component, with all the changes you've possibily made to it server-side, and with updated models (this is useful for dynamic models). Remember to invoke setOutputMarkupId(true) on the components you want to add to the request target. Wicket needs the markup id (HTML id attribute) to know where in the DOM to replace the markup sent in the XML response. Or, in words of the javadoc:
A component whose markup needs to be updated should be added to this
target via AjaxRequestTarget#addComponent(Component) method. Its body
will be rendered and added to the envelope when the target is
processed, and refreshed on the client side when the ajax response is
received.
It is important that the component whose markup needs to be updated
contains an id attribute in the generated markup that is equal to the
value retrieved from Component#getMarkupId(). This can be accomplished
by either setting the id attribute in the html template, or using an
attribute modifier that will add the attribute with value
Component#getMarkupId() to the tag ( such as MarkupIdSetter )
Also, take into account that using Ajax to just style an element can be kind of an overkill. If no server interaction is required, you might consider styling the element client-side with Javascript/jQuery if available.
The most efficient way is to render javaScript into your table. Doing so you avoid roundtrips to the server, which would be overkill in this simple just-for-styling case.
You acheive it with overriding DataTable#newRowItem and adding AttributeAppender to the RowItem :
//override this method of the DataTable class
#Override
protected Item<T> newRowItem(String id, int index, final IModel<T> model) {
Item<T> rowItem = new Item<T>(id, index, model);
item.add(new AttributeAppender("onclick", "$(this).addClass('selected').siblings().removeClass('selected')",
" "));
return rowItem;
}
Define your selection styling under 'selected' selector in your css stylesheet.
Related
Trying to add a filter form to a standard crud 'list' page.
// set filter defaults
ImageFilter defaultFilter = new ImageFilter();
defaultFilter.setYear(currentYear);
defaultFilter.setColor(user.getFavouriteColor());
// get filter for view
Form<ImageFilter> form = Form.form(ImageFilter.class).fill(defaultFilter).bindFromRequest();
ImageFilter filter = form.get()
bindFromRequest() alone gets a form with the filters a user specified, but on first load the fields have no selected value
fill(defaultFilter) alone does provide a form with the default filters selected
chained in this way the behaviour is just identical to the behaviour of the one called last.
What is the appropriate way to set the defaults?
Ideally, on the index page:
the default filter selection when not given any parameters
if requested with ?year=2010&color=blue those filters show on the form
if requested with ?year=2010 the form shows 2010 and the user's favourite color
Check if default values are present then go with the flow.
If not present, add set it in filter or render on UI using querystring params.
You can achieve what you want by splitting your code into two actions.
In the first one you fill a form with the default filter and display it to a user.
public static Result show() {
ImageFilter defaultFilter = new ImageFilter();
defaultFilter.setYear(currentYear);
defaultFilter.setColor(user.getFavouriteColor());
Form<ImageFilter> form = Form.form(ImageFilter.class).fill(defaultFilter);
return ok(index.render(form));
}
In the second action you simply bind form values from the request. If user changes some values form will be filled with them along with unchanged ones set as the defaults.
public static Result handle() {
Form<ImageFilter> form = Form.form(ImageFilter.class).bindFromRequest();
ImageFilter filter = form.get();
return ok("TODO handle form");
}
Edit
If you want to fill missing fields with the defaults after user input without showing them in the view before submit I'm afraid you'll have to do it manually after binding.
I have an ajax enabled list of records that I'm going through and each one has a dropdown box that I'm trying to make a required field for the form to submit. To complicate matters the 'Close Record' button is not the submit button so I can't just use required attribute on the select(dropdown box) that I'm using. The value for the selected dropdown box is saved in an Enterprise Java Bean so I thought I could just write a JavaScript function to check the value:
function CheckForm() {
var clearObj = document.getElementById("mySelect");
if(clearObj.value != "") {
return true;
} else {
clearObj.style.backgroundColor ='yellow';
}
return false;
}
This doesn't work because once I close one and go to the next it's maintaining the value of the previous record on the page. Basically I have an update-content event that I need to know how to handle. Any ideas as to how to manipulate the DOM or JSON object to make this select a required field? Thanks.
With the little information given, I would assume that when you close the existing record and then loading the next record, you are doing it through an ajax request. If thats the case, then you can add a call back for the ajax request, which would reset the drop down.
This should be a comment, but as you see, I dont have 50 points :-)
I am trying to make a filter for a searchfield where a number of checkboxes can be checked to choose what people want to search. I am currently trying to do this with the CheckGroup component but as I do not have a submit button I do not know how I can retrieve the latest checked objects. One thought of doing it was using Javascript, to call a function in Javascript and retrieve all the checkboxes like that. I currently have the following code in Wicket. So my question would be how to do this and if it is possible to not do this with Javascript. I have tried using AjaxFormChoiceComponentBehaviour and that works but since it does a post whenever a checkbox is checked, I think JS would be a better option.
public Filter(String id) {
super(id);
form = new Form("filterform");
types = resultItemHandlerPool.getTypes();
checkGroup = new CheckGroup<Class<?>>("checkGroup", new PropertyModel<Collection<Class<?>>>(this,"types"));
ListView typesListview = new ListView<Class<?>>("typesList", new PropertyModel<List<? extends Class<?>>>(this,"types")) {
#Override
protected void populateItem(final ListItem<Class<?>> item) {
item.add(new Check<Class<?>>("check", item.getModel()));
item.add(new Label("className", item.getModelObject().getSimpleName()));
}
};
typesListview.setReuseItems(true);
checkGroup.add(typesListview);
form.add(checkGroup);
add(form);
}
public List<Class<?>> getSearchableTypes() {
return types;
}
Thanks and kind regards,
Merlijn
You say you want to do the search server side. So, the server needs to know which items are checked in order to do the search.
Just use a plain old form for the searchfield (including checkboxes) and make it so that after entering the search-value the user posts the form. That way, the serverside code will receive the search value and the list of checked checkboxes and will know exactly what to search for.
AjaxFormChoiceComponentBehaviour does indeed update the server side Checkgroup after every click with an ajax post. If you only need to know the value of the Checkgroup after posting the search value, just don't use the AjaxFormChoiceComponentBehaviour and submit the form. Both a normal form submit and an ajax submit will work here.
I'm new to Struts 1 so may be its already a resolved question.
The situation is: I have a list of <html:multibox> tag, which are rendered into html-checkbox element when the page loads. I want the checkboxes to be checked by default (without using javascript/jquery).
You would set the fields in your Form if you want them selected. For multiple checkboxes with all the same name but different values, your Form should have a String[] property that holds all the selected values. Just populate that with the values you want selected by default. This could be something as simple as:
public void reset(ActionMapping mapping, HttpServletRequest request) {
if(multiboxField == null) {
multiboxField = new String[2];
multiboxField[0] = "optionOne";
multiboxField[1] = "optionTwo";
}
}
The best way to do this is with a *formname*SetupAction.java class.
Set your struts-config.xml to redirect people who click on your page to this SetupAction. Import your form class, populate your String[] with whatever values you want default-checked, and action-forward them back to your page. This also allows you to dynamically populate them, based on DB data or session variables or whatever you want.
Hy,
I want to display a certain part (a div for example) of my wicket-template only under a certain condition (for example only if I have the data to fill it). The problem is:
If I only add the panel (filling the div) if I got the data, an exception is thrown every time I call the page without the data (because the referenced wicket-id is not added to the component-tree).
The only solution which came to my mind was to add a empty panel if there is no data. This is not an ideal solution because I got some unneeded code in the java-code and many empty divs in my rendered html.
So is there a better solution to include several parts of a wicket-template only under a condition?
Although this is an old question here could be one more solution: wicket:enclosure (and this )
Update: Now I needed this functionality by my self (for jetwick). I'm using WebMarkupContainer one for loggedIn state and one for loggedOut state and set the right visibility:
if (loggedIn()) {
WebMarkupContainer loggedInContainer = new WebMarkupContainer("loggedIn");
//## do something with the user
User user = getUserSomeWhere();
loggedInContainer.add(new UserSearchLink("userSearchLink"));
add(loggedInContainer);
add(WebMarkupContainer("loggedOut").setVisible(false));
} else {
add(new WebMarkupContainer("loggedIn").setVisible(false));
WebMarkupContainer loggedOutContainer = WebMarkupContainer("loggedOut");
loggedOutContainer.add(new LoginLink() {...});
add(loggedOutContainer);
}
The advantage of this for me is that I prevent a NullpointerExc in the //## marked line and the enclose feature of wicket would look more ugly to me in this case I think.
Like #miaubiz said, you can call setVisible(false), or you can override the isVisible() method, if the visibility is conditional to some other state (fields filled, for example).
Yup, you want to override isVisible. This will keep the isVisible=false html markup from even rendering to the final html page. Also, according to the docs (mentioned in EmptyPanel), you can use the WebMarkupContainer as the wrapping component.
this.add(new SimpleResourceModelLabel(NO_DATA_LABEL){
private static final long serialVersionUID = 1L;
#Override
public boolean isVisible() { return myList.isEmpty(); }
});
final WebMarkupContainer table = new WebMarkupContainer(MY_DATA_TABLE){
private static final long serialVersionUID = 1L;
#Override
public boolean isVisible() { return !myList.isEmpty(); }
};
I guess this is why there's EmptyPanel. Without knowing about your code more I can only say that what I think you're doing is something I'd do with combination of some child of AbstractRepeater and Fragment. If you're willing to tell more about what you want to do and maybe provide some code too, I'll be happy to help as much as I can.
you can call setVisible(false); on the component you want to hide.