I have a few pages with a form. Every form has a AjaxButton for submitting and a
<div wicket:id="feedback"></div>
for the feedback panel. Every form field is required and the FeedbackPanel gets correctly filled with error messages from validators in case you leave one field out. The problem is those messages are displayed only if I hit "back" on the browser and then "forward" to see the page again, no matter where I place the feedback <div> inside the page.
Until the back/forward gesture, no error message appear, but the form does not reach onSubmit() (obviously, there are validation errors).
The problem is common to all of my pages that have a form and a FeedBackPanel. All pages make use of Bootstrap 3.2.0, just in case that could make any difference.
Any clue about what's going on?
When you using Ajax, you have to add components, which you want to be updated into AjaxRequestTarget.
Components, which will be updated by Ajax must have predefined markup id.
So, you have to call setOutputMarkupId(true) method for your FeedbackPanel and override onError method for AjaxButton :
... = new AjaxButton (...) {
...
#Override
protected void onError(final AjaxRequestTarget target, final Form form) {
/*here add your feedback panel to be updated via ajax*/
target.addComponent(feedbackPanel);
}
}
Related
I have write my own dialog and on my Index page have a AjaxLink
when AjaxLink is clicked. I will behave to open my dialog instance.
this is my code
add(new AjaxLink("open.working.date.dialog") {
#Override
public void onClick(AjaxRequestTarget target) {
WorkingDateDialog dialog = new WorkingDateDialog("working.date.dialog", getString("index.working.date.dialog.title"), true);
Index.this.add(dialog);
dialog.open(target);
}
});
of course, on my web page html markup I don't have reference component id working.date.dialog and it will throw exception.
but when I replace Index.this.add(dialog); by this.add(dialog); or by target.add(dialog); the dialog won't work.
There any other way to add dynamically dialog to page?
In jquery I can do that easily by just append dialog html to body then open it by jquery.
thanks for your all helpful!
One option is to add the dialog in the constructor of the page and hide it initially. Then later when clicking the link just mark it as visible and add it to the AjaxRequestTarget.
Another option is to add a dummy/empty WebMarkupContainer with the same component id and later replace it with the dialog in #onClick().
You are going against the wicket way of doing things here, which will cause you much pain. :-) First of all WorkingDateDialog needs to extend ModalWindow. Assuming it does, here are my suggestions.
Right above your ajax link add this code:
final WorkingDateDialog dialog = new WorkingDateDialog("working.date.dialog", getString("index.working.date.dialog.title"), true);
add(dialog);
Then your ajax link becomes:
add(new AjaxLink("open.working.date.dialog") {
#Override
public void onClick(AjaxRequestTarget target) {
dialog.show(target);
}
});
So you always add your ModalWindow instance to your page hierarchy. It' just not visible until someone clicks the link.
I hope this helps you. Please let me know if you have any questions.
I have this situation, where I display a success/error message on a page and then I want it to disappear when the user does anything on the page (I assume that that triggers a click event, I can ignore events like going to new tab/windows etc.).
I have other "uihandlers" and "clickhandlers" on the page. So if I click empty regions on the page only the hidemessage call fires, else if I click valid 'clickable' elements my hidemessage fires first followed by the relevant handler.
Is there a way I can achieve this without adding hidemessage to all my clickhandlers on the page?
Edit: The message widget is not a PopupPanel, so setAutohide(true) won't work. But it is exactly the behavior I'm looking for. The widget is a custom widget which extends Composite implements HasWidget, HasClickHandlers
You can do this on your error message:
myPopupPanel.setAutoHideEnabled(true);
It does exactly whet you need. You may also consider setting auto-hide on history events (mostly back button):
myPopupPanel.setAutoHideOnHistoryEventsEnabled(true);
EDIT:
If you are not using a PopupPanel, you can make your Widget implement EventPreview, and then:
public boolean onEventPreview(Event event) {
Element target = DOM.eventGetTarget(event);
boolean widgetIsTarget = (target != null) && DOM.isOrHasChild(getElement(), target);
setVisible(widgetIsTarget):
I have got a tricky problem. I have a page with three iframes, each one calls a struts action to display the content.
Now, in one of the iframes, there is a (struts) form and a (struts) submit button. In another frame, an historic of the last actions performed by the user. When the submit button is clicked, I would like the form to be submitted and the entire page reloaded, so that the historic is up to date.
Last problem, but not least :
Let's say I have : - select1 : a struts select in the form.
When the submit button is clicked, the struts action related is called. But, I do not want to have a "select1" attribute in this action. Instead, I want to have an object that contains this "select1", lets say an object called "fieldContainer". I want fieldContainer.select1 to be initialized when the form is submitted.
So lets have an example :
form.jsp :
<s:form>
<s:select id="select1" name="select1" list="select1list"/>
<s:submit action="submitThisForm"/>
</s:form>
theAction.java :
FieldContainer fieldContainer;
#action("submitThisForm")
String submitThisForm() {
String mySelect = fieldContainer.select1 ;
// do something with mySelect
return "SUCCESS";
}
I don't know how to achieve something that corresponds to every point, any idea ?
For the first problem you will have to do it with javascript on the client-side.
After displaying the new content of the submitted page, the parent of the iframe has to handle the updating of the other pages.
Either the parent causes a refresh of the other frames
or
the needed information is hidden in response of the submit and is taken by the parent and set to the "historic frame" (by js).
Both has advantages but I cannot think of a solution without javascript.
About your least problem:
If the action provides a getter for fieldContainer and the name of the field is "fieldContainer.select1" struts will put the value to the setter in the object fieldcontainer.
The fieldContainer should be somewhere in the valuestack, so struts can find the setters for it.
I'm a beginner when it comes to zend framework.
I created a form with a submit button, using zend_form, and zend_form_element_submit. Upon clicking submit, the code performs data manipulation based on the input. If no input is keyed in, nothing happens.
When I click the submit button, it reloads my web page even though there are no changes.
Any way I can prevent that page load? Could I use a zend_form_element_button that would trigger an event? how would I capture it?
Any help will be mostly appreciated!
Thank you.
A submit button will always cause the form to submit which generally results in a page being reloaded whether or not the data in any of the form elements are "correct" or not.
Using Zend Framework, you could add a JavaScript onsubmit event to your form that could inspect the form elements and decide if the form should be submitted or not. Or you could use Ajax to submit the form which wouldn't result in the page being reloaded.
Here is an example of using onsubmit. You would create your form on the controller, assign it to the view, and then in your view, add the onsubmit attribute and relevant code.
view.phtml
<?php
$this->form->setAttrib('onsubmit', 'return checkForm()');
echo $this->form;
?>
<script type="text/javascript">
function checkForm()
{
if (form_passes_validation) {
return true; // form will submit
} else {
return false; // form will NOT submit (if javascript is enabled)
}
}
</script>
You will have to come up with the logic for form_passes_validation, but if onsubmit returns false, then the form will not be sent.
Keep in mind, PHP is all server side. You can't do any PHP processing to determine if the form should send, this all has to be client side, or you will have to live with your form reloading the page even if no data is entered.
As we are facing GWT performance issues in a mobile app I peeked into Google Wave code since it is developed with GWT.
I thought that all the buttons there are widgets but if you look into generated HTML with firebug you see no onclick attribute set on clickable divs. I wonder how they achieve it having an element that issues click or mousedown events and seemingly neither being a widget nor injected with onclick attribute.
Being able to create such components would surely take me one step further to optimizing performance.
Thanks.
ps: wasnt google going to open source client code too. Have not been able to find it.
You don't have to put an onclick attribute on the HTML to make it have an onclick handler. This is a very simple example:
<div id="mydiv">Regular old div</div>
Then in script:
document.getElementById('mydiv').onclick = function() {
alert('hello!');
}
They wouldn't set the onclick property directly, it would have been set in the GWT code or via another Javascript library.
The GWT documentation shows how to create handlers within a GWT Java app:
public void anonClickHandlerExample() {
Button b = new Button("Click Me");
b.addClickHandler(new ClickHandler() {
public void onClick(ClickEvent event) {
// handle the click event
}
});
}
This will generate an HTML element and bind a click handler to it. However, in practice this has the same result as using document.getElementById('element').onclick() on an existing element in your page.
You can hook functions to the onclick event using JavaScript. Here's an example using jQuery:
$(document).ready(function(){
$("#div-id").click(function(){
/* Do something */
});
});
If you're interested in optimizing performance around this, you may need to investigate event delegation, depending on your situation.
A click event is generated for every DOM element within the Body. The event travels from the Body down to the element clicked (unless you are using Internet Explorer), hits the element clicked, and then bubbles back up. The event can be captured either through DOM element attributes, event handlers in the javascript, or attributes at any of the parent levels (the bubbling or capturing event triggers this).
I'd imagine they've just set it in a .js file.
Easily done with say jQuery with $(document).ready() for example.