You are viewing a plain text version of this content. The canonical link for it is here.
Posted to users@wicket.apache.org by Werner Riegel <cr...@hotmail.com> on 2011/09/07 16:22:38 UTC
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
RE: Replacing the contents of a table with ajax
Posted by Werner Riegel <cr...@hotmail.com>.
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: robert.dahlstrom@ongame.com
> To: users@wicket.apache.org
> 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: users-unsubscribe@wicket.apache.org
> For additional commands, e-mail: users-help@wicket.apache.org
>
Re: Replacing the contents of a table with ajax
Posted by Robert Dahlström <ro...@ongame.com>.
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: users-unsubscribe@wicket.apache.org
For additional commands, e-mail: users-help@wicket.apache.org
RE: Replacing the contents of a table with ajax
Posted by Werner Riegel <cr...@hotmail.com>.
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: glandon@piti.pf
> To: users@wicket.apache.org
> 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: users-unsubscribe@wicket.apache.org
> For additional commands, e-mail: users-help@wicket.apache.org
>
Re: Replacing the contents of a table with ajax
Posted by Gabriel Landon <gl...@piti.pf>.
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: users-unsubscribe@wicket.apache.org
For additional commands, e-mail: users-help@wicket.apache.org