Панели калитки нуждаются в обновлении страницы для работы скрипта JavaScript

Question

Я создаю веб-страницу с несколькими вкладками. Для этого я использую калитку AjaxTabbedPanel и несколько AbstractTab. В каждой вкладке у меня есть таблицы с данными, и я использую сценарий javascript для сортировки таблиц.

public TabbedPage() {
    List<ITab> tabs = new ArrayList<ITab>();
    tabs.add(new AbstractTab(new Model<String>("first tab")) {
        public Panel getPanel(String panelId) {
            return new TablePanel(panelId);
        }
    });

    tabs.add(new AbstractTab(new Model<String>("second tab")) {
        public Panel getPanel(String panelId) {
            return new TablePanel(panelId);
        }
    });

    add(new AjaxTabbedPanel("tabs", tabs));
}

Когда я загружаю страницу, таблица на выбранной по умолчанию вкладке сортируется. Однако, как только я нажимаю на любую из ссылок, чтобы перейти к другим вкладкам (включая одну из уже выбранных вкладок), ни одна из таблиц на любой из вкладок не позволяет мне отсортировать их (включая ту, которая ранее работала - таблица на вкладке по умолчанию). Если я обновлю страницу, я смогу отсортировать таблицу (из вкладки, выбранной в момент обновления), но как только я нажму на любую из ссылок для переключения вкладок, таблицы снова перестанут иметь возможность сортировки. Есть идеи, почему это происходит?

EDIT: Я только что обнаружил, что если я заменю AjaxTabbedPanel на TabbedPanel, у меня нет этой проблемы. Хотя я до сих пор не уверен, почему это так. Может ли кто-нибудь просветить меня?

    add(new TabbedPanel("tabs", tabs));

Answer 1

Сортировка таблицы по JavaScript - это, скорее всего, функция, вызываемая с определенным DOM-Id и, по-видимому, выполняемая «onLoad».Затем он обращается к текущей отображаемой таблице и выполняет свою работу.Изменение содержимого вашей панели с помощью Ajax не вызывает «onLoad», поэтому функция не выполняется снова.TabbedPanel перезагружает страницу и поэтому выполняет ваш скрипт.Выбор предыдущей сортируемой таблицы с помощью AjaxTabbedPanel не работает из-за динамически генерируемых идентификаторов DOM.

Ваше решение - добавить AjaxCallDecorator к ссылкам из AjaxTabbedPanel или включить скрипт или хотя бы вызов функции дляваши панели с вкладками.

По крайней мере, это то, что приходит на ум, не видя никаких источников ...

РЕДАКТИРОВАТЬ: Вы можете посмотреть на КалиткаWiki .Там есть описание, как вызвать js после нажатия AjaxLink.Это именно то, что должно решить вашу проблему.

Резюме: Просто добавьте

link.add(new AttributeAppender("onclick", new Model("myTableSortingScript();"), ";"));

к ссылкам, сгенерированным AjaxTabbedPanel.

Answer 2

В Wicket 6.0 вы можете запускать JavaScript на компонентной основе: просто переопределите renderHead (IHeaderResponse response) для вашего компонента:

@Override
public void renderHead(IHeaderResponse response) {
    super.renderHead(response);

    response.render(new OnLoadHeaderItem("initalizeMe(\"" + getMarkupId() + "\");"));
}

initializeMe ( mycomponentId ) выполняется каждый раз, когда компонент загружается AjaxTabbedPanel. Это также работает со стандартной TabbedPanel.

Answer 3

Никакой реальной идеи, так как я не уверен, что делает код, но у меня была похожая проблема с моим Panel Manager .В основном, если вы динамически загружаете HTML в панель (div или другой элемент), используя скрипт «innerhtml», содержимое не будет выполнено.

Чтобы обойти это, я сканирую загруженный контент на наличие тегов «script» идобавьте их, используя методы DOM - это запустит скрипт и сделает его доступным.Мой метод «загрузки»:

    // Load Content
Panel.load = function(Content) {

        // "null" the old (to clear it)
    Panel.innerHTML = null;

        // Load the content
    Panel.innerHTML = Content;

        // Load Scripts
    var AllScripts = Panel.getElementsByTagName("script");
    var AllScriptsCnt = AllScripts.length;
    for (var Cnt = 0; Cnt < AllScriptsCnt; Cnt++){
        var CurScript = document.createElement('script');
        CurScript.type = "text/javascript";
        CurScript.text = AllScripts[Cnt].text;
        Panel.appendChild(CurScript);
    };

};

Опять же, не уверен, что это проблема, но по моему опыту это звучит довольно точно.