I have a form with several input fields and one special field, that I want to process with ajax. The thing is, that I want to process only that field after the AjaxLink has been clicked. Without processing of the whole form. I want to access the value of that input field in the method onSubmit of the AjaxLink. Is that possible? If yes, then how?
Regards,
Mateusz
By default AjaxLink does not submit data/forms. AjaxSubmitLink and AjaxButton do!
For your use case you can AjaxRequestAttributes and send "dynamic extra parameters". I'm on my mobile and I cannot give you an example at the moment but the idea is to construct a simple JSON object with a key being the request parameter name and value the forn element's value.
Google these keywords!
If you can't manage to do it then add a comment and I will update my answer as soon as I can!
Here is a sample code. Beware I've written it completely here, so it might have a typo or two!
add(new AjaxLink("customSubmitLink") {
#Override public void onClick(AjaxRequestTarget target) {
int aFieldValue = getRequest().getRequestParameters().getParameterValue("aField").toInt();
// do something with aFieldValue
}
#Override protected void updateAjaxAttributes(AjaxRequestAttributes attrs) {
super.updateAjaxAttributes(attrs);
attrs.getDynamicExtraParameters().add("return {\"aField\": jQuery('#aFormField').val()});
}
});
One way to solve this would be to put that 'special' field with its 'special' link to a second Form and then use CSS to visually position the 'special' field like it is inside the main Form.
Something like this:
Form<Void> mainForm = new Form<Void>("main-form") {
#Override
protected void onSubmit() {
super.onSubmit();
}
};
add(mainForm);
// ... populate the main form
Form<Void> secondForm = new Form<Void>("second-form");
add(secondForm);
final Model<String> specialModel = Model.of();
secondForm.add(new TextField<>("special-field", specialModel));
secondForm.add(new AjaxButton("special-button") {
#Override
protected void onSubmit(AjaxRequestTarget target, Form<?> form) {
// ... process the special field value
}
});
And in the markup, as usual:
<form wicket:id="main-form">
... main form content
</form>
<form wicket:id="second-form">
<label>Special field: <input class="special-field" wicket:id="special-field"></label>
<button wicket:id="special-button">Special button</button>
</form>
And then style that .special-field class with position: absolute; top: ... or something like that.
The solution is not very elegant, it's more of a hack. It will create some confusion for a person who would have to read this later. But it may work if the trick with CSS is possible.
It's actually even easier than what rpuch suggested.
Just nest your forms and make sure the AjaxLink only submits the second form:
<form wicket:id="form">
<div wicket:id="dateTimeField"></div>
<form wicket:id="secondForm">
<input wicket:id="text" />
<a wicket:id="secondSubmit">submit2</a>
</form>
<a wicket:id="submit">submit</a>
</form>
Form secondForm= new Form("secondForm");
form.add(secondForm);
final IModel<String> textModel = Model.of("");
TextField<String> text = new TextField<>("text", textModel);
secondForm.add(text);
AjaxSubmitLink secondSubmit = new AjaxSubmitLink("secondSubmit", secondForm) {
#Override
protected void onSubmit(AjaxRequestTarget target, Form<?> form) {
super.onSubmit(target, form);
logger.info("textMod: " + textModel.getObject());
}
};
secondForm.add(secondSubmit);
The second form will be rendered as a div but will have the functionality that you desire. However the second form will also be submitted when you submit the outer form.
Related
I have form with Textbox and submit Ajaxbutton, when i insert some value in textbox then click on submit button, will perform some business logic written in OnSubmit of Ajaxbutton, its fine for us But when i insert some value in textbox then press enter key so i want to perform same business logic of OnSubmit of Ajaxbutton but it doesn't call, Please suggest #martin-g . I want to prefer wicket code instead of JavaScript.
Below is my code in my application.
<Form wicket:id="FilterForm">
<input type="textbox" wicket:id="input"></input>
<input type="submit" wicket:id="submit"/>
</Form>
for java code:
final Form filterForm = new Form("FilterForm"){}
add(filterForm);
filterForm.setMarkupId("filterForm");
filterForm.setOutputMarkupId(true);
TextField<String> docIdInput = new TextField("input", new PropertyModel(this.searchObj, "searchString"));
filterForm.add(docIdInput);
docIdInput.setOutputMarkupId(true);
AjaxButton docIdInputSubmitButton = new AjaxButton("submit") {
private static final long serialVersionUID = 1L;
#Override
protected void onSubmit(AjaxRequestTarget target, Form<?> form) {
//do buisness logic
}
filterForm.add(docIdInputSubmitButton);
You can make your button the default button of the form:
filterForm.setDefaultButton(docIdInputSubmitButton);
Wicket will generate some JavaScript for you that triggers your submit button on enter.
I have the following java and html code:
this.leakageModel = new PropertyListView<Leakage> ( "leakage", new ArrayList<Leakage> ()) {
private static final long serialVersionUID = 1L;
#Override
protected void populateItem (final ListItem<Leakage> item) {
Link<String> brandLink = new Link<String> ("brandLink") {
private static final long serialVersionUID = -480222850475280108L;
#Override
public void onClick () {
//change another model in the page to update
//another table when the link is clicked
}
};
brandLink.add (new Label ("brand"));
item.add (brandLink);
} };
add (this.leakageModel);
html file:
<tr wicket:id="leakage" class="testClass">
<td class="testClass">
<a wicket:id="brandLink" href="#">
<span wicket:id="brand"></span>
</a>
</td>
</tr>
What I want to do is to be able to call a javascript function from inside the onClick() method.
The model update that I currently do inside the onClick method works well and updates another table on the page.
However everything I have tried to call a javascript function or change the css style has failed.
For instance:
Adding a css class:
add (new AttributeAppender("class", new Model("anotherclass"), " "));
Using an AjaxLink type instead, and a number of other things I have tried to no avail.
On a related note, my original intention is to hide all rows in the table except the one I have clicked. Maybe I can do this just from the Java code and have no need for Javascript at all, but updating the css as above doesn't work.
Any suggestions as to what am I doing wrong?
On a related note, my original intention is to hide all rows in the
table except the one I have clicked.
Instead of answering your question, I will try to provide a solution to your problem :).
It makes perfect sense to hide the table row via javascript. I would suggest doing it with Jquery as described in Hiding all but first table row with jQuery:
$("#myTbl tr:not(nth-child(3))").hide();
Now, you have to execute the above javascript snippet each time a user clicks your Wicket link. For this, you can for example create your own link class like this:
public class JavascriptLink extends Label{
public JavascriptLink(String id, String label) {
super(id, label);
add(new AttributeAppender("onclick", "...your javascript here..."));
}
}
I leave it to you to combine the jquery with the JavascriptLink to meet your requirements. It should work going in this direction.
Simple, I click on the input that has the type="submit", and the form isn't submitted.
I've searched solutions to this issue but they say I should check if I have nested forms, which I don't, I'm only using one. They also said it could be some misplaced tag, but I've gone through the whole HTML and the tags are fine.
I have this block in the HTML:
<div id="form-options-div" style="margin-top:10px;">
<input class="btn btn-primary" type="submit" wicket:id="saveClientButton" id="save-client-button" />
<input class="btn" type="button" id="close-client-button" wicket:id="closeClientButton"/>
</div>
I'm using an AjaxButton in the java code to represent the saveClientButton.
I'm overriding the onSubmit(AjaxRequestTarget, Form<?>). I would post the whole java code, but I have a logger at the start of the method to see if it's being called:
logger.debug("ON SUBMIT");
So it's not inside the method. An interesting thing is that when I override the Form onSubmit() method, instead of the AjaxButton one, the page actually reloads. But it's only that, the onSubmit method still isn't called.
Why is this happening?
EDIT:
private Button saveClientBtn;
saveClientBtn = new AjaxButton(WICKET_ID_SAVE_CLIENT_BUTTON) {
#Override
public void onError() {
logger.debug("Error on submit...");
}
#Override
protected void onSubmit(AjaxRequestTarget target, Form<?> form) {
//code....
}
};
Could the closeClientButton be interfering with the normal behavior? I don't know, because the button type is button, not submit.
editClientForm = new Form<Client>(WICKET_ID_EDIT_CLIENT_FORM);
add(editClientForm);
editClientForm.add(saveClientBtn);
EDIT 2:
OK, instead of using AjaxButton, I decided to override the Form onSubmit() and onError(). When clicking the button, I see that onError() is called. Now I need to find the reason why.
Ok, I put a FeedbackPanel. It gives me the following message:
'[Page class = EditClientPage, id = 6, render count = 1]' is not a valid EditClientPage.
Also, the error appears 4 times, as in:
'[Page class = EditClientPage, id = 6, render count = 1]' is not a valid EditClientPage.
'[Page class = EditClientPage, id = 6, render count = 1]' is not a valid EditClientPage.
'[Page class = EditClientPage, id = 6, render count = 1]' is not a valid EditClientPage.
'[Page class = EditClientPage, id = 6, render count = 1]' is not a valid EditClientPage.
What does this error means?
Make sure you have a form tag.
e.g.:
<html>
<body>
<form wicket:id="form">
<div wicket:id="registration">
Display the RegistrationInputPanel
</div>
<input type=”submit” wicket:id="register" value="Register"/>
</form>
</body>
</html>
and the java class:
public class RegistrationPage extends Page {
public RegistrationPage(IModel<Registration> regModel) {
Form<?> form = new Form("form");
form.add(new RegistrationInputPanel("registration", regModel);
form.add(new SubmitButton("register") {
public void onSubmit() {
}
});
add(form);
}
}
In my case, it appears I was not setting a "required" value within the form.
This was ascertained by adding an "onError" method to the form object (sure enough, onError was being called, you can tell "what" the error was like
String responseTxt = wicketTester.getLastResponse().getDocument();
And dig through it to look for the error message.
To actually set the value, in my case, was
FormTester formTester = wicketTester.newFormTester("formName");
formTester.setValue("requiredElementName", "value");
Then the onSubmit method started being called within tests, as was expected.
In a Wicket app, I have a bunch of <button> elements to which I'm attacking a Link component. Now in the onClick() method of the component I want to disable or change the style of the button. How can I do that? Calling setEnabled(false) has no effect.
Repeated uses of onClick() are operating on the same object in memory. If you're not using Ajax, you can still maintain some state in an anonymous subclass of Link. Then, you can use onBeforeRender() and onComponentTag() to change how it is displayed each time.
Link<Void> link = new Link<Void>("myLink") {
private String customCSS = null;
private boolean customEnabled = true;
public void onClick() {
if (/* test to determine disabled */) {
customCSS = "disabled";
customEnabled = false;
} else {
customCSS = null;
customEnabled = true;
}
}
#Override
protected void onComponentTag(ComponentTag tag) {
super.onComponentTag(tag);
if (customCSS != null)
tag.put("class", customCSS);
}
#Override
public boolean isEnabled() {
return super.isEnabled() && customEnabled;
}
};
AttributeModifiers (or other behaviors) aren't good for this case because, if you add them in the onClick() method, they will begin stacking on the same link for each click - since they are maintained as part of the Link's state.
Your Link can keep track of all manner of state, allowing your onClick() method to enable/disable/change/etc with repeated clicks.
You can also override onBeforeRender(), isVisible(), and other methods that are run each time the link is displayed on the page. The constructor, onConfigure(), and others are run just once, regardless of how many times you click the button.
I don't think this is an entirely good idea in Wicket. Of course it could be done by trickery, but it's far simpler to either:
Override the isEnabled() method to return a value derived from the model of the form/component.
Attach an AttributeModifier when you create the component, and use a model for it which returns a value derived as above.
Whichever you choose, the principle is to let Wicket "pull" rendering information in rather than pushing it explicitly.
The answer provided by Michael Borgwardt is nearly correct.
The problem is that you use Link. Disabled Links use <span> instead of
<a>/<button> and are surrounded with <em> by default. Using Button
component will set 'disabled' attribute in the element.
I would like to add, that you need to use HTML button element instead of <a> (link). Original answer can be counfusing, because Link and Button also exist in Wicket.
I think AjaxCallDecorator should be the class you need to use to disable/change style of the button.
The problem is that you use Link. Disabled Links use <span> instead of <a>/<button> and are surrounded with <em> by default.
Using Button component will set 'disabled' attribute in the element.
Take a look at SimpleAttributeModifier and AttributeAppender. Depending on your actual requirements one of those should do the trick. SimpleAttributeModifier adds or replaces an attribute of any HTML-Tag that has a prepresentation in wicket (replaces the css class), while AttributeAppender appends to the attributes (adds another css class). This should work for enabling/disabling buttons as well but I haven't tried that.
Example:
Label label = new Label("id", "Some silly text.")
add(label);
label.add(new SimpleAttributeModifier("class", "my-css-class");
For Ajax you'll have to add the component to the target as well.
More detailed example:
Java code:
import org.apache.wicket.behavior.AttributeAppender;
import org.apache.wicket.behavior.SimpleAttributeModifier;
import org.apache.wicket.markup.html.WebMarkupContainer;
import org.apache.wicket.markup.html.WebPage;
import org.apache.wicket.markup.html.form.Button;
import org.apache.wicket.markup.html.form.Form;
import org.apache.wicket.markup.html.link.Link;
import org.apache.wicket.model.Model;
public class DemoPage extends WebPage {
public DemoPage() {
Form form = new Form("form");
add(form);
final WebMarkupContainer wmc = new WebMarkupContainer("greenText");
form.add(wmc);
form.add(new Link("redLink"){
#Override
public void onClick() {
wmc.add(new SimpleAttributeModifier("class", "redText"));
}});
final Button boldButton = new Button("boldButton"){
#Override
public void onSubmit() {
wmc.add(new AttributeAppender("class", true, new Model<String>("boldText"), " "));
}};
form.add(boldButton);
Link disabler = new Link("buttonDisabler") {
#Override
public void onClick() {
boldButton.add(new AttributeAppender("disabled", true, new Model<String>("disabled"), " "));
}
};
form.add(disabler);
}
}
corresponding HTML:
<html>
<head>
<style>
.redText {
color: red;
}
.greenText {
color: green;
}
.boldText {
font-weight: bold;
}
</style>
</head>
<body>
<form wicket:id="form">
<div class="greenText" wicket:id="greenText">This is Green.</div><br />
Make it red<br />
<input type="submit" wicket:id="boldButton" value="Make it bold" /><br />
Disable the button
</form>
</body>
</html>
What's the cleanest way I can make a checkbox automatically submit the form it belongs to in Wicket? I don't want to include a submit button at all. The checkbox is backed by a boolean field in a domain object ("Account" in this case).
Simplified example with irrelevant parts omitted:
EntityModel<Account> accModel = new EntityModel<Account>(Account.class, id);
PropertyModel<Boolean> model = new PropertyModel<Boolean>(accModel, "enabled");
CheckBox checkBox = new CheckBox("cb", model);
Form form = new Form("form");
form.add(checkBox);
add(form);
HTML:
<form wicket:id="form" id="form" action="">
<input wicket:id="cb" type="checkbox" />
</form>
Edit: To clarify, my goal is just to change the domain object's field (-> value in database too) when the checkbox is toggled. Any (clean, easy) way to achieve that would be fine. (I'm not sure if you actually need the form for this.)
Just overriding wantOnSelectionChangedNotifications() for the checkbox—even without overriding onSelectionChanged()—seems to do what I want.
This way you don't need the form on Java side, so the above code would become:
EntityModel<Account> accModel = new EntityModel<Account>(Account.class, id);
add(new CheckBox("cb", new PropertyModel<Boolean>(accModel, "enabled")){
protected boolean wantOnSelectionChangedNotifications() {
return true;
}
});
Feel free to add better solutions, or a better explanation of what's going on with this approach!
Edit: On closer inspection, I guess the method's Javadoc makes it reasonably clear why this does what I wanted (emphasis mine):
If true, a
roundtrip will be generated with each
selection change, resulting in the
model being updated (of just this
component) and onSelectionChanged
being called.
While this may work, you are far better off using AjaxCheckBox. An anonymous subclass can be wired to receive events immediately as well as make changes to the UI outside the checkbox itself.
final WebMarkupContainer wmc = new WebMarkupContainer("wmc");
final EntityModel<Account> accModel = new EntityModel<Account>(Account.class, id);
wmc.setVisible(false);
wmc.setOutputMarkupPlaceholderTag(true);
form.add(new AjaxCheckBox("cb", new PropertyModel<Boolean>(accModel, "enabled")) {
#Override
protected void onUpdate(AjaxRequestTarget target) {
wmc.setVisible(accModel.isEnabled());
target.addComponent(wmc);
// .. more code to write the entity
}
});
In this contrived example, the WebMarkupContainer would be made visible in sync with the value of the checkbox.