Wicket 6 - How to animate a component that is being replaced before it is replaced

Question

I am trying to animate a panel swapping with a different panel using jquery slideUp() and slideDown(). I have tried a few things such as using attribute modifiers and an AjaxLink with variations of prependJavascript and appendJavascript however I cannot seem to get this to work. The code below is loose meaning I know it is not 100% syntactically correct. I have diluted my situation into a simpler example shown below.

    Panel currentPanel = new Panel1("panelId");
    add(currentPanel );

    Link link = new Link("link")
    {
          public void onClick()
          {
              currentPanel = new Panel2("panelId")
              addOrReplace(currentPanel);
          }
    }
    link.add(new AttributeModifier("onclick", "$('#panel.getMarkup()').slideUp()");

I also worked through the example found at http://wicketinaction.com/2013/02/replace-components-with-animation/. The problem I believe with this example is it is animating a component that is being refreshed or replaced with itself after the backing model has changed. My situation is different since I am changing the whole component out with a different one. I also think I need to set the component that I am swapping in to display:none first so slideDown() will work correctly.

  public void onClick(AjaxRequestTarget target) {
       component.add(new DisplayNoneBehavior());

       target.prependJavaScript("notify|jQuery('#" + component.getMarkupId() + "').slideUp(1000, notify);");
       target.add(component);
       target.appendJavaScript("jQuery('#"+component.getMarkupId()+"').slideDown(1000);");
  }

  private static class DisplayNoneBehavior extends AttributeAppender {
         private DisplayNoneBehavior() {
              super("style", Model.of("display: none"));
         }

         @Override
         public boolean isTemporary(Component component) {
              return true;
         }
  }

Thanks for any help in advanced. If anything is unclear let me know and I'll try to clarify.

Answer 1

The lifecycle in browse is different than you expect. jQuery slideUp() make effect and than call the notify function as callback after slide effect is finished. However, wicket send all javascripts as AJAX from the server to pro browser, so it change you component (HTML tag) before the slide effected is finished.

The execution is

1. prependJavaScript - it starts slideUp
2. rendering/replacing the component
3. appendJavaScript - slideDown
4. call 'notify'

If I understand your example, notify is not a JS function.

So you have to use a JS callback, so write your own JS event in the following order:

1. invoke slideUp
2. invoke 'notify()' function fron slideUp
3. notify() has to call back to the wicket AJAX
4. replace the component

There are many ways how to do that. You can try to write your own AjaxEventBehavior that listen a custom event, such as 'afterSliding'

and call from notify $('#myid').trigger('afterSliding'); to invoke that behavior. You behavior has to replace component from onEvent() method that is abstract and you have to implement.