Anchor tags not working in Datatables

[alexanderschillemans]

Hi

I'm using Datatables to render my HTML table. I have a few columns that I want to dynamically update by using Intercooler.

Lets say this is my layout:

Name	Activated?	Actions
John Doe	Yes	Deactivate
Sam Smith	No	Activate

When I want to click on "deactivate" or "activate", I want the column 'Activated?' to change. I was able to do this succesfully with intercooler, sending a request to the server and then responding with the HTML and telling IC my target column and row.

However, when I started using datatables this anchor tag does not seem to work anymore. The only thing it does when I click it is reloading the page. No requests are being made to my server and no columns are updated. I'm pulling my hair out for a few hours now trying to see why it would do this, but I cannot seem to find a solution.

To be sure my code was OK, I took it out of the datatable and tried to execute it again and then it worked fine! Only when I put it into the datatable again, it stops working.

Does anybody have experience with datatables and intercooler js working together?
Thanks!

[1cg]

Hi Alex, My guess is that you need to re-initialize the data tables when the new content comes down. So you need to change something like this: $(document).ready(function() { $('#example').DataTable(); } ); to something like this: Intercooler.ready(function(content) { $(content).find('#example').DataTable(); } ); Also, if you want to get history working properly, you are going to have to uninitialize the data tables before you push a new location so we snapshot the raw HTML rather than the HTML that the plugin generated: https://datatables.net/reference/api/destroy() using the beforeHistorySnapshot.ic(evt, target) event: $(document).on("beforeHistorySnapshot.ic", function(evt, target) { $(target).find('#example').detroy(); }); Hope that helps. I need to put an example up for this sort of thing, it's a little tricky. Cheers, Carson

…

On Nov 9 2019, at 7:38 am, alexanderschillemans ***@***.***> wrote: Hi I'm using Datatables to render my HTML table. I have a few columns that I want to dynamically update by using Intercooler. Lets say this is my layout: Name Activated? Actions John Doe Yes Deactivate Sam Smith No Activate When I want to click on "deactivate" or "activate", I want the column 'Activated?' to change. I was able to do this succesfully with intercooler, sending a request to the server and then responding with the HTML and telling IC my target column and row. However, when I started using datatables this anchor tag does not seem to work anymore. The only thing it does when I click it is reloading the page. No requests are being made to my server and no columns are updated. I'm pulling my hair out for a few hours now trying to see why it would do this, but I cannot seem to find a solution. To be sure my code was OK, I took it out of the datatable and tried to execute it again and then it worked fine! Only when I put it into the datatable again, it stops working. Does anybody have experience with datatables and intercooler js working together? Thanks! — You are receiving this because you are subscribed to this thread. Reply to this email directly, view it on GitHub (#300), or unsubscribe (https://github.com/notifications/unsubscribe-auth/AADSRP3CGRGJJKVJXFDO5SLQS3KN7ANCNFSM4JLH5DXA).

[Deleted user]

Hi Carson

Thanks for the quick response and thinking along with me!

I've tried implementing your suggestion, but it seems the problem is still persisting. The page still refreshes when clicking on a link and there is no request being sent to the server.

I've noticed that no other links are working either in my datatables. I still have some jQuery Ajax calls written inside my code, and linked them with a class.

e.g.

<a class="activate-user">blabla</a>

$('.activate-user').click(function() {
// Ajax call

});

But that doesn't seem to work either anymore. So it seems to me Datatables is just blocking everything there, but why I do not know. Maybe I should post the question over to their forums as well.

Do you've got another idea to solve this?

Cheers
Alexander

[1cg]

Yeah, I wonder if Datatables is just completely nuking the HTML including the original links that intercooler processed. You might try using Intercooler.processNodes() inside the init event for Datatables or something along those lines: https://datatables.net/reference/event/init But I'm not sure how that is going to work if datatables itself is pulling data. I'm not too familiar with datatables, but it looks like it modifies the DOM pretty extensively and dynamically, so it might be a trick to get intercooler working with it. You are going to basically have to make sure that after datatables jams in some new HTML that you call Intercooler.processNodes() on it. Sorry about that. :/ Cheers, Carson

…

On Nov 9 2019, at 8:12 am, alexanderschillemans ***@***.***> wrote: Hi Carson Thanks for the quick response and thinking along with me! I've tried implementing your suggestion, but it seems the problem is still persisting. The page still refreshes when clicking on a link and there is no request being sent to the server. I've noticed that no other links are working either in my datatables. I still have some jQuery Ajax calls written inside my code, and linked them with a class. e.g. `blabla $('.activate-user').click(function() { // Ajax call });` But that doesn't seem to work either anymore. So it seems to me Datatables is just blocking everything there, but why I do not know. Maybe I should post the question over to their forums as well. Do you've got another idea to solve this? Cheers Alexander — You are receiving this because you commented. Reply to this email directly, view it on GitHub (#300), or unsubscribe (https://github.com/notifications/unsubscribe-auth/AADSRP26ZLEKJKWJ7ZHSP23QS3OQTANCNFSM4JLH5DXA).

[Deleted user]

Hi Carson

It seems I was using a modified version of Datatables, called KTDatatables. With this plugin, I was not able to make IC work. However, when using the vanilla version of Datatables I'm getting no issues.

I suppose this issue can be called "resolved" because with the regular Datatables I see no problem - only with the modified version which I understand cannot be supported.

Cheers
Alexander