Apache Wicket › Users forum

Replacing the contents of a table with ajax

Classic

List

Threaded

5 messages Options

Werner Riegel

Replacing the contents of a table with ajax

Hello,

im trying to update the contents of a table, but it doesn't really work. I hope you guys can help me with that.

My page looks like the following:
It has a Form, consisting of a drop down list + an ajaxbutton, and below the form is a table.
After choosing an element from the list and pressing the ajaxbutton,
a serverside function will be executed that returns a list of items/objects. These items should then be displayed in the table.
That means, that all existing content in the table should be replaced by the new items (one item per row)
Actually all i want is to switch the old table contents with the new ones.

Since i couldnt replace the table itself, i put it in a Panel, which i am now replacing when the button is pressed.

The panel looks like this:

TablePanel.java: -----------------------------------------------------------------------------------------------------------------------------
public TablePanel(String id, List<MyObject> objectList) {
super(id);

DataView<MyObject> dataView = new DataView<MyObject>("objects", new ListDataProvider<MyObject>(objectList)) {

@Override
protected void populateItem(Item<MyObject> item) {
MyObject obj = item.getModelObject();
// populate
}
};

dataView.setOutputMarkupId(true);
add(dataView);
}
//TablePanel.java: ---------------------------------------------------------------------------------------------------------------------------

The corresponding html file:

TablePanel.html: -----------------------------------------------------------------------------------------------------------------------------
<wicket:panel>
<table id="table-horizontal">

<thead>
// header-content
</thead>

<tfoot>
</tfoot>

<tbody>
<tr wicket:id="objects">
<td><span wicket:id="itemValueX">[id]</span> </td>
// etc
</tr>
</tbody>
</table>
</wicket:panel>
//TablePanel.html: ---------------------------------------------------------------------------------------------------------------------------

In the onSubmit function i build a new TablePanel object with the id from the old tablePanel and with the new list of items that i want to display, then add it to the target.
It looks like this:

AjaxButton: ----------------------------------------------------------------------------------------------------------------------------------
@Override
protected void onSubmit(AjaxRequestTarget target, Form<?> form) {

TablePanel tp = new TablePanel(tablePanel.getId(), getItemList(selectedFromDropDown));
tp.setOutputMarkupId(true);
target.add(tp);
}
//AjaxButton: --------------------------------------------------------------------------------------------------------------------------------

The page.html in which the TablePanel is inserted contains this markup:

ItemPage.html: -------------------------------------------------------------------------------------------------------------------------------
<wicket:extend>

<form wicket:id="selectionForm">
<select wicket:id="dropDown">
<option>[some option]</option>
</select>
<input type="submit" wicket:id="selectButton" value="Show Items" />
</form>

<span wicket:id="TablePanel">[table content]</span>

</wicket:extend>
//ItemPage.html: -----------------------------------------------------------------------------------------------------------------------------

After i press the button, the list of items gets generated and the new tablePanel is added to the target, but in the webbrowser i dont see any change.
The populateItem method in the TablePanel's DataView does not get executed either.

If i hardcode it, so that the TablePanel just uses a the getItems method - ignoring the ajaxbutton + dropbown - the items get displayed in the table just fine.
So that part seems to work OK, i guess it's just something with the ajax.
But i really don't know what i'm missing.

Regards,
Werner

Robert Dahlström-2

Re: Replacing the contents of a table with ajax

Usually, put a container around the table and update the container
through ajax and not the table directly.

/Robert

On 09/07/2011 04:22 PM, Werner Riegel wrote:

>
> Hello,
>
> im trying to update the contents of a table, but it doesn't really work. I hope you guys can help me with that.
>
> My page looks like the following:
> It has a Form, consisting of a drop down list + an ajaxbutton, and below the form is a table.
> After choosing an element from the list and pressing the ajaxbutton,
> a serverside function will be executed that returns a list of items/objects. These items should then be displayed in the table.
> That means, that all existing content in the table should be replaced by the new items (one item per row)
> Actually all i want is to switch the old table contents with the new ones.
>
> Since i couldnt replace the table itself, i put it in a Panel, which i am now replacing when the button is pressed.
>
>
>
> The panel looks like this:
>
> TablePanel.java: -----------------------------------------------------------------------------------------------------------------------------
> public TablePanel(String id, List<MyObject> objectList) {
> super(id);
>
> DataView<MyObject> dataView = new DataView<MyObject>("objects", new ListDataProvider<MyObject>(objectList)) {
>
> @Override
> protected void populateItem(Item<MyObject> item) {
> MyObject obj = item.getModelObject();
> // populate
> }
> };
>
> dataView.setOutputMarkupId(true);
> add(dataView);
> }
> //TablePanel.java: ---------------------------------------------------------------------------------------------------------------------------
>
>
>
> The corresponding html file:
>
> TablePanel.html: -----------------------------------------------------------------------------------------------------------------------------
> <wicket:panel>
> <table id="table-horizontal">
>
> <thead>
> // header-content
> </thead>
>
> <tfoot>
> </tfoot>
>
> <tbody>
> <tr wicket:id="objects">
> <td><span wicket:id="itemValueX">[id]</span> </td>
> // etc
> </tr>
> </tbody>
> </table>
> </wicket:panel>
> //TablePanel.html: ---------------------------------------------------------------------------------------------------------------------------
>
>
>
> In the onSubmit function i build a new TablePanel object with the id from the old tablePanel and with the new list of items that i want to display, then add it to the target.
> It looks like this:
>
> AjaxButton: ----------------------------------------------------------------------------------------------------------------------------------
> @Override
> protected void onSubmit(AjaxRequestTarget target, Form<?> form) {
>
> TablePanel tp = new TablePanel(tablePanel.getId(), getItemList(selectedFromDropDown));
> tp.setOutputMarkupId(true);
> target.add(tp);
> }
> //AjaxButton: --------------------------------------------------------------------------------------------------------------------------------
>
>
>
> The page.html in which the TablePanel is inserted contains this markup:
>
> ItemPage.html: -------------------------------------------------------------------------------------------------------------------------------
> <wicket:extend>
>
> <form wicket:id="selectionForm">
> <select wicket:id="dropDown">
> <option>[some option]</option>
> </select>
> <input type="submit" wicket:id="selectButton" value="Show Items" />
> </form>
>
> <span wicket:id="TablePanel">[table content]</span>
>
> </wicket:extend>
> //ItemPage.html: -----------------------------------------------------------------------------------------------------------------------------
>
>
>
> After i press the button, the list of items gets generated and the new tablePanel is added to the target, but in the webbrowser i dont see any change.
> The populateItem method in the TablePanel's DataView does not get executed either.
>
> If i hardcode it, so that the TablePanel just uses a the getItems method - ignoring the ajaxbutton + dropbown - the items get displayed in the table just fine.
> So that part seems to work OK, i guess it's just something with the ajax.
> But i really don't know what i'm missing.
>
>
> Regards,
> Werner

---------------------------------------------------------------------
To unsubscribe, e-mail: [hidden email]
For additional commands, e-mail: [hidden email]

Werner Riegel

RE: Replacing the contents of a table with ajax

Thanks for your reply.
I've already done that, as described in my first mail, but it still doesn't work.

> Date: Wed, 7 Sep 2011 16:37:39 +0200
> From: [hidden email]
> To: [hidden email]
> Subject: Re: Replacing the contents of a table with ajax
>
> Usually, put a container around the table and update the container
> through ajax and not the table directly.
>
> /Robert
>
> On 09/07/2011 04:22 PM, Werner Riegel wrote:
> >
> > Hello,
> >
> > im trying to update the contents of a table, but it doesn't really work. I hope you guys can help me with that.
> >
> > My page looks like the following:
> > It has a Form, consisting of a drop down list + an ajaxbutton, and below the form is a table.
> > After choosing an element from the list and pressing the ajaxbutton,
> > a serverside function will be executed that returns a list of items/objects. These items should then be displayed in the table.
> > That means, that all existing content in the table should be replaced by the new items (one item per row)
> > Actually all i want is to switch the old table contents with the new ones.
> >
> > Since i couldnt replace the table itself, i put it in a Panel, which i am now replacing when the button is pressed.
> >
> >
> >
> > The panel looks like this:
> >
> > TablePanel.java: -----------------------------------------------------------------------------------------------------------------------------
> > public TablePanel(String id, List<MyObject> objectList) {
> > super(id);
> >
> > DataView<MyObject> dataView = new DataView<MyObject>("objects", new ListDataProvider<MyObject>(objectList)) {
> >
> > @Override
> > protected void populateItem(Item<MyObject> item) {
> > MyObject obj = item.getModelObject();
> > // populate
> > }
> > };
> >
> > dataView.setOutputMarkupId(true);
> > add(dataView);
> > }
> > //TablePanel.java: ---------------------------------------------------------------------------------------------------------------------------
> >
> >
> >
> > The corresponding html file:
> >
> > TablePanel.html: -----------------------------------------------------------------------------------------------------------------------------
> > <wicket:panel>
> > <table id="table-horizontal">
> >
> > <thead>
> > // header-content
> > </thead>
> >
> > <tfoot>
> > </tfoot>
> >
> > <tbody>
> > <tr wicket:id="objects">
> > <td><span wicket:id="itemValueX">[id]</span> </td>
> > // etc
> > </tr>
> > </tbody>
> > </table>
> > </wicket:panel>
> > //TablePanel.html: ---------------------------------------------------------------------------------------------------------------------------
> >
> >
> >
> > In the onSubmit function i build a new TablePanel object with the id from the old tablePanel and with the new list of items that i want to display, then add it to the target.
> > It looks like this:
> >
> > AjaxButton: ----------------------------------------------------------------------------------------------------------------------------------
> > @Override
> > protected void onSubmit(AjaxRequestTarget target, Form<?> form) {
> >
> > TablePanel tp = new TablePanel(tablePanel.getId(), getItemList(selectedFromDropDown));
> > tp.setOutputMarkupId(true);
> > target.add(tp);
> > }
> > //AjaxButton: --------------------------------------------------------------------------------------------------------------------------------
> >
> >
> >
> > The page.html in which the TablePanel is inserted contains this markup:
> >
> > ItemPage.html: -------------------------------------------------------------------------------------------------------------------------------
> > <wicket:extend>
> >
> > <form wicket:id="selectionForm">
> > <select wicket:id="dropDown">
> > <option>[some option]</option>
> > </select>
> > <input type="submit" wicket:id="selectButton" value="Show Items" />
> > </form>
> >
> > <span wicket:id="TablePanel">[table content]</span>
> >
> > </wicket:extend>
> > //ItemPage.html: -----------------------------------------------------------------------------------------------------------------------------
> >
> >
> >
> > After i press the button, the list of items gets generated and the new tablePanel is added to the target, but in the webbrowser i dont see any change.
> > The populateItem method in the TablePanel's DataView does not get executed either.
> >
> > If i hardcode it, so that the TablePanel just uses a the getItems method - ignoring the ajaxbutton + dropbown - the items get displayed in the table just fine.
> > So that part seems to work OK, i guess it's just something with the ajax.
> > But i really don't know what i'm missing.
> >
> >
> > Regards,
> > Werner
>
> ---------------------------------------------------------------------
> To unsubscribe, e-mail: [hidden email]
> For additional commands, e-mail: [hidden email]
>

Gabriel Landon

Re: Replacing the contents of a table with ajax

In reply to this post by Werner Riegel

Maybe you should try something like :

protected void onSubmit(AjaxRequestTarget target, Form<?> form) {

TablePanel tp = new TablePanel(tablePanel.getId(), getItemList(selectedFromDropDown));
tp.setOutputMarkupId(true);

//replace the panel of you page
getPage().replace(tp); //or getPage().replaceWith(tp);

target.add(tp);
}

Regards,

Gabriel.

Werner Riegel

RE: Replacing the contents of a table with ajax

Hello Gabriel,
thanks for your reply.

It works the way you described it. Thanks for that! :)

here's how it looks like now, maybe it helps someone else with the same problem:

// the variable tp is the already existing table panel on the page.

protected void onSubmit(AjaxRequestTarget target, Form<?> form) {
tp = new TablePanel(tp.getId(), getItemList(selectedFromDropDown));
tp.setOutputMarkupId(true);
getPage().replace(tp);
target.add(tp);
}

Regards,
Werner

> Date: Wed, 7 Sep 2011 14:47:50 -0700
> From: [hidden email]
> To: [hidden email]
> Subject: Re: Replacing the contents of a table with ajax
>
> Maybe you should try something like :
>
> protected void onSubmit(AjaxRequestTarget target, Form<?> form) {
>
> TablePanel tp = new TablePanel(tablePanel.getId(),
> getItemList(selectedFromDropDown));
> tp.setOutputMarkupId(true);
>
> //replace the panel of you page
> getPage().replace(tp); //or getPage().replaceWith(tp);
>
> target.add(tp);
> }
>
> Regards,
>
> Gabriel.
>
> --
> View this message in context: http://apache-wicket.1842946.n4.nabble.com/Replacing-the-contents-of-a-table-with-ajax-tp3796223p3797361.html
> Sent from the Users forum mailing list archive at Nabble.com.
>
> ---------------------------------------------------------------------
> To unsubscribe, e-mail: [hidden email]
> For additional commands, e-mail: [hidden email]
>