i have form tag received from designer.
i need to submit the form from GWT given below.
FormPanel form = null;
Button submit = null;
function onModuleLoad(){
form = FormPanel.wrap(DOM.getElementById("MyForm"));
form.setEncoding(FormPanel.ENCODING_MULTIPART);
submit = Button.wrap(DOM.getElementById("OK"));
submit.addClickHandler(new ClickHandler() {
public void onClick(ClickEvent event) {
// button clicked confirmed
form.submit();
}
});
formSubmitHandler = form.addSubmitHandler(new SubmitHandler(){
public void onSubmit(SubmitEvent event) {
}
});
}
but form was not submitted.
designer wrote the following lines.
form action="./a.cgi" method="post" name="MyForm" id="MyForm"
input type="button" value="OK"
form
Are you sure that the form's submit button has an id of "OK"? It looks like the button's value is "OK" but I don't see anything with "OK" as an id.
It seems weird though, since DOM.getElementById("OK") will return null if no element is found, and I'm not sure what happens when wrap() gets passed a null.
Check if getElementById("OK") is returning null.
Related
My form has 1 dropdown use AjaxLazyLoadPanel and 1 ajax button submit.
I click button submit that works only when the dropdown is finished loading.
Index.java
form.add(new AjaxLazyLoadPanel("lazy") {
private static final long serialVersionUID = 1L;
#Override
public Component getLazyLoadComponent(String markupId) {
Fragment fr = new Fragment(markupId, "lazyContentFragment", Index.this);
fr.add(dropdown());
return fr;
}
});
form.setOutputMarkupId(true);
form.add(new AjaxButton("search") {
#Override
protected void onError(AjaxRequestTarget target) {
target.add(feedback);
}
#Override
protected void onSubmit(AjaxRequestTarget target) {
//do something...
}
});
Index.html
<form wicket:id="form">
<input wicket:id="textbox"/>
<div wicket:id="lazy"></div>
<button wicket:id="search"></button>
</form>
<wicket:fragment wicket:id="lazyContentFragment">
<select wicket:id="dropdown"></select>
</wicket:fragment>
Is there any way to submit the form without waiting for the dropdown finish loading.
By default wicket-ajax.js serializes the Ajax calls to the server. This is being done so that the second Ajax call is not called if its HTML element is being removed/painted by the first Ajax call.
In addition only one thread can manipulate a Page instance at a time at the server side!
To be able to make two Ajax calls at the same time you need to use different AjaxChannels for them. For example:
... = new AjaxButton("someId") {
#Override protected void updateAjaxAttributes(AjaxRequestAttributes attributes)
{
attributes.setChannel(new AjaxChannel("customName"));
}
}
This way both Ajax requests will be fired to the server, but the AjaxButton's one will be processed only after the AjaxLazyLoadingPanel's one releases the lock on the page instance at the server side. There is no way to execute two threads on the same page instance (i.e. having the same pageId).
If you're dropdown's choices are taking so long to load, you might want to make your AjaxLazyLoadPanel asynchronous by overriding #isContentReady():
private String token;
private List<T> choices;
protected boolean isContentReady()
{
if (token == null) {
token = startLoadingChoices();
} else {
choices = checkChoicesLoaded(token);
}
return choices != null;
}
Since Wicket manages and serializes all pages, your page must not be held as a reference in a thread or a listener in central registry. Keep a token instead and ask for the loading result; #isContentReady() will be polled repeatedly until it returns true.
I would like to get the text of a button submitProceed and will use it in my code/logic.
HTML
<button wicket:id="submitProceed" type="button" class="btn btn-sm btn-primary btn-save" disabled="disabled">Submit</button>
Is it possible to get the button text Submit? Also, how to I change this to Proceed?
This is how I initialize my button component:
private Component m_btnSubmit;
...
private Component createForm() {
Form<Void> result = new Form<>("form");
...
result.add(m_btnSubmit = createSubmit("submit"));
...
return result;
}
private Component createSubmit(String wicketId) {
AjaxButton result = new AjaxButton(wicketId) {
private static final long serialVersionUID = 1L;
#Override
protected void onConfigure() {
super.onConfigure();
...
setOutputMarkupId(true);
}
#Override
protected void updateAjaxAttributes(AjaxRequestAttributes attributes) {
super.updateAjaxAttributes(attributes);
...
}
#Override
protected void onSubmit(AjaxRequestTarget target, Form<?> form) {
super.onSubmit(target, form);
// TODO: Get button text here
// Check button text if either `Submit` or `Proceed`
// Action depending on button text (Also change button text)
}
#Override
protected void onError(AjaxRequestTarget target, Form<?> form) {
super.onError(target, form);
...
}
};
...
return result;
}
Solution:
First of All, I would like to thank #Andrea and #martin for their solution, I just tweak it a bit for fit my existing code.
Since I need a span containing the text Submit and later be changed to Proceed... I need to add a span inside button tag like this:
<button wicket:id="submit" type="button"><span wicket:id="labelSubmit">Submit</span≶</button>
the problem with this, I am getting an error that seems it would not allow button to have a nested component.
Error is something like this:
org.apache.wicket.markup.MarkupException: Expected close tag for '<button wicket:id="submit" type="button">' Possible attempt to embed component(s) '<span wicket:id="labelSubmit">' in the body of this component which discards its body.
To fix this, I need to change from button to a so it would look like this:
<a wicket:id="submit" type="submit"><span wicket:id="labelSubmit">Submit</span≶</a>
...
IModel m_labelModel = Model.of("Submit");
Label m_labelSubmit = new Label("labelSubmit", m_labelModel);
m_labelSubmit.setOutputMarkupId(true);
...
In my button's onSubmit:
m_labelModel.setObject("Proceed");
target.add(this);
Note that I only did change m_labelModel, but I need to add the current button (this) so that the change will reflect in the UI.
For those, having the same issue or setup... hope this helps :)
If you use new AjaxButton(String, IModel) constructor, as Andrea Del Bene suggested, then the model will be used to set the value attribute of the button:
<button value="Submit"></button>
If you need to manipulate the textContent of the <button>, i.e. <button>!!!THIS!!!</button> then you can add a Label component as a child:
IModel<String> labelModel = Model.of("Submit");
Label label = new Label("labelId", labelModel);
label.setOutputMarkupId(true);
button.add(label);
...
In AjaxButton#onSubmit(AjaxRequestTarget target) you can update it:
labelModel.setObject("New value");
target.add(label);
you should use button's constructor that takes also a model as button's label:
IModel labelModel = Model.of("Submit");
new Button<>("submit", labelModel);
Than you can use the model to get/set this value
I'm trying to follow the basic hello world examples that use GWT Polymer with the UiBinder Elements.
The basic GWT example stub generated code handles the key to specify input.
I thought it would be easy to have an event handler and check the key that was pressed.
I'm probably doing something very basic wrong.
Maybe some import I'm not doing or Polymer.importHref I forgot to include.
The event does trigger but I get undefined when I attempt to get the key from the event.
I guessed using "keypress" as the other examples use "click" and it did trigger but what is the right type to use?
I outputed some of the values and get the following:
event.getDetail().getKey() -> undefined
event.toString() -> [object KeyboardEvent]
nameFieldInput.getValue() ->
nameFieldInput.getInnerHTML() -> show what was typed before processing the current key
I also need to know what the string value or Constant to use for the key to do the test.
Please advise how to make this work using the event listener.
Here is my current code:
Main.ui.xml file
<paper-fab ui:field="sendButton" icon="gavel" title="send rpc" class="sendrpc" />
<paper-dialog ui:field="sendMsgDialog" entry-animation="fade-in-animation"
class="dialog" modal="">
<h2>Send RPC to Server</h2>
<paper-input ui:field="nameFieldInput" label="Please enter your name:"
required="" auto-validate="" pattern="[a-zA-Z]*"
minlength="4" char-counter="" error-message="required input!"/>
<div class="buttons">
<paper-button dialog-dismiss="">Cancel</paper-button>
<paper-button ui:field="sendFieldButton"
dialog-confirm="">Send</paper-button>
</div>
</paper-dialog>
Main.java class
#UiField PaperInputElement nameFieldInput;
...
nameFieldInput.addEventListener("keypress", new EventListener<KeysPressedEvent>() {
public void handleEvent(KeysPressedEvent event) {
if (event.getDetail().getKey() == "enter" && event.getDetail().getCtrl() == false) {
sendMsgDialog.close();
sendNameToServer();
}
}
});
I used the two following examples documents to get to this point and they show the following examples of using the listener. Unfortunately the gwtproject example only uses the event trigger and does not use the event object information..
http://www.gwtproject.org/doc/latest/polymer-tutorial/elements-applogic.html
...
#UiField PaperFabElement addButton;
...
public Main() {
initWidget(ourUiBinder.createAndBindUi(this));
addButton.addEventListener("click", new EventListener() {
#Override
public void handleEvent(Event event) {
addItemDialog.open();
}
});
}
http://vaadin.github.io/gwt-polymer-elements/demo/#gwt/UiBinderElement
...
#UiField PaperTabsElement paperTabs;
...
paperTabs.addEventListener(IronSelectEvent.NAME, new EventListener<IronSelectEvent>() {
public void handleEvent(IronSelectEvent event) {
PaperTabElement tab = (PaperTabElement)event.getDetail().getItem();
toast.close();
toast.setText("Tab \"" + tab.getTextContent() + "\" has been selected");
toast.open();
}
});
Here is an example that uses GWT standard Ui instead of polymer from:
h2g2java.blessedgeek.com/2010/02/tutorial-gwt-rpc-stub-modified-with.html
z.ui.xml file
<g:HorizontalPanel ui:field="hPanel">
<g:Button ui:field="sendButton" text="Send"
styleName="{style.sendButton}" />
<g:TextBox ui:field="nameField" text="GWT User" />
</g:HorizontalPanel>
z.java file
#UiField
HorizontalPanel hPanel;
#UiField
Button sendButton;
#UiField
TextBox nameField;
//Fired when user clicks send Button
#UiHandler("sendButton")
public void sendOnClick(ClickEvent event){
sendNameToServer();
}
//Fired when user types in the nameField.
#UiHandler("nameField")
public void nameOnKeyUp(KeyUpEvent event){
if (event.getNativeKeyCode() == KeyCodes.KEY_ENTER){
sendNameToServer();
}
}
What about this:
nameFieldInput.getPolymerElement().addEventListener("keyup", new EventListener() {
#Override
public void handleEvent(Event e) {
NativeEvent ne = (NativeEvent)e;
if (ne.getKeyCode() == KeyCodes.KEY_ENTER && !ne.getCtrlKey()) {
sendMsgDialog.close();
sendNameToServer();
}
}
});
With the help of #Euclides answer I was able to fix the code and get it working.
Here is the working corrected version.
Main.java class
sendButton.addEventListener("click", new EventListener() {
public void handleEvent(Event event) {
sendMsgDialog.open();
nameFieldInput.setAutofocus(true);
}
});
...
nameFieldInput.addEventListener("keyup", new EventListener<KeysPressedEvent>() {
public void handleEvent(KeysPressedEvent event) {
NativeEvent nativeEvent = (NativeEvent)event;
// CharCode is blank unless you use "keypress" as the event
// nameFieldInput.setErrorMessage(nativeEvent.getCharCode()+":"+nativeEvent.getKeyCode()+":"+nativeEvent.getAltKey()+":"+nativeEvent.getCtrlKey()+":"+nativeEvent.getMetaKey()+":"+nativeEvent.getShiftKey());
if (nativeEvent.getKeyCode() == KeyCodes.KEY_ENTER
&& !nativeEvent.getAltKey() && !nativeEvent.getCtrlKey()
&& !nativeEvent.getMetaKey() && !nativeEvent.getShiftKey()) {
sendMsgDialog.close();
sendNameToServer();
}
}
});
I'm developing a wizard by using GWT. In the Wizard first page i have a form component to upload the file. In the wizard panel i have the next button when i press the next button the validation method will be triggered if the validation is passed then i'm calling the form.submit(); but before form.submit() handler starts the functionality the validation methods completes it. After it completes the validation method only the form submit it's really taking part. How can i controll this event behavior, when i submit the form using form.submit() the remaining actions has to wait till this form returns to it's handler.
Advance Thanks.
Assuming you have a FormPanel:
FormPanel form = new FormPanel();
You can add a handler:
form.addSubmitCompleteHandler(new FormPanel.SubmitCompleteHandler() {
public void onSubmitComplete(SubmitCompleteEvent event) {
// TODO: Do the next step in the wizard
// Use event.getResults() to get the text of the response
}
});
Write a boolean which you'll set to true once the validation is complete. Then start a timer that waits on that boolean. But consider using events and callbacks for repeated use. Using timer will make your code messy if you overuse them.
#UiHandler("submit")
protected void onSubmit() {
validated=false;
validate();
Scheduler.get().scheduleFixedDelay(new RepeatingCommand() {
public boolean execute() {
if (validated) {
if (validationSucceeded()) {
submit();
}
return false;
}
return true;
}
}, 250);
}
private boolean validated = false;
private void validate() {
// do validation
validated=true;
}
I am calling servlet from the gwt client program and setting
final FormPanel form = new FormPanel();
form.setMethod(FormPanel.METHOD_POST);
form.setEncoding(FormPanel.ENCODING_MULTIPART);
form.setAction(GWT.getModuleBaseURL()+"/uploadservlet2");
Now on submit complete I want to retrieve a parameter from the servlet in this event,
form.addFormHandler(new FormHandler() {
public void onSubmit(FormSubmitEvent event) {
// This event is fired just before the form is submitted. We can take
// this opportunity to perform validation.
RootPanel.get().add(new Label("On submit"));
}
public void onSubmitComplete(FormSubmitCompleteEvent event) {
**///I want parameter here**
RootPanel.get().add(new Label("On submiting complete"));
}
});
Please tell me how I can do it.
in your onSubmitComplete:
public void onSubmitComplete(FormSubmitCompleteEvent event) {
String serverResponse = event.getResults();
}
you can let the server return HTML and put this in an HTML widget, or let the server return som JSON and parse this in GWT.