DataTables .js plugin works in topic but not from masterpage

This forum is for all Flare issues related to the HTML5, WebHelp, WebHelp Plus, and Adobe Air Targets

DataTables .js plugin works in topic but not from masterpage

Postby chris kerr on Wed Mar 27, 2019 7:14 am

I'm trying to get the DataTables (https://datatables.net/) plugin working with Flare. This is a JavaScript plugin that depends on jQuery. When I refer to the JavaScript files directly from the topic with the table in it, the output is fine. When I refer to the JavaScript files from the masterpage, DataTables doesn't work in the output.

I put my script references in the <head> of the topic:

Code: Select all
<head>
        <link rel="stylesheet" type="text/css" href="Resources/AvaPlugin/DataTables/css/jquery.dataTables.min.css" />
        <script type="text/javascript" src="Resources/AvaPlugin/DataTables/js/jquery-3.3.1.min.js">
        </script>
        <script type="text/javascript" src="Resources/AvaPlugin/DataTables/js/jquery.dataTables.min.js">
        </script>
        <script type="text/javascript" src="Resources/AvaPlugin/DataTables/js/moment.min.js">
        </script>
        <script type="text/javascript" src="Resources/AvaPlugin/DataTables/js/datetime-moment.min.js">
        </script>
    </head>


I refer to a separate version of jQuery I downloaded (not Flare's internal version) and a couple of files for date sorting.

I include the script that initialises the datatable just before the </body> tag at the end of the topic:

Code: Select all
<script type="text/javascript">
         $(document).ready(function() {
         $.noConflict();
         $.fn.dataTable.moment( 'DD/MM/YYYY' );
         $('table.display').DataTable( {
         "order": [[ 0, "desc" ]],
         "language": {
         "search": "Filter:"
         }
         } );
         } );
      </script>


The references appear as expected in the output:

Code: Select all
<link href="Resources/AvaPlugin/DataTables/css/jquery.dataTables.min.css" rel="stylesheet" />
        <script src="Resources/AvaPlugin/DataTables/js/jquery-3.3.1.min.js">
        </script>
        <script src="Resources/AvaPlugin/DataTables/js/jquery.dataTables.min.js">
        </script>
        <script src="Resources/AvaPlugin/DataTables/js/moment.min.js">
        </script>
        <script src="Resources/AvaPlugin/DataTables/js/datetime-moment.min.js">


When I put the references in the <head> of the masterpage instead (adjusting the path), remove the references from the head of the topic, and apply the masterpage to the topic:
[*]Flare fails to include the referenced script files in the output
[*]Flare's reference to its internal version of jQuery appears above my script references in the source of the output topic (maybe causing the browser to ignore my scripts below)
[*]DataTables doesn't do its magic.

I suspect there's a conflict with Flare's internal version of jQuery, that it spits out into the Resources/Scripts folder in the output: jquery.min.js

These forum posts suggest using require.js:

viewtopic.php?f=9&t=19291
viewtopic.php?f=13&t=27117

I haven't had any luck with that method. I'm pretty new to JavaScript in general.

[*]Has anyone got DataTables or similar .js plugins working recently, preferably by referring to it in a masterpage?
[*]Do you have any suggestions on what I might be doing wrong?
[*]How do I refer to Flare's internal version of jQuery. This seems preferable.
[*]Can anyone explain how to use require.js with Flare in simple terms? I haven't got far with the documentation: https://requirejs.org/
chris kerr
Jr. Propeller Head
 
Posts: 8
Joined: Wed Mar 27, 2019 3:16 am

Re: DataTables .js plugin works in topic but not from master

Postby Dave Lee on Wed Mar 27, 2019 7:55 am

First, I'd get rid of your link to jquery-3.3.1.
Flare already includes jQuery in HTML outputs (3.3.1 in Flare 2018).

chris kerr wrote:[*]Flare fails to include the referenced script files in the output
[*]Flare's reference to its internal version of jQuery appears above my script references in the source of the output topic (maybe causing the browser to ignore my scripts below)


I didn't follow this - you say Flare fails to include your script links, but then say Flare's jQuery link is positioned above your script links. So are your script links included in the output or not?
Dave Lee
Master Propellus Maximus
 
Posts: 5671
Joined: Mon Mar 05, 2007 8:33 am
Location: UK

Re: DataTables .js plugin works in topic but not from master

Postby chris kerr on Wed Mar 27, 2019 10:18 am

Thanks for the reply.

Linking to jquery-3.3.1 is the only way I've found to get DataTables to work. If I remove it, it won't work unless I go down the require.js route, which I haven't had much luck with. I suspect I'll end up using require.js.

Dave Lee wrote:I didn't follow this - you say Flare fails to include your script links, but then say Flare's jQuery link is positioned above your script links. So are your script links included in the output or not?


To clarify, Flare includes the links in the output, but it doesn't include the JavaScript files I'm linking to in the Resources/Scripts folder. Clearly nothing will work without the script files in the output.
chris kerr
Jr. Propeller Head
 
Posts: 8
Joined: Wed Mar 27, 2019 3:16 am

Re: DataTables .js plugin works in topic but not from master

Postby jjw on Wed Mar 27, 2019 6:11 pm

I've used datatables in the past by loading from the master page using requirejs pretty much as described in the issues you linked to.

One gotcha is that the path you specify in the requirejs configuration must be from the topic to the script, not from the master page to the script - so if your topics are at different depths, you'll have to use an array of alternative paths rather than a single path. If requirejs can't find the script at the first path it will continue through the array until it does.

You could try referring to the script in the body of the master page rather than in the head if you're having trouble copying it to the output.
jjw
Sr. Propeller Head
 
Posts: 133
Joined: Thu May 08, 2014 4:18 pm
Location: Melbourne

Re: DataTables .js plugin works in topic but not from master

Postby Dave Lee on Thu Mar 28, 2019 12:22 am

chris kerr wrote:To clarify, Flare includes the links in the output, but it doesn't include the JavaScript files I'm linking to in the Resources/Scripts folder. Clearly nothing will work without the script files in the output.


That seems odd.

When you moved the links from the topic to the master page, did you remember to update the path in the script links?

Also, in your target Advanced tab, if you've set the option Exclude content not linked directly or indirectly from the target, then try switching that off.
Dave Lee
Master Propellus Maximus
 
Posts: 5671
Joined: Mon Mar 05, 2007 8:33 am
Location: UK

Re: DataTables .js plugin works in topic but not from master

Postby chris kerr on Thu Mar 28, 2019 4:57 am

jjw wrote:One gotcha is that the path you specify in the requirejs configuration must be from the topic to the script, not from the master page to the script - so if your topics are at different depths, you'll have to use an array of alternative paths rather than a single path. If requirejs can't find the script at the first path it will continue through the array until it does.


I didn't know that the path had to be from the topic, so thanks!

I tried to set up requirejs, following Dave's example here: viewtopic.php?f=9&t=19291

Code: Select all
require.config({
   baseUrl: 'Resources/AvaPlugin/DataTables/js/',
   paths: {
     "datatables": "jquery.dataTables.min",
   "jquery": "../Resources/Scripts/jquery.min"
      }
});   

requirejs(["jquery", "datatables"], function() {
      $('table.display').dataTable();
   });


I removed my reference to the other version of jQuery.

Requirejs still isn't working for me, but I can now only see one error in Chrome's console:

Uncaught Error: Mismatched anonymous define() module: function(E){return h(E,window,document)}
http://requirejs.org/docs/errors.html#mismatch

Moving the references to the body of the masterpage didn't fix it.

Dave Lee wrote:When you moved the links from the topic to the master page, did you remember to update the path in the script links?

Also, in your target Advanced tab, if you've set the option Exclude content not linked directly or indirectly from the target, then try switching that off.


Yes, I updated the path.

That option was set, so I've switched it off. But jquery.dataTables.min.js is still not included in the Output, whether I use requirejs or my hacky method referring to a separate version of jQuery.
chris kerr
Jr. Propeller Head
 
Posts: 8
Joined: Wed Mar 27, 2019 3:16 am

Re: DataTables .js plugin works in topic but not from master

Postby Dave Lee on Thu Mar 28, 2019 6:37 am

chris kerr wrote:Uncaught Error: Mismatched anonymous define() module: function(E){return h(E,window,document)}
http://requirejs.org/docs/errors.html#mismatch


Have you removed the script reference in the HTML to jquery.dataTables.min.js?
Dave Lee
Master Propellus Maximus
 
Posts: 5671
Joined: Mon Mar 05, 2007 8:33 am
Location: UK

Re: DataTables .js plugin works in topic but not from master

Postby chris kerr on Thu Mar 28, 2019 7:45 am

Dave Lee wrote:Have you removed the script reference in the HTML to jquery.dataTables.min.js?


I hadn't but I have now. Now the only reference to jquery.dataTables.min.js is in my init.js file.

The error is now:

Uncaught Error: Script error for: jquery
http://requirejs.org/docs/errors.html#scripterror
chris kerr
Jr. Propeller Head
 
Posts: 8
Joined: Wed Mar 27, 2019 3:16 am

Re: DataTables .js plugin works in topic but not from master

Postby chris kerr on Mon Apr 15, 2019 8:31 am

I eventually got require.js working by playing around with the path to Flare's version of jquery in the output. Unfortunately DataTables conflicts with the JavaScript in Flare's SideNav skin, meaning the SideNav menu doesn't display at all.

Errors:

Code: Select all
Uncaught TypeError: aZ.foundation is not a function
chris kerr
Jr. Propeller Head
 
Posts: 8
Joined: Wed Mar 27, 2019 3:16 am

Re: DataTables .js plugin works in topic but not from master

Postby chris kerr on Wed Apr 24, 2019 2:35 am

Update: I fixed the conflict with SideNav by referring to Flare's internal version of Foundation using require.js and including this line in my script:

Code: Select all
$(document).foundation();
chris kerr
Jr. Propeller Head
 
Posts: 8
Joined: Wed Mar 27, 2019 3:16 am


Return to Web-based Outputs

Who is online

Users browsing this forum: No registered users and 9 guests