Wicket ajax call не отображает мой новый компонент

Question

надеюсь, что вы можете мне помочь, потому что он прослушивал меня в течение нескольких дней.

У меня есть калитка DataTable, заполненная 16 столбцами. Каждая строка может иметь некоторую дочернюю информацию (если в первой ячейке указана кнопка «+»). Поскольку информация о ребенке - это просто обычный текст с датой включения, когда он был введен, я не хотел использовать реальный объект TreeData. Я пытаюсь сделать кнопку «+» в AjaxFallbackButton, которая работает, но мои дочерние данные отображаются внутри первой ячейки строки, что очень непрактично.

Я сейчас пытаюсь динамически создать новую строку, предваряя некоторые JS на цели: target.prependJavaScript(String.format("var item=document.createElement(\"tr\"); item.id=\"%s\"; $(\"#%s\").after(item);", newChild.getId(), rowId));

Это здорово, потому что на самом деле создает новый тег внутри моей страницы. Но как я могу получить свои новые данные внутри этого недавно обработанного HTML? Я думаю, моя проблема в том, что Wicket не «знает» новую строку, и если я добавлю новый элемент калитки (контейнер в Wicket с новой строкой) в Wicket DataTable и добавлю тело DataTable к цели, то теперь рендеринг моей новой строки.

Моя разметка страницы: [стол]

Мой заказ DataTable расширение Java кода (расширенный, чтобы убедиться, что добавляется все outputMarkUp): @Override protected void onInitialize() { super.onInitialize(); this.addTopToolbar (новый NavigationToolbar (this)); this.addTopToolbar (новый HeadersToolbar <> (это, (ISortableDataProvider) this.getDataProvider())); this.addBottomToolbar (новый NoRecordsToolbar (this)); this.setOutputMarkupId (true); }

@Override 
public void renderHead(IHeaderResponse response) { 
    super.renderHead(response); 
    response.render(CssReferenceHeaderItem.forReference(WarehouseToolbarCssReference.get())); 
} 

@Override 
protected Item<T> newRowItem(String id, int index, IModel<T> model) { 
    Item<T> item = super.newRowItem(id, index, model); 
    this.lastId = Integer.valueOf(id); 
    item.setMarkupId(this.getId() + item.getId()); 
    return item; 
} 

Первая колонка использует пользовательскую панель для заполнения ячеек в столбце, но после того, как много попыток и испытаний, я на самом деле в конечном итоге с обычным узлом из самой калиткой:

<wicket:panel xmlns:wicket="http://wicket.apache.org"> 
    <a wicket:id="junction"></a> 
    <span wicket:id="content" class="tree-content">[content]</span> 
cellspacing="0" wicket:id="reasonData">[Reason data]</table>--> 
</wicket:panel> 

и, наконец, код, который создает новую строку и заполняет необходимые данные (который сам новый DataTable), а также заполняет АЯКС-мишень:

public void onClick(AjaxRequestTarget target) { 
     Integer currentRowIndex = Integer.valueOf(this.findParent(Item.class).findParent(Item.class).getId()); 
     String rowId = this.findParent(Item.class).findParent(Item.class).getMarkupId(); 
     Item<IColumn<OldOrder, String>> newChild = null; 

     this.dataTable.setVisible(true); 

     newChild = new Item<>(String.valueOf(this.findParent(DataTable.class).getLastId() + 1), currentRowIndex * -1, null); 
     newChild.setOutputMarkupId(true); 

     target.prependJavaScript(String.format("var item=document.createElement(\"tr\"); item.id=\"%s\"; $(\"#%s\").after(item);", newChild.getId(), rowId)); 

     this.populateChildRow(newChild); // This is where the new row gets filled with the new data 

     Component rows = this.findParent(DataTable.class).getBody().get("rows"); 
     if (rows instanceof WebMarkupContainer) { 
     ((WebMarkupContainer)rows).add(newChild); 
     } 
     target.add(this.findParent(DataTable.class).getBody()); 
    } 
// This is where the new row gets filled with the new data 
    private void populateChildRow(Item<IColumn<ParentClass>, String>> item) { 
     RepeatingView cells = new RepeatingView("cells"){ 
     @Override // Overridden to check if this gets executed... it doesn't 
     protected void onAfterRender() { 
      super.onAfterRender(); 
      String stop = "STOP"; 
     } 
     }; 

     item.add(cells); 

     Item<?> cellItem = new Item<>("arbitrary", 1, null); 
     cells.add(cellItem); 

     cells.setVisible(false); 
     cells.setOutputMarkupId(true); 
     cells.add(AttributeAppender.append("colspan", this.findParent(DataTable.class).getColumns().size())); 

     this.dataTable.setOutputMarkupId(true); 
     cellItem.add(this.dataTable); // The DataTable with the child data 
    } 

Помимо того, что я должен очистить некоторый код, дочерние данные никогда не отображаются. Может кто-то пролить свет на это?

Answer 1

Я предлагаю перейти с JavaScript полностью, т. Е. Создать новый <tr>, а затем заполнить его JS. Не используйте Wicket's Item.

Когда щелкнули ссылку на расширение, сделайте что-то вроде target.appendJavaScript("yourOwnFunction('"+link.getMarkupId()+"', "+someDataAsJson+")");. Таким образом, yourOwnFunction() будет использовать идентификатор ссылки, чтобы найти его ближайшего родителя <tr>, а затем с помощью JS вы можете добавить новую строку после него. После создания строки вы можете использовать JSON с данными, чтобы заполнить их по мере необходимости.