I am trying to add an AjaxLink inside a ModalWindow. This AjaxLink is used to do some stuff like deleting something off the database and finally close the ModalWindow.
I added the ModalWindow accordording to the Wicket examples: Link to examples. But this doesn´t work.
My MainPage:
public class EventPanel extends Panel {
// some stuff happens here, the constructor accepts the eventModel
final ModalWindow modal;
add(modal = new ModalWindow("modal"));
modal.setCookieName("modal-1");
modal.setPageCreator(new ModalWindow.PageCreator() {
public Page createPage() {
// Use this constructor to pass a reference of this page.
return new DeleteEventWindow(eventModel, modal);
}
});
modal.setCloseButtonCallback(new ModalWindow.CloseButtonCallback() {
public boolean onCloseButtonClicked(AjaxRequestTarget target) {
// Change the passValue variable when modal window is closed.
return true;
}
});
// Add the link that opens the modal window.
add(new AjaxLink<Void>("showModalLink") {
#Override
public void onClick(AjaxRequestTarget target) {
modal.show(target);
}
});
}
Modal Window:
public class DeleteEventWindow extends WebPage {
public DeleteEventWindow(final IModel<Event> model,
final ModalWindow window) {
// some stuff happens
// this link doesn´t work
add(new AjaxLink<Void>("closeOK") {
#Override
public void onClick(AjaxRequestTarget target) {
// Just a print to console for debugging
System.out.println("nooo");
window.close(target);
}
});
}
}
ModalWindow HTML
<html>
<head>
<title>Modal Content Page</title>
</head>
<body>
<!-- some other fields output --!>
<a wicket:id="closeOK">close</a><br/>
</body>
</html>
The ModalWindow itself works fine, also the link is rendered. But if I click onto it, the onClick function doesn´t seem to be triggered. I also tried a normal Link, this works fine..
I also found this question : stackoverflow question, but I am using JQuery 1.9.1..
Your code is not giving enough information; you have the modal window added to an item (row Item I assume), but the link to show the modal is added to the panel.
Related
Is it possible (or what is the best way) to have own Panel with Component behaviours? Especially with HTML nesting...
I want something like that:
public HeaderPanel(String id) { /* extends Wicket Panel */
super(id);
add(new Link(ID_HOME_LINK, null) {
private static final long serialVersionUID = 1L;
{
add(new Image(ID_HOME_LOGO, new ContextRelativeResource("img/logo.png")));
}
#Override
public void onClick(AjaxRequestTarget target) {
setResponsePage(((BasicPage)getPage()).getLogoLinkPage());
}
});
}
With HTML:
<!DOCTYPE html>
<html>
<body>
<wicket:panel>
<a wicket:id="home-link">
<img wicket:id="home-logo" src="img/logo.png" title="LearnMe" style="max-height: 65px;" /> <!-- HERE is problem - I would like to set children here -->
</a>
</wicket:panel>
</body>
</html>
And this is the intent in Link (it is my "customized" panel that handles links):
public Link(String id, IModel<String> model, boolean ajax) { /* Extends Wicket Panel */
super(id);
this.ajax = ajax;
this.model = model;
setRenderBodyOnly(true);
if (ajax) {
add(link = new AjaxLink<String>(ID_LINK) {
#Override
public void onClick(AjaxRequestTarget target) {
Link.this.onClick(target);
}
});
} else {
add(link = new org.apache.wicket.markup.html.link.Link<String>(ID_LINK) {
#Override
public void onClick() {
Link.this.onClick(null);
}
});
}
}
With appropriate HTML:
<html>
<body>
<wicket:panel>
<a wicket:id="link"></a> <!-- HERE is problem - I don't know, which ones and how many components go there -->
</wicket:panel>
</body>
</html>
Now I get this Exception:
Last cause: Close tag not found for tag: <a wicket:id="home-link" id="home_link3">. For Components only raw markup is allow in between the tags but not other Wicket Component. Component: [Link [Component id = home-link]]
Maybe I am wrong with Panel capacibility or doing unnecessary thing with Link component, but I am looking for idea of nesting/inheriting Panels in one template like it is usual with Components in Wicket (like HeaderPanel Link were Wicket Link, not my customized Panel "Link" - that works, but it is not "common" solution).
Your problem is in Link.html. There you have a <a wicket:id="link" for the Wicket's Link but you do not have HTML element for the image. The one defined in HeaderPanel.html is completely overridden by the markup provided by (your) Link.html.
Question relates to Wicket 1.6
I have a wizard step, which includes a Textfield component. When I press the Enter key, this is being handled by the default button of the Wizard bar ('Next'), and it advances to the next step in the Wizard. I don't want this to happen. When I hit Enter on the Textfield I just want the value to be updated, but remain on the same page.
I tried overriding the onBeforeRender() method of my Wizard class, which as you can see sets the default button of the containing form to null. However this now results in the 'Prev' button being triggered when I hit Enter, so the wizard goes back to the previous step.
public class ConfigurationWizard extends Wizard {
....
#Override
protected void onBeforeRender()
{
super.onBeforeRender();
Component buttonBar = getForm().get(BUTTONS_ID);
if (buttonBar instanceof IDefaultButtonProvider)
{
getForm().setDefaultButton(null);
}
}
}
So the basic question is, how do I disable the default button behaviour of the Wizard?
My approach (with a nice Wicket behavior)
Usage
TextField<String> myField = new TextField<String>("myField", myModel());
myField.add(new PreventSubmitOnEnterBehavior());
Behavior
public class PreventSubmitOnEnterBehavior extends Behavior
{
private static final long serialVersionUID = 1496517082650792177L;
public PreventSubmitOnEnterBehavior()
{
}
#Override
public void bind( Component component )
{
super.bind( component );
component.add( AttributeModifier.replace( "onkeydown", Model.of( "if(event.keyCode == 13) {event.preventDefault();}" ) ) );
}
}
This has nothing to do with the wizard buttons.
The TextField <input> is doing a form submit when the Enter key is pressed. This is standard behaviour for the <input> element.
The solution is to catch the Enter key press for the <input> and prevent the default behaviour
This bit of javascript magic does the trick for me:
<script type="text/javascript">
$(document).ready(function() {
$("#gridDiv").delegate("input","keypress",function(e){
if(e.originalEvent.keyCode == 13){
e.preventDefault();
}
});
});
</script>
where 'gridDiv' is the id of the <div> containing the TextField
I prefer another approach:
I use AjaxButtons for every button needed, with the specific submit code in the overrided onSubmit():
AjaxButton linkSubmit = new AjaxButton("linkSubmit")
#Override
public void onSubmit(AjaxRequestTarget target, Form form) {
super.onSubmit();
// Submit code goes here....
// ...
setResponsePage(new NewPage());
}
#Override
public void onError(AjaxRequestTarget target, Form form) {
}
};
My form doesn't need a "onSubmit()" method.
And the markup doesn't have any submit buttons. All buttons are coded like this:
With this approach you don't need to mess with javascript codes. The page simply will do nothing if you press Enter. You'll have to click your buttons to submit each one.
Hope this can help you.
I'm trying out wiQuery to see if it suits my needs, but I've run into problems with very basic stuff. Consider the following, where I try to control when a Dialog opens and closes, using its open() and close() methods:
HTML:
<input type="submit" wicket:id="open" value="Open dialog"/>
<div wicket:id="dialog">
<input type="submit" wicket:id="close" value="Close"/>
</div>
Java:
final Dialog dialog = new Dialog("dialog");
add(new Link("open") {
#Override
public void onClick() {
dialog.open();
}
});
dialog.add(new Link("close") {
#Override
public void onClick() {
dialog.close();
}
});
add(dialog);
Thing is, the above doesn't work.
The only way I've got the dialog to actually open & close from my code is by calling setAutoOpen() with either true or false, but it seems strange is this is the only way. (That method's Javadoc says "Sets if this window opens autmatically after the page is loaded." so it clearly should be reserved for a different purpose.)
What's the right way of opening and closing wiQuery Dialogs dynamically in your code?
I have been using the last 2 weeks and I have a similar problem. Try using an AjaxLink this way:
AjaxLink openingLink = new AjaxLink("open")
{
#Override
public void onClick(AjaxRequestTarget target)
{
// Do something with model
target.addComponent(content);
dialog.open(target);
}
};
I have a component inside an <a/> tag that opens a popup window on click. It's an "add to favourite" link which works on KML files. My KML file has a field named "favourite[boolean]". Now I'd like to hide or show my "add to favourite" link. The KML list is generated with a table:
public class CustomTracksAjaxDataTable<T> extends CustomAjaxDataTable<T> {
public CustomTracksAjaxDataTable(String id, List<IColumn<T>> iColumns,
ISortableDataProvider<T> tiSortableDataProvider, int rowsPerPage) {
super(id, iColumns, tiSortableDataProvider, rowsPerPage);
}
protected void onEventHandler(AjaxRequestTarget ajaxRequestTarget,
KMLFile file) {
setKMLData(file); // it just update map, dont care about it
add(new FavouriteStarIconState(file.isSaved()));
}
}
I tried to add a behavior thus:
public class FavouriteStarIconState extends AbstractDefaultAjaxBehavior {
private boolean isFavourite;
public FavouriteStarIconState(boolean isFavourite) {
super();
this.isFavourite = isFavourite;
}
#Override
protected void respond(AjaxRequestTarget target) {
if (isFavourite) {
target.appendJavascript("jQuery('.map_container_star').css(
{'display' : 'none' });");
} else {
target.appendJavascript("jQuery('.map_container_star').css(
{'display' : 'block' });");
}
}
#Override
public void renderHead(IHeaderResponse response) {
response.renderOnLoadJavascript(getCallbackScript().toString());
}
}
The part of the HTML containing the component:
<div id="map_container">
<a wicket:id="favourite_star" class="map_container_star"></a>
</div>
This isn't working. I got the same result with component.setVisible(false). How can I get hiding to work?
Well it finds out that I make a terrible mistake and put javascript appending in wrong place. AJAX request was not rendered. The proper class was CustomAjaxDataTable being extended by my class CustomTracksAjaxDataTable. I just add
new AjaxEventBehavior( "onclick" )
and override
protected void onEvent( AjaxRequestTarget ajaxRequestTarget )
and it works great now
You could use a CSS class like this
.hiddenClass
{
visibility:hidden;
}
then with AttributeModifier you add the class to the element
component.add(new AttributeModifier("class", "hiddenClass"));
or add the style directly to the style attribute
component.add(new AttributeModifier("style", "visibility:hidden;"));
I've got a gwt application and I want to scroll to the top of a page using this method:
public static native void scrollTop() /*-{
$wnd.scroll(0, 0);
}-*/;
The method is called in the onClick-method of a TreeNodeListenerAdapter:
new TreeNodeListenerAdapter() {
#Override
public void onClick(Node node, EventObject e) {
scrollTop();
}
}
This does not work and I don't know why. When I put an alert inside my method:
$wnd.alert("Treenode clicked");
I get to see the alert but the page is not scrolled. What am I missing here?
If you want to scroll to the top of a page just do:
Window.scrollTo (0 ,0);
Just be sure that you are importing the correct package com.google.gwt.user.client.Window