Получение JQuery для работы с именем класса, динамически добавляемого GWT

Question

Я пытаюсь заставить jquery вносить некоторые изменения в пользовательский интерфейс при использовании GWT. У меня есть уведомления, которые я добавляю на страницу, которые при нажатии должны исчезнуть. Так как может быть несколько уведомлений одного и того же типа (предупреждение, ошибка и т. Д.), Я пытаюсь динамически добавлять имя стиля только тогда, когда они нажимаются через GWT, а затем имеют jquery-эффект для этого конкретного имени класса.

Проблема в том, что функция jquery срабатывает до того, как имя стиля может быть добавлено, поэтому пользователь должен дважды щелкнуть уведомление, чтобы закрыть его.

Есть идеи?

  public abstract class AbstractNotificationWidget extends Composite implements ClickHandler, HasClickHandlers {

  protected abstract String getUniqueId();

  @Override
  public HandlerRegistration addClickHandler(ClickHandler handler) {
    return addDomHandler(handler, ClickEvent.getType());
  }

  @Override
  public void onClick(ClickEvent event) {
    doClick(getUniqueId());
  }

  protected static native void doClick(String name) /*-{
    $wnd.$("#" + name).click(function () {
      $wnd.$(this).slideUp("slow");
      $wnd.$("div", this).fadeOut("slow");
      });
  }-*/;

}

У меня есть подклассы, которые расширяют указанный класс

public class ErrorNotificationWidget extends AbstractNotificationWidget {

  private final String uniqueId;

  public ErrorNotificationWidget (String title, String message) {
    uniqueId = DOM.createUniqueId();

    initWidget(uiBinder.createAndBindUi(this));

    this.getElement().setId(uniqueId);

    this.addClickHandler(this);
  }
  @Override
  protected String getUniqueId() {
    return this.uniqueId;
  }

Эти подклассы используют UIBinder, чтобы определить, как их следует рисовать. Затем эти виджеты добавляются на панель для отображения.

Answer 1

Чего именно вы пытаетесь достичь? Скрыть виджет на основе примененных стилей или его идентификатора? (в текущей версии кажется, что вы смешиваете одно с другим)

Если ClickEvent срабатывает быстро (что можно проверить, добавив тайм-аут перед ним), вы можете попробовать обернуть его в DeferredCommand.

Другая возможность заключается в том, что jQuery разрушается;) У меня были странные проблемы при использовании обратных вызовов в jQuery / Mootools - причина была в том, что эти фреймворки расширяют / меняют function() (среди прочего) - однако, JSNI выполняется из «чистого» iframe, где jQuery не вносит изменений (поэтому вы должны ссылаться на главное окно через $wnd). Вы можете проверить, является ли это проблемой здесь, определив, например, тестовую функцию на вашей HTML-странице хоста, а затем передав ее в качестве функции обратного вызова в вашем методе void doClick(String name):

protected static native void doClick(String name) /*-{
  $wnd.$("." + name).click($wnd.jqueryTest); // BTW, why '"." + '?
}-*/;

И мое первоначальное предложение остается в силе - используйте FocusPanel в качестве основного виджета - попытка правильно реализовать HasClickHandlers (и аналогичные интерфейсы) - это PITA из моего опыта и может привести к странным ошибкам и / или утечкам памяти.

Answer 2

Возможно, вам следует попробовать GWTQuery http://code.google.com/p/gwtquery/, вместо этого попытаться интегрировать его изначально.

Answer 3

Ваш код требует двух кликов, потому что вы устанавливаете событие привязки кликов Jquery по первому щелчку (с помощью метода onclick), и это последнее реагирует на второй щелчок. Измените свой код следующим образом:

protected static native void doClick(String name) /*-{     
      var $_this = $("#" + name);
      $_this.slideUp("slow");       
      $wnd.$("div", $_this).fadeOut("slow");       
}-*/; 

Кстати, вы можете использовать GwtQuery (gwt clone of jQuery), и код должен выглядеть так:

import static com.google.gwt.query.client.GQuery.$; 

public abstract class AbstractNotificationWidget extends Composite implements ClickHandler, HasClickHandlers {    

@Override   
public HandlerRegistration addClickHandler(ClickHandler handler) {     
    return addDomHandler(handler, ClickEvent.getType());   
}    

@Override   

public void onClick(ClickEvent event) {     
    $(this).slideUp(Speed.SLOW);
    $("div", getElement()).fadeOut(Speed.SLOW);
}    

} 

нет необходимости использовать уникальный идентификатор

Answer 4

Добавить класс к элементу, который вы хотите закрыть при клике, т.е.

<div class="close-on-click">Content</div>

Ваш javascript может автоматически связывать функцию для любых существующих или динамически создаваемых элементов, соответствующих селектору:

$('.close-on-click').live('click', function() {
  $(this).remove();
});