You are viewing a plain text version of this content. The canonical link for it is here.
Posted to users@wicket.apache.org by dlock <dl...@gmacsoftware.com> on 2013/06/07 16:15:52 UTC
AjaxFallbackDefaultDataTable: cell not receiving event after
sorting
Hi.
I have a simple abstract panel that I display as a cell within an
AjaxFallbackDefaultDataTable. The panel has a label and a WebComponent that
shows an icon (based on passed in css).
The WebComponent has an AjaxEventBehaviour("click") added and whenever the
icon is clicked the handling is delegated to the concrete implementation
(think of the table cell having an action associated with it, such as edit
etc). Below is the (simplified) code of the LabelIconPanel...
public abstract class LabelIconPanel<T> extends Panel
{
private static final long serialVersionUID = 1L;
public LabelIconPanel(String id, IModel<T> model, IModel<String> text,
String cssIcon)
{
super(id, model);
Label label = new Label("label", text);
Component icon = new WebComponent("icon");
icon.add(new AjaxEventBehavior("click")
{
private static final long serialVersionUID = 1L;
@Override
protected void onEvent(AjaxRequestTarget target)
{
LabelIconPanel.this.onClick(target);
}
});
icon.add(new AttributeAppender("class", new Model<String>(cssIcon),
" "));
add(label);
add(icon);
}
public abstract void onClick(AjaxRequestTarget target);
}
_____________________
The panel is added to the table via a PropertyColumn like so...
new PropertyColumn<SomePojo, String>(new Model<String>("Some header"),
"someProperty")
{
private static final long serialVersionUID = 1L;
@Override
public void populateItem(Item<ICellPopulator<SomePojo>>
item, String componentId, final IModel<SomePojo> rowModel)
{
LabelIconPanel<SomePojo> labelIconPanel =
new LabelIconPanel<SomePojo>(componentId, rowModel,
new Model<String>(
rowModel.getObject().getPropertyValue()),
"icon-pencil")
{
private static final long serialVersionUID = 1L;
@Override
public void onClick(AjaxRequestTarget target)
{
// handle the icon being clicked
here...show a dialog to edit property etc.
}
};
item.add(labelIconPanel);
}
}
____________________________
The issue I am having is that when I sort the table via the header, the icon
in the above panel is no longer receiving the click event (for any rows).
If I revert the sort, the icons in each row work as expected. If I refresh
the page after sorting, the icons work as expected.
This is my first post on here as I am new to Wicket development, so any
pointers as to what might be going on or suggestions as to where I might
need to start looking would be appreciated.
dl
--
View this message in context: http://apache-wicket.1842946.n4.nabble.com/AjaxFallbackDefaultDataTable-cell-not-receiving-event-after-sorting-tp4659277.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: AjaxFallbackDefaultDataTable: cell not receiving event after
sorting
Posted by dlock <dl...@gmacsoftware.com>.
Hi Sven.
I created a QuickStart as per your suggestion and in the process of writing
it I discovered what the issue was.
Basically the mark-up had an erroneous enclosure tag defined which was
causing the problem.
<body>
<wicket:panel>
*<div wicket:enclosure="table">*
[table]
* </div>*
</wicket:panel>
</body>
Removing the enclosure tag rectified the problem.
At least now I know how to create a QuickStart :)
Thanks for you help.
dl
--
View this message in context: http://apache-wicket.1842946.n4.nabble.com/AjaxFallbackDefaultDataTable-cell-not-receiving-event-after-sorting-tp4659277p4659303.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: AjaxFallbackDefaultDataTable: cell not receiving event after
sorting
Posted by Sven Meier <sv...@meiers.net>.
Hi,
when a column is sorted, the whole table will be updated on the Ajax
request: That includes its HTML markup *and* the JavaScript in the header.
So normally the markup ids should match.
I can't think of a reason why this fails on your project. Could you
create a quickstart?
Sven
On 06/08/2013 12:37 PM, dlock wrote:
> Hi Sven.
> Thanks for taking a look at my question.
>
> I have been trying to debug the issue (Ajax is new to me so please be
> patient). It looks like the issue is more fundamental than what I first
> thought. I added a simple row listener like so...
>
> @Override
> protected Item<T> newRowItem(String id, int index, IModel<T>
> model)
> {
> Item<T> item = super.newRowItem(id, index, model);
> item.add(new RowBehavior<T>("onclick", model)
> {
> private static final long serialVersionUID = 1L;
> @Override
> protected void onEvent(IModel<T> model,
> AjaxRequestTarget target)
> {
> m_logger.info("row clicked: {}", model.getObject());
> }
> });
> return item;
> }
>
> Prior to sorting, the content of the row is printed when clicked. After
> sorting nothing is printed, sorting again to revert back to the original
> state will print the contents on a row click.
>
> Every other sort (the one that results in the failure scenario) results in
> the following errors being logged in the Wicket Ajax Debug Window
>
> ERROR: Cannot find element with id: iconc2
> ERROR: Cannot find element with id: id21c3
> ERROR: Cannot find element with id: iconc4
> ERROR: Cannot find element with id: id22c5
> ERROR: Cannot find element with id: orderByLinkc6
> ERROR: Cannot find element with id: orderByLinkc7
> ERROR: Cannot find element with id: orderByLinkc8
>
> The ids obviously change with each sort. From what I can tell the
> orderByLink ones are the header links that result in a sort when clicked and
> the icon and id ones relate to the label/icon described in the original
> problem.
>
> There is JavaScript created that links the above ids to their behaviours....
> Something like this
>
> Wicket.Ajax.ajax({"u":"./users?2-5.IBehaviorListener.1-usersTable-table-body-rows-25-cells-3-cell-icon","e":"click","c":"iconc6"});;
> Wicket.Ajax.ajax({"u":"./users?2-5.IBehaviorListener.0-usersTable-table-body-rows-25","e":"click","c":"id25c7"});;
> Wicket.Ajax.ajax({"u":"./users?2-5.IBehaviorListener.1-usersTable-table-body-rows-26-cells-3-cell-icon","e":"click","c":"iconc8"});;
> Wicket.Ajax.ajax({"u":"./users?2-5.IBehaviorListener.0-usersTable-table-body-rows-26","e":"click","c":"id26c9"});;
> Wicket.Ajax.ajax({"u":"./users?2-5.IBehaviorListener.1-usersTable-table-topToolbars-toolbars-1-headers-49-header-orderByLink","e":"click","c":"orderByLinkca"});;
> Wicket.Ajax.ajax({"u":"./users?2-5.IBehaviorListener.1-usersTable-table-topToolbars-toolbars-1-headers-50-header-orderByLink","e":"click","c":"orderByLinkcb"});;
> Wicket.Ajax.ajax({"u":"./users?2-5.IBehaviorListener.1-usersTable-table-topToolbars-toolbars-1-headers-52-header-orderByLink","e":"click","c":"orderByLinkcc"});;
> Wicket.Ajax.ajax({"u":"./users?2-5.IBehaviorLis
>
>
> When everything is working the markup and javascript ids align. When it
> fails, it looks like the previous javascript remains (hence why the row
> listener is failing)
>
> So, the (new) question I have is, where/how does the JavaScript and markup
> get associated and why can't the newly generated ids be found (yet on a
> resort they can).
>
> Some possibly (not) important points. The table resides in an extension to
> Panel which is added to a page.
> I am using Wicket 6.8.0
>
> Any help/pointers would be appreciated.
>
> dl
>
>
>
>
>
>
>
>
>
>
> --
> View this message in context: http://apache-wicket.1842946.n4.nabble.com/AjaxFallbackDefaultDataTable-cell-not-receiving-event-after-sorting-tp4659277p4659294.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
>
---------------------------------------------------------------------
To unsubscribe, e-mail: users-unsubscribe@wicket.apache.org
For additional commands, e-mail: users-help@wicket.apache.org
Re: AjaxFallbackDefaultDataTable: cell not receiving event after
sorting
Posted by dlock <dl...@gmacsoftware.com>.
Hi Sven.
Thanks for taking a look at my question.
I have been trying to debug the issue (Ajax is new to me so please be
patient). It looks like the issue is more fundamental than what I first
thought. I added a simple row listener like so...
@Override
protected Item<T> newRowItem(String id, int index, IModel<T>
model)
{
Item<T> item = super.newRowItem(id, index, model);
item.add(new RowBehavior<T>("onclick", model)
{
private static final long serialVersionUID = 1L;
@Override
protected void onEvent(IModel<T> model,
AjaxRequestTarget target)
{
m_logger.info("row clicked: {}", model.getObject());
}
});
return item;
}
Prior to sorting, the content of the row is printed when clicked. After
sorting nothing is printed, sorting again to revert back to the original
state will print the contents on a row click.
Every other sort (the one that results in the failure scenario) results in
the following errors being logged in the Wicket Ajax Debug Window
ERROR: Cannot find element with id: iconc2
ERROR: Cannot find element with id: id21c3
ERROR: Cannot find element with id: iconc4
ERROR: Cannot find element with id: id22c5
ERROR: Cannot find element with id: orderByLinkc6
ERROR: Cannot find element with id: orderByLinkc7
ERROR: Cannot find element with id: orderByLinkc8
The ids obviously change with each sort. From what I can tell the
orderByLink ones are the header links that result in a sort when clicked and
the icon and id ones relate to the label/icon described in the original
problem.
There is JavaScript created that links the above ids to their behaviours....
Something like this
Wicket.Ajax.ajax({"u":"./users?2-5.IBehaviorListener.1-usersTable-table-body-rows-25-cells-3-cell-icon","e":"click","c":"iconc6"});;
Wicket.Ajax.ajax({"u":"./users?2-5.IBehaviorListener.0-usersTable-table-body-rows-25","e":"click","c":"id25c7"});;
Wicket.Ajax.ajax({"u":"./users?2-5.IBehaviorListener.1-usersTable-table-body-rows-26-cells-3-cell-icon","e":"click","c":"iconc8"});;
Wicket.Ajax.ajax({"u":"./users?2-5.IBehaviorListener.0-usersTable-table-body-rows-26","e":"click","c":"id26c9"});;
Wicket.Ajax.ajax({"u":"./users?2-5.IBehaviorListener.1-usersTable-table-topToolbars-toolbars-1-headers-49-header-orderByLink","e":"click","c":"orderByLinkca"});;
Wicket.Ajax.ajax({"u":"./users?2-5.IBehaviorListener.1-usersTable-table-topToolbars-toolbars-1-headers-50-header-orderByLink","e":"click","c":"orderByLinkcb"});;
Wicket.Ajax.ajax({"u":"./users?2-5.IBehaviorListener.1-usersTable-table-topToolbars-toolbars-1-headers-52-header-orderByLink","e":"click","c":"orderByLinkcc"});;
Wicket.Ajax.ajax({"u":"./users?2-5.IBehaviorLis
When everything is working the markup and javascript ids align. When it
fails, it looks like the previous javascript remains (hence why the row
listener is failing)
So, the (new) question I have is, where/how does the JavaScript and markup
get associated and why can't the newly generated ids be found (yet on a
resort they can).
Some possibly (not) important points. The table resides in an extension to
Panel which is added to a page.
I am using Wicket 6.8.0
Any help/pointers would be appreciated.
dl
--
View this message in context: http://apache-wicket.1842946.n4.nabble.com/AjaxFallbackDefaultDataTable-cell-not-receiving-event-after-sorting-tp4659277p4659294.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: AjaxFallbackDefaultDataTable: cell not receiving event after
sorting
Posted by Sven Meier <sv...@meiers.net>.
Hi,
your solution looks good to me.
Check the Ajax debug window for any problems with the requests. Then put
a breakpoint on your behavior's #onEvent() and check whether is is
triggered.
Sven
On 06/07/2013 04:15 PM, dlock wrote:
> Hi.
>
> I have a simple abstract panel that I display as a cell within an
> AjaxFallbackDefaultDataTable. The panel has a label and a WebComponent that
> shows an icon (based on passed in css).
>
> The WebComponent has an AjaxEventBehaviour("click") added and whenever the
> icon is clicked the handling is delegated to the concrete implementation
> (think of the table cell having an action associated with it, such as edit
> etc). Below is the (simplified) code of the LabelIconPanel...
>
> public abstract class LabelIconPanel<T> extends Panel
> {
> private static final long serialVersionUID = 1L;
> public LabelIconPanel(String id, IModel<T> model, IModel<String> text,
> String cssIcon)
> {
> super(id, model);
>
> Label label = new Label("label", text);
>
> Component icon = new WebComponent("icon");
> icon.add(new AjaxEventBehavior("click")
> {
> private static final long serialVersionUID = 1L;
>
> @Override
> protected void onEvent(AjaxRequestTarget target)
> {
> LabelIconPanel.this.onClick(target);
> }
> });
>
> icon.add(new AttributeAppender("class", new Model<String>(cssIcon),
> " "));
> add(label);
> add(icon);
> }
> public abstract void onClick(AjaxRequestTarget target);
> }
> _____________________
>
> The panel is added to the table via a PropertyColumn like so...
>
> new PropertyColumn<SomePojo, String>(new Model<String>("Some header"),
> "someProperty")
> {
> private static final long serialVersionUID = 1L;
>
> @Override
> public void populateItem(Item<ICellPopulator<SomePojo>>
> item, String componentId, final IModel<SomePojo> rowModel)
> {
>
> LabelIconPanel<SomePojo> labelIconPanel =
> new LabelIconPanel<SomePojo>(componentId, rowModel,
> new Model<String>(
> rowModel.getObject().getPropertyValue()),
> "icon-pencil")
> {
> private static final long serialVersionUID = 1L;
>
> @Override
> public void onClick(AjaxRequestTarget target)
> {
> // handle the icon being clicked
> here...show a dialog to edit property etc.
> }
> };
>
> item.add(labelIconPanel);
> }
> }
>
> ____________________________
>
> The issue I am having is that when I sort the table via the header, the icon
> in the above panel is no longer receiving the click event (for any rows).
> If I revert the sort, the icons in each row work as expected. If I refresh
> the page after sorting, the icons work as expected.
>
> This is my first post on here as I am new to Wicket development, so any
> pointers as to what might be going on or suggestions as to where I might
> need to start looking would be appreciated.
>
> dl
>
>
>
>
>
> --
> View this message in context: http://apache-wicket.1842946.n4.nabble.com/AjaxFallbackDefaultDataTable-cell-not-receiving-event-after-sorting-tp4659277.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
>
---------------------------------------------------------------------
To unsubscribe, e-mail: users-unsubscribe@wicket.apache.org
For additional commands, e-mail: users-help@wicket.apache.org