Re: jquery DataTable + wicket Cannot bind a listener
Hi, You should read about JavaScript event delegation. This is what they recommend. Wicket has basic support for this with org.apache.wicket.ajax.attributes.AjaxRequestAttributes#setChildSelector. I.e. you can register an Ajax behavior on the table or tbody and use childSelector to listen for events only on specific children, e.g. 'tr', 'td', 'td div', etc. This is more lightweight than using Wicket's built-in AjaxLink, but it is also a bit more complex for you as an application developer. Good luck! Martin Grigorov Wicket Training and Consulting https://twitter.com/mtgrigorov On Mon, Oct 27, 2014 at 8:37 PM, Jason Novotny jason.novo...@gmail.com wrote: Hi Martin, Thanks for the help-- I've reached out to them, the js appears pretty complex http://cdn.datatables.net/1.10.3/js/jquery.dataTables.js They indicate that listeners need to be added according to: http://www.datatables.net/examples/advanced_init/events_live.html Is there any kind of mode in wicket possibly that would preserve the listeners in this way? Thanks, Jason On 10/26/14, 11:40 PM, Martin Grigorov wrote: Hi, Try with Ajax loading of the new pages. I am not sure how DataTables removes and re-adds the rows later. It should use jQuery's clone(true, true) to preserve the event bindings. Ask in their forums. Martin Grigorov Wicket Training and Consulting https://twitter.com/mtgrigorov On Sun, Oct 26, 2014 at 12:46 AM, Jason Novotny jason.novo...@gmail.com wrote: I've managed to figure out the cause of the problem but no solution. jquery datatables removes DOM elements when configured for pagination. This means the AjaxLinks in my listview generate wicket javascript like: Wicket.Ajax.ajax({u:./executed?7-1.IBehaviorListener.0-container- executedTransactionPanel-executedListView-0- detailsLink,e:click,c: detailsLinkff});; Wicket.Ajax.ajax({u:./executed?7-1.IBehaviorListener.0-container- executedTransactionPanel-executedListView-1- detailsLink,e:click,c: detailsLink100});; Wicket.Ajax.ajax({u:./executed?7-1.IBehaviorListener.0-container- executedTransactionPanel-executedListView-2- detailsLink,e:click,c: detailsLink101});; Wicket.Ajax.ajax({u:./executed?7-1.IBehaviorListener.0-container- executedTransactionPanel-executedListView-3- detailsLink,e:click,c: detailsLink102});; ... If the table has 2 pages, it removes the DOM elements from the 2nd page so I get the wicket debug error Wicket.Ajax: Cannot bind a listener for event click on element elementId because the element is not in the DOM Now when I hit the link for next page of the table, the DOM has been updated to reflect the rows, but the javascript events need to be added again and so the links are broken. Is there any good way to do this? Thanks, Jason On 10/24/14, 1:24 PM, Jason Novotny wrote: I should add I'm using Wicket 6.17. Thanks, Jason On 10/24/14, 10:47 AM, Jason Novotny wrote: Hi, I'm using latest jquery DataTable with a ListView and in wicket:head of the page, I initiate the DataTable: $(function () { $('.datatable_executed').dataTable({ 'lengthChange': false, 'dom': 'topdoc-filterholdeript', language: {info: _START_-_END_ of _TOTAL_}, aaSorting: [], 'iDisplayLength': 12 }); }); It all looks good, however because one of my columns contains AjaxLinks, I get an error from my wicket debug window with the following: Wicket.Ajax: Cannot bind a listener for event click on element elementId because the element is not in the DOM The thing is the links seem to actually work on the first page, but when I click - to go to the next page the links don't work. Has anyone experienced this before or have any idea how I can debug this? Thanks, Jason - To unsubscribe, e-mail: users-unsubscr...@wicket.apache.org For additional commands, e-mail: users-h...@wicket.apache.org
Re: jquery DataTable + wicket Cannot bind a listener
Hi Martin, Are there examples? What about this simple piece of code... WebMarkupContainer tbody = new WebMarkupContainer(tbody); tbody.add(new AjaxEventBehavior(onclick) { @Override protected void onEvent(AjaxRequestTarget target) { } protected void updateAjaxAttributes(AjaxRequestAttributes attributes) { super.updateAjaxAttributes(attributes); attributes.setChildSelector(td); // TODO what do i do here? } }); Thanks, Jason On 10/28/14, 1:10 AM, Martin Grigorov wrote: Hi, You should read about JavaScript event delegation. This is what they recommend. Wicket has basic support for this with org.apache.wicket.ajax.attributes.AjaxRequestAttributes#setChildSelector. I.e. you can register an Ajax behavior on the table or tbody and use childSelector to listen for events only on specific children, e.g. 'tr', 'td', 'td div', etc. This is more lightweight than using Wicket's built-in AjaxLink, but it is also a bit more complex for you as an application developer. Good luck! Martin Grigorov Wicket Training and Consulting https://twitter.com/mtgrigorov On Mon, Oct 27, 2014 at 8:37 PM, Jason Novotny jason.novo...@gmail.com wrote: Hi Martin, Thanks for the help-- I've reached out to them, the js appears pretty complex http://cdn.datatables.net/1.10.3/js/jquery.dataTables.js They indicate that listeners need to be added according to: http://www.datatables.net/examples/advanced_init/events_live.html Is there any kind of mode in wicket possibly that would preserve the listeners in this way? Thanks, Jason On 10/26/14, 11:40 PM, Martin Grigorov wrote: Hi, Try with Ajax loading of the new pages. I am not sure how DataTables removes and re-adds the rows later. It should use jQuery's clone(true, true) to preserve the event bindings. Ask in their forums. Martin Grigorov Wicket Training and Consulting https://twitter.com/mtgrigorov On Sun, Oct 26, 2014 at 12:46 AM, Jason Novotny jason.novo...@gmail.com wrote: I've managed to figure out the cause of the problem but no solution. jquery datatables removes DOM elements when configured for pagination. This means the AjaxLinks in my listview generate wicket javascript like: Wicket.Ajax.ajax({u:./executed?7-1.IBehaviorListener.0-container- executedTransactionPanel-executedListView-0- detailsLink,e:click,c: detailsLinkff});; Wicket.Ajax.ajax({u:./executed?7-1.IBehaviorListener.0-container- executedTransactionPanel-executedListView-1- detailsLink,e:click,c: detailsLink100});; Wicket.Ajax.ajax({u:./executed?7-1.IBehaviorListener.0-container- executedTransactionPanel-executedListView-2- detailsLink,e:click,c: detailsLink101});; Wicket.Ajax.ajax({u:./executed?7-1.IBehaviorListener.0-container- executedTransactionPanel-executedListView-3- detailsLink,e:click,c: detailsLink102});; ... If the table has 2 pages, it removes the DOM elements from the 2nd page so I get the wicket debug error Wicket.Ajax: Cannot bind a listener for event click on element elementId because the element is not in the DOM Now when I hit the link for next page of the table, the DOM has been updated to reflect the rows, but the javascript events need to be added again and so the links are broken. Is there any good way to do this? Thanks, Jason On 10/24/14, 1:24 PM, Jason Novotny wrote: I should add I'm using Wicket 6.17. Thanks, Jason On 10/24/14, 10:47 AM, Jason Novotny wrote: Hi, I'm using latest jquery DataTable with a ListView and in wicket:head of the page, I initiate the DataTable: $(function () { $('.datatable_executed').dataTable({ 'lengthChange': false, 'dom': 'topdoc-filterholdeript', language: {info: _START_-_END_ of _TOTAL_}, aaSorting: [], 'iDisplayLength': 12 }); }); It all looks good, however because one of my columns contains AjaxLinks, I get an error from my wicket debug window with the following: Wicket.Ajax: Cannot bind a listener for event click on element elementId because the element is not in the DOM The thing is the links seem to actually work on the first page, but when I click - to go to the next page the links don't work. Has anyone experienced this before or have any idea how I can debug this? Thanks, Jason - To unsubscribe, e-mail: users-unsubscr...@wicket.apache.org For additional commands, e-mail: users-h...@wicket.apache.org - To unsubscribe, e-mail: users-unsubscr...@wicket.apache.org For additional commands, e-mail: users-h...@wicket.apache.org
Re: jquery DataTable + wicket Cannot bind a listener
Hi, On Tue, Oct 28, 2014 at 5:00 PM, Jason Novotny jason.novo...@gmail.com wrote: Hi Martin, Are there examples? What about this simple piece of code... I don't have any open source example at hand ... :-/ WebMarkupContainer tbody = new WebMarkupContainer(tbody); tbody.add(new AjaxEventBehavior(onclick) { use just 'click' @Override protected void onEvent(AjaxRequestTarget target) { } protected void updateAjaxAttributes(AjaxRequestAttributes attributes) { super.updateAjaxAttributes(attributes); attributes.setChildSelector(td); // TODO what do i do here? this is enough to make a listener on the whole tbody that will notify you only when a td is clicked to make it useful you will need some JS code to extract the values for this td e.g. attributes.getDynamicExtraParameters().add(return extractData(attrs.event)) where 'extractData' is a your own JS function that is loaded in the current document. It can extract all needed info from the JS event - event.target, some data-xyz attributes, anything you need once extracted you will need to put it in a JS object as the one returned by http://api.jquery.com/jquery.param/ P.S. I think Ernesto Barreiro have created a demo at his GitHub account before for another Wicket user. But I don't see it as a project at https://github.com/reiern70/antilia-bits } }); Thanks, Jason On 10/28/14, 1:10 AM, Martin Grigorov wrote: Hi, You should read about JavaScript event delegation. This is what they recommend. Wicket has basic support for this with org.apache.wicket.ajax.attributes.AjaxRequestAttributes# setChildSelector. I.e. you can register an Ajax behavior on the table or tbody and use childSelector to listen for events only on specific children, e.g. 'tr', 'td', 'td div', etc. This is more lightweight than using Wicket's built-in AjaxLink, but it is also a bit more complex for you as an application developer. Good luck! Martin Grigorov Wicket Training and Consulting https://twitter.com/mtgrigorov On Mon, Oct 27, 2014 at 8:37 PM, Jason Novotny jason.novo...@gmail.com wrote: Hi Martin, Thanks for the help-- I've reached out to them, the js appears pretty complex http://cdn.datatables.net/1.10.3/js/jquery.dataTables.js They indicate that listeners need to be added according to: http://www.datatables.net/examples/advanced_init/events_live.html Is there any kind of mode in wicket possibly that would preserve the listeners in this way? Thanks, Jason On 10/26/14, 11:40 PM, Martin Grigorov wrote: Hi, Try with Ajax loading of the new pages. I am not sure how DataTables removes and re-adds the rows later. It should use jQuery's clone(true, true) to preserve the event bindings. Ask in their forums. Martin Grigorov Wicket Training and Consulting https://twitter.com/mtgrigorov On Sun, Oct 26, 2014 at 12:46 AM, Jason Novotny jason.novo...@gmail.com wrote: I've managed to figure out the cause of the problem but no solution. jquery datatables removes DOM elements when configured for pagination. This means the AjaxLinks in my listview generate wicket javascript like: Wicket.Ajax.ajax({u:./executed?7-1.IBehaviorListener.0-container- executedTransactionPanel-executedListView-0- detailsLink,e:click,c: detailsLinkff});; Wicket.Ajax.ajax({u:./executed?7-1.IBehaviorListener.0-container- executedTransactionPanel-executedListView-1- detailsLink,e:click,c: detailsLink100});; Wicket.Ajax.ajax({u:./executed?7-1.IBehaviorListener.0-container- executedTransactionPanel-executedListView-2- detailsLink,e:click,c: detailsLink101});; Wicket.Ajax.ajax({u:./executed?7-1.IBehaviorListener.0-container- executedTransactionPanel-executedListView-3- detailsLink,e:click,c: detailsLink102});; ... If the table has 2 pages, it removes the DOM elements from the 2nd page so I get the wicket debug error Wicket.Ajax: Cannot bind a listener for event click on element elementId because the element is not in the DOM Now when I hit the link for next page of the table, the DOM has been updated to reflect the rows, but the javascript events need to be added again and so the links are broken. Is there any good way to do this? Thanks, Jason On 10/24/14, 1:24 PM, Jason Novotny wrote: I should add I'm using Wicket 6.17. Thanks, Jason On 10/24/14, 10:47 AM, Jason Novotny wrote: Hi, I'm using latest jquery DataTable with a ListView and in wicket:head of the page, I initiate the DataTable: $(function () { $('.datatable_executed').dataTable({ 'lengthChange': false, 'dom': 'topdoc-filterholdeript', language: {info: _START_-_END_ of _TOTAL_}, aaSorting: [], 'iDisplayLength': 12 }); }); It all looks good, however because
Re: jquery DataTable + wicket Cannot bind a listener
Hi, Try with Ajax loading of the new pages. I am not sure how DataTables removes and re-adds the rows later. It should use jQuery's clone(true, true) to preserve the event bindings. Ask in their forums. Martin Grigorov Wicket Training and Consulting https://twitter.com/mtgrigorov On Sun, Oct 26, 2014 at 12:46 AM, Jason Novotny jason.novo...@gmail.com wrote: I've managed to figure out the cause of the problem but no solution. jquery datatables removes DOM elements when configured for pagination. This means the AjaxLinks in my listview generate wicket javascript like: Wicket.Ajax.ajax({u:./executed?7-1.IBehaviorListener.0-container- executedTransactionPanel-executedListView-0-detailsLink,e:click,c: detailsLinkff});; Wicket.Ajax.ajax({u:./executed?7-1.IBehaviorListener.0-container- executedTransactionPanel-executedListView-1-detailsLink,e:click,c: detailsLink100});; Wicket.Ajax.ajax({u:./executed?7-1.IBehaviorListener.0-container- executedTransactionPanel-executedListView-2-detailsLink,e:click,c: detailsLink101});; Wicket.Ajax.ajax({u:./executed?7-1.IBehaviorListener.0-container- executedTransactionPanel-executedListView-3-detailsLink,e:click,c: detailsLink102});; ... If the table has 2 pages, it removes the DOM elements from the 2nd page so I get the wicket debug error Wicket.Ajax: Cannot bind a listener for event click on element elementId because the element is not in the DOM Now when I hit the link for next page of the table, the DOM has been updated to reflect the rows, but the javascript events need to be added again and so the links are broken. Is there any good way to do this? Thanks, Jason On 10/24/14, 1:24 PM, Jason Novotny wrote: I should add I'm using Wicket 6.17. Thanks, Jason On 10/24/14, 10:47 AM, Jason Novotny wrote: Hi, I'm using latest jquery DataTable with a ListView and in wicket:head of the page, I initiate the DataTable: $(function () { $('.datatable_executed').dataTable({ 'lengthChange': false, 'dom': 'topdoc-filterholdeript', language: {info: _START_-_END_ of _TOTAL_}, aaSorting: [], 'iDisplayLength': 12 }); }); It all looks good, however because one of my columns contains AjaxLinks, I get an error from my wicket debug window with the following: Wicket.Ajax: Cannot bind a listener for event click on element elementId because the element is not in the DOM The thing is the links seem to actually work on the first page, but when I click - to go to the next page the links don't work. Has anyone experienced this before or have any idea how I can debug this? Thanks, Jason
Re: jquery DataTable + wicket Cannot bind a listener
Hi Martin, Thanks for the help-- I've reached out to them, the js appears pretty complex http://cdn.datatables.net/1.10.3/js/jquery.dataTables.js They indicate that listeners need to be added according to: http://www.datatables.net/examples/advanced_init/events_live.html Is there any kind of mode in wicket possibly that would preserve the listeners in this way? Thanks, Jason On 10/26/14, 11:40 PM, Martin Grigorov wrote: Hi, Try with Ajax loading of the new pages. I am not sure how DataTables removes and re-adds the rows later. It should use jQuery's clone(true, true) to preserve the event bindings. Ask in their forums. Martin Grigorov Wicket Training and Consulting https://twitter.com/mtgrigorov On Sun, Oct 26, 2014 at 12:46 AM, Jason Novotny jason.novo...@gmail.com wrote: I've managed to figure out the cause of the problem but no solution. jquery datatables removes DOM elements when configured for pagination. This means the AjaxLinks in my listview generate wicket javascript like: Wicket.Ajax.ajax({u:./executed?7-1.IBehaviorListener.0-container- executedTransactionPanel-executedListView-0-detailsLink,e:click,c: detailsLinkff});; Wicket.Ajax.ajax({u:./executed?7-1.IBehaviorListener.0-container- executedTransactionPanel-executedListView-1-detailsLink,e:click,c: detailsLink100});; Wicket.Ajax.ajax({u:./executed?7-1.IBehaviorListener.0-container- executedTransactionPanel-executedListView-2-detailsLink,e:click,c: detailsLink101});; Wicket.Ajax.ajax({u:./executed?7-1.IBehaviorListener.0-container- executedTransactionPanel-executedListView-3-detailsLink,e:click,c: detailsLink102});; ... If the table has 2 pages, it removes the DOM elements from the 2nd page so I get the wicket debug error Wicket.Ajax: Cannot bind a listener for event click on element elementId because the element is not in the DOM Now when I hit the link for next page of the table, the DOM has been updated to reflect the rows, but the javascript events need to be added again and so the links are broken. Is there any good way to do this? Thanks, Jason On 10/24/14, 1:24 PM, Jason Novotny wrote: I should add I'm using Wicket 6.17. Thanks, Jason On 10/24/14, 10:47 AM, Jason Novotny wrote: Hi, I'm using latest jquery DataTable with a ListView and in wicket:head of the page, I initiate the DataTable: $(function () { $('.datatable_executed').dataTable({ 'lengthChange': false, 'dom': 'topdoc-filterholdeript', language: {info: _START_-_END_ of _TOTAL_}, aaSorting: [], 'iDisplayLength': 12 }); }); It all looks good, however because one of my columns contains AjaxLinks, I get an error from my wicket debug window with the following: Wicket.Ajax: Cannot bind a listener for event click on element elementId because the element is not in the DOM The thing is the links seem to actually work on the first page, but when I click - to go to the next page the links don't work. Has anyone experienced this before or have any idea how I can debug this? Thanks, Jason - To unsubscribe, e-mail: users-unsubscr...@wicket.apache.org For additional commands, e-mail: users-h...@wicket.apache.org
Re: jquery DataTable + wicket Cannot bind a listener
I've managed to figure out the cause of the problem but no solution. jquery datatables removes DOM elements when configured for pagination. This means the AjaxLinks in my listview generate wicket javascript like: Wicket.Ajax.ajax({u:./executed?7-1.IBehaviorListener.0-container-executedTransactionPanel-executedListView-0-detailsLink,e:click,c:detailsLinkff});; Wicket.Ajax.ajax({u:./executed?7-1.IBehaviorListener.0-container-executedTransactionPanel-executedListView-1-detailsLink,e:click,c:detailsLink100});; Wicket.Ajax.ajax({u:./executed?7-1.IBehaviorListener.0-container-executedTransactionPanel-executedListView-2-detailsLink,e:click,c:detailsLink101});; Wicket.Ajax.ajax({u:./executed?7-1.IBehaviorListener.0-container-executedTransactionPanel-executedListView-3-detailsLink,e:click,c:detailsLink102});; ... If the table has 2 pages, it removes the DOM elements from the 2nd page so I get the wicket debug error Wicket.Ajax: Cannot bind a listener for event click on element elementId because the element is not in the DOM Now when I hit the link for next page of the table, the DOM has been updated to reflect the rows, but the javascript events need to be added again and so the links are broken. Is there any good way to do this? Thanks, Jason On 10/24/14, 1:24 PM, Jason Novotny wrote: I should add I'm using Wicket 6.17. Thanks, Jason On 10/24/14, 10:47 AM, Jason Novotny wrote: Hi, I'm using latest jquery DataTable with a ListView and in wicket:head of the page, I initiate the DataTable: $(function () { $('.datatable_executed').dataTable({ 'lengthChange': false, 'dom': 'topdoc-filterholdeript', language: {info: _START_-_END_ of _TOTAL_}, aaSorting: [], 'iDisplayLength': 12 }); }); It all looks good, however because one of my columns contains AjaxLinks, I get an error from my wicket debug window with the following: Wicket.Ajax: Cannot bind a listener for event click on element elementId because the element is not in the DOM The thing is the links seem to actually work on the first page, but when I click - to go to the next page the links don't work. Has anyone experienced this before or have any idea how I can debug this? Thanks, Jason
jquery DataTable + wicket Cannot bind a listener
Hi, I'm using latest jquery DataTable with a ListView and in wicket:head of the page, I initiate the DataTable: $(function () { $('.datatable_executed').dataTable({ 'lengthChange': false, 'dom': 'topdoc-filterholdeript', language: {info: _START_-_END_ of _TOTAL_}, aaSorting: [], 'iDisplayLength': 12 }); }); It all looks good, however because one of my columns contains AjaxLinks, I get an error from my wicket debug window with the following: Wicket.Ajax: Cannot bind a listener for event click on element elementId because the element is not in the DOM The thing is the links seem to actually work on the first page, but when I click - to go to the next page the links don't work. Has anyone experienced this before or have any idea how I can debug this? Thanks, Jason - To unsubscribe, e-mail: users-unsubscr...@wicket.apache.org For additional commands, e-mail: users-h...@wicket.apache.org
Re: jquery DataTable + wicket Cannot bind a listener
I should add I'm using Wicket 6.17. Thanks, Jason On 10/24/14, 10:47 AM, Jason Novotny wrote: Hi, I'm using latest jquery DataTable with a ListView and in wicket:head of the page, I initiate the DataTable: $(function () { $('.datatable_executed').dataTable({ 'lengthChange': false, 'dom': 'topdoc-filterholdeript', language: {info: _START_-_END_ of _TOTAL_}, aaSorting: [], 'iDisplayLength': 12 }); }); It all looks good, however because one of my columns contains AjaxLinks, I get an error from my wicket debug window with the following: Wicket.Ajax: Cannot bind a listener for event click on element elementId because the element is not in the DOM The thing is the links seem to actually work on the first page, but when I click - to go to the next page the links don't work. Has anyone experienced this before or have any idea how I can debug this? Thanks, Jason - To unsubscribe, e-mail: users-unsubscr...@wicket.apache.org For additional commands, e-mail: users-h...@wicket.apache.org