Datatables not initialized with up-follow

[Dave Burkholder]

First of all, thanks so much for Unpoly! I'm really enjoying it.

I have a website that makes extensive use of Datatables, and all is working well, if I don't use up-follow. Clicking a normal link, or doing a full page load initializes the DataTable(s) fine. 

When I enable unpoly logging, I can see that the response actually does contain the target table ID, but for whatever reason, pages loaded when clicking up-follow links just don't initialize the table.

I'm initializing the table like so...

up.$compiler('#target_table', function($element) {

    var table = $element.DataTable({

       "serverSide": true,

       "ajax": {

           "url": "/api/data",

           "data": function (d) {

               d.keep = "pk,row_pk,is_active";

           }

       },

<snip>

   });
});

It's not the end of the world if I can't use up-follow to load the pages, but it'd be nice. The pages load more smoothly!

Any thoughts / suggestions?

TIA,

Dave

[Henning Koch]

Hi Dave,

two things I would try:

1. Verify that the compiler is being called. When you console.log('foo')
from your compiler, does your 'foo' appear after following an
[up-follow] link?

2. Also verify that DataTable can be invoked after the page was loaded.
When you wait for the page to load, open the console and manually call
$element.DataTable() on an existing element, does it initialize the table?

Best regards
Henning

On 05.04.20 01:06, Dave Burkholder wrote:
> First of all, thanks so much for Unpoly! I'm really enjoying it.
>
> I have a website that makes extensive use of Datatables

> <https://www.datatables.net>, and all is working well, if I don't use

> up-follow. Clicking a normal link, or doing a full page load initializes
> the DataTable(s) fine.
>
> When I enable unpoly logging, I can see that the response actually does
> contain the target table ID, but for whatever reason, pages loaded when
> clicking up-follow links just don't initialize the table.
>
> I'm initializing the table like so...
>
> |
>
> up.$compiler('#target_table',function($element){
>
>
> vartable =$element.DataTable({
>
> "serverSide":true,
>
> "ajax":{
>
> "url":"/api/data",
>
> "data":function(d){
>
> d.keep ="pk,row_pk,is_active";
>
> }
>
> },
>
> <snip>
>
> });
> });
>
> |
>
>
> It's not the end of the world if I can't use up-follow to load the
> pages, but it'd be nice. The pages load more smoothly!
>
> Any thoughts / suggestions?
>
> TIA,
>
> Dave
>

> --
> You received this message because you are subscribed to the Google
> Groups "unpoly" group.
> To unsubscribe from this group and stop receiving emails from it, send
> an email to unpoly+un...@googlegroups.com
> <mailto:unpoly+un...@googlegroups.com>.
> To view this discussion on the web visit
> https://groups.google.com/d/msgid/unpoly/4e26ec97-f1fd-4515-8500-3d158f80aa8a%40googlegroups.com
> <https://groups.google.com/d/msgid/unpoly/4e26ec97-f1fd-4515-8500-3d158f80aa8a%40googlegroups.com?utm_medium=email&utm_source=footer>.

[Dave Burkholder]

Sorry, I should've clarified in my first post that the compiler is not being called.  console.log('unpoly datatables') appears when doing page reload, or when clicking standard a tags.

> When you wait for the page to load, open the console and manually call $element.DataTable() on an existing element, does it initialize the table? 

Yes, it does.  

And that made me think of something -- does up-follow _ever_ trigger the compiler? So I tried it on a general div id & also the body tag, instead of a table. The up-follow links didn't trigger the up.$compiler attached to the div or body tags.

So somehow it seems that up-follow isn't kicking that compiler.

I also added an up-href="/the/url" and up-target="body" to a button, and that syntax doesn't trigger the compiler either.

The output of up.log.enable() shows other compilers running...

Hmm, it just occurred to me that the compilers that are running are defined in .js files. The compilers that aren't running are defined in <script> tags in the page. Would that be relevant?

> an email to unp...@googlegroups.com
> <mailto:unp...@googlegroups.com>.

[Dave Burkholder]

> The compilers that aren't running are defined in <script> tags in the page. Would that be relevant?

That answer is Yes. When I move the up.$compiler javascript to a file, then up-follow calls the DataTables compiler as expected.

When I move the javascript back to the page, then the whole body is swapped out, but compilers within the body tag don't run. Is that the intended behavior?

[Dave Burkholder]

Does anyone have any comments on my situation where Unpoly doesn't run compilers that are contained in the fragment being inserted? Is that expected behavior or not?

From this slide, it says "Unpoly automatically compiles all fragments that it inserts or updates.

On the first page load, the entire document is compiled."

I would understand that to mean that compilers within the fragment are run as well, but per my comments above, that's not happening. Is there some way I can trigger it to happen, perhaps with the up:fragment:inserted event?

Would be glad for any thoughts / recommendations.

Regards,

Dave

[Henning Koch]

(Posting a second time for the list)

Hi Dave,

compilers are called for all matching elements in an updated fragment.
It's the only reason compilers exist.

I believe you are loading scripts in an unusual order, but it is hard to
tell from your messages alone. A minimal reproduction example on
https://glitch.com/ (with all unnecessary code stripped away) would help
to understand this issue better.

Best regards
Henning

On 08.04.20 13:31, Dave Burkholder wrote:
> Does anyone have any comments on my situation where Unpoly doesn't run
> compilers that are contained in the fragment being inserted? Is that
> expected behavior or not?
>

> From this slide <http://triskweline.de/unpoly-rugb/#/32>, it says

> "Unpoly automatically compiles all fragments that it inserts or updates.
>
> On the first page load, the entire document is compiled."
>
>
> I would understand that to mean that compilers within the fragment are
> run as well, but per my comments above, that's not happening. Is there
> some way I can trigger it to happen, perhaps with the

> up:fragment:inserted <https://unpoly.com/up:fragment:inserted> event?

>
>
> Would be glad for any thoughts / recommendations.
>
> Regards,
>
> Dave
> ||
>

> --
> You received this message because you are subscribed to the Google
> Groups "unpoly" group.
> To unsubscribe from this group and stop receiving emails from it, send

> an email to unpoly+un...@googlegroups.com
> <mailto:unpoly+un...@googlegroups.com>.

> To view this discussion on the web visit

> https://groups.google.com/d/msgid/unpoly/77af43dd-8f1e-4cb2-9b62-b13e878e9665%40googlegroups.com
> <https://groups.google.com/d/msgid/unpoly/77af43dd-8f1e-4cb2-9b62-b13e878e9665%40googlegroups.com?utm_medium=email&utm_source=footer>.