How can I load the js files on demand?.

How can I load the js files on demand?.

infoDVDinfoDVD Posts: 6Questions: 2Answers: 0

Right now, I should attach every .js file for every downloable file format.

Of course, those scripts are always loaded wheter or not the user will click a Download Button.

I want to know how I can "load on demand" those scripts.
For example: If someone click the PDF botton then the pdfmake.js and vfs_fonts.js files (and maybe buttons.html5.js could be too) are loaded then download happen.

I guess it should prevent re-load the same script if the user is re-downloading a same format.

PS: If not possible, it would be a cool feature, helping to make lighter pages.
Believe or not, the difference in time load is noticeable for some users, just adding those scripts.

Thanks in advance.

This question has an accepted answers - jump to answer

Answers

  • kthorngrenkthorngren Posts: 21,133Questions: 26Answers: 4,918
    edited June 2019

    The buttons won't load without their respective JS and CSS files. I haven't worked with dynamically loading JS and CSS files but it looks like its possible to do. Possibly, you could create a I want to export button and when clicked dynamically load the files then use a constructor to load the buttons.

    Are you loading the files from a local resource or CDN? If CDN maybe you can place them on the local server to improv load time instead of trying the above.

    Another option is to use the Download Builder to create concatenated CDN or local server files for the web page to load.

    Kevin

  • infoDVDinfoDVD Posts: 6Questions: 2Answers: 0
    edited June 2019

    Thanks you for your reply.

    Yes, I'm using local files, but the problem isn't the download rate but the time processing/running it.
    Some devices have a noticeable delay with these files, but without them (even with only the basic files Buttons) is instantaneous.
    I have no problem with the delay except because it's everytime the page is loading no matter wheter or not you'll use the buttons. It could sukcs for some users. But that delay could be admissible if it happen once the user clicked a button.

    About your suggestion, It fit fine in my page because I already was using a custom "Group" Button, grouping my customs Download Files Buttons.
    Even, I already had added a "loading" animations for these buttons, similar as the originals buttons. So these animations could be very useful for the delay loading those files.

    • I started for the simple (*), loading all the files clicking the Group Menu.
    • That worked loading the files (**), but there's not way I can make the buttons works (guessing because buttons were initialized when the files were yet not loaded).
    • I used the Constructor but it have an error because the Table cannot be reinitialized.
      https://www.datatables.net/manual/tech-notes/3
    • I cannot destroy and remake the table because it looks weird.

    No sure if I'm missing the point or I'm doing something wrong.

    (*) My final goal was:
    1) load the basic files (dataTables.buttons, buttons.html5, and buttons.print afaik neccessary) clicking the Group Button, then
    2) load the specific files (for PDF or Excel) clicking the specific button.

    (**) Btw, it worked loading the files, but they are "processed" every time I click the button.
    I think it's not necessary rerun those files if they're already runned and obviously they're not changing, but I didn't find way to avoid it and I didn't search more because I had the other most important problem.
    Plus, that processing is the delay root, but I could accept it once it's happening clicking a button. However I would wish don't have it except first time.
    I used jquery's getScript with cache enable.

  • kthorngrenkthorngren Posts: 21,133Questions: 26Answers: 4,918
    Answer ✓

    As far as your first two points I'm not sure as I've not tried loading JS/CSS files on demand. This is outside the scope of Datatables. SO might be a good resource for this.

    it worked loading the files, but they are "processed" every time I click the button.

    Maybe use a global variable as a flag and if the flag is set then you have already loaded the files.

    I'm not sure why you are getting the reinitialization error without seeing your code. Here is a simple example to load the buttons on a button click.
    http://live.datatables.net/sekoxasa/1/edit

    Of course the JS and CSS files are already loaded.

    Kevin

  • infoDVDinfoDVD Posts: 6Questions: 2Answers: 0
    edited June 2019

    Thanks you for your quick reply.

    I removed my trash then I took your example, then remake the changes again and It worked!.
    Not sure what was my error, but it don't longer care because it's working.

    Right now I'm loading all the files in my Group Button. Because this delay (here) is acceptable, I'll not split the loads for each button. So, I'm done with my "final goal", it's already fine.

    Many thanks!.

This discussion has been closed.