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
Post Reply
chris kerr
Jr. Propeller Head
Posts: 8
Joined: Wed Mar 27, 2019 3:16 am

DataTables .js plugin works in topic but not from masterpage

Post by chris kerr »

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/
NorthEast
Master Propellus Maximus
Posts: 6359
Joined: Mon Mar 05, 2007 8:33 am

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

Post by NorthEast »

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?
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

Post by chris kerr »

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.
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

Post by jjw »

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.
NorthEast
Master Propellus Maximus
Posts: 6359
Joined: Mon Mar 05, 2007 8:33 am

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

Post by NorthEast »

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.
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

Post by chris kerr »

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.
NorthEast
Master Propellus Maximus
Posts: 6359
Joined: Mon Mar 05, 2007 8:33 am

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

Post by NorthEast »

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?
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

Post by chris kerr »

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

Post by chris kerr »

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

Post by chris kerr »

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();
Post Reply