How to call a Javascript method on info() / error() method of Wicket FeedbackPanel?

Question

How can I call a JavaScript method from Wicket feedback panel methods such as info() and error() .

What I am trying to do is, display MDL 's snackbar for Wicket FeddbackPanel 's error() / info() methods. But to show the snackbar, we have to call a JavaScript method. Which I don't know how to do, especially in non-ajax calls.

Answer 1

You could subclass FeedbackPanel and call the javascript in renderHead(IHeaderResponse response)

Like this:

   @Override
   public void renderHead(IHeaderResponse response) {
      super.renderHead(response);
      response.render(OnDomReadyHeaderItem.forScript("callFancyJs();"));
   }

This would call the javascript regardless of AJAX or not.

Additionally if you need to access the FeedbackMessage s by it's type in javascript i've added them CSS classes, which i use for bootstrap styling:

   @Override
   protected Component newMessageDisplayComponent(String id, FeedbackMessage message) {
      Component c = super.newMessageDisplayComponent(id, message);
      c.setEscapeModelStrings(false);
      String bootstrapClass = "text-info";
      switch (message.getLevel()) {
         case FeedbackMessage.ERROR:
            bootstrapClass = "text-danger";
            break;
         case FeedbackMessage.WARNING:
            bootstrapClass = "text-warning";
            break;
         case FeedbackMessage.SUCCESS:
            bootstrapClass = "text-success";
            break;
         case FeedbackMessage.FATAL:
            bootstrapClass = "text-danger";
            break;
         case FeedbackMessage.DEBUG:
            bootstrapClass = "text-danger";
            break;
         case FeedbackMessage.INFO:
            bootstrapClass = "text-info";
            break;
      }
      c.add(new AttributeAppender("class", bootstrapClass));
      return c;
   }

You could use this classes to target the feedback messages in your javascript.

Answer 2

您必须通过在服务器端处理的AJAX请求来执行此操作，并且此处理程序必须调用方法，然后，将面板添加到AjaxRequestTarget以进行更新

Answer 3

You can take an inspiration from WicketStuff JGrowl integration: https://github.com/wicketstuff/core/tree/master/jquery-parent/jquery/src/main/java/org/wicketstuff/jquery/jgrowl

The way it does it to render a <script> for each message. This script has text like $.jgrowl({...}) .