Importing jQuery plugin

[Giggiux]

Hi guys I would like to use DataTables as jQuery plugin to sort tables in some pages of my site (actually I would like to use those on a page "created" by one plugin I'm doing),
I tried to import it from using their CDN putting it:

• before and after the table I want to sort,
• into the "custom header",
• using requirejs (but I don't really know how to use it)

but the function $().dataTables (or $().DataTables) it's always undefined.

What I'm doing wrong?

Thanks,
Giggi

[Giggiux]

I solved it, the problem is somewhere in the mechanism of require.js:

(function( factory ) {
	"use strict";

	// if ( typeof define === 'function' && define.amd ) {
	// 	// AMD
	// 	define( ['jquery'], function ( $ ) {
	// 		return factory( $, window, document );
	// 	} );
	// }
	// else
	if ( typeof exports === 'object' ) {
		// CommonJS
		module.exports = function (root, $) {
			if ( ! root ) {
				// CommonJS environments without a window global must pass a
				// root. This will give an error otherwise
				root = window;
			}

			if ( ! $ ) {
				$ = typeof window !== 'undefined' ? // jQuery's factory checks for a global window
					require('jquery') :
					require('jquery')( root );
			}

			return factory( $, root, root.document );
		};
	}
	else {
		// Browser
		factory( jQuery, window, document );
	}
}

In the definition of DataTables I had to comment the first part (using define()), because it gave me this error: Mismatched anonymous define() modules ...

Not it works

Can you explain me why this happens?

[Giggiux]

I solved it, the problem is somewhere in the mechanism of require.js:

(function( factory ) {
	"use strict";

	// if ( typeof define === 'function' && define.amd ) {
	// 	// AMD
	// 	define( ['jquery'], function ( $ ) {
	// 		return factory( $, window, document );
	// 	} );
	// }
	// else
	if ( typeof exports === 'object' ) {
		// CommonJS
		module.exports = function (root, $) {
			if ( ! root ) {
				// CommonJS environments without a window global must pass a
				// root. This will give an error otherwise
				root = window;
			}

			if ( ! $ ) {
				$ = typeof window !== 'undefined' ? // jQuery's factory checks for a global window
					require('jquery') :
					require('jquery')( root );
			}

			return factory( $, root, root.document );
		};
	}
	else {
		// Browser
		factory( jQuery, window, document );
	}
}

In the definition of DataTables I had to comment the first part (using define()), because it gave me this error: Mismatched anonymous define() modules ...

Not it works

Can you explain me why this happens?

[PitaJ]

@Giggiux this happens because of how the intricacies of how require.js works. Because all NodeBB scripts are concatenated, require.js can't know what the name of module is unless it's provided (that's the "mismatched anonymous" part).

Unfortunately jQuery plugins don't really work with require.js in NodeBB due to some weird behavior.

[Giggiux]

@PitaJ
well at least I found out a way to make that work

Thanks for the explanation BTW I think that should be "fixed" in some way, I'd like to help, but I don't know at all require.js ^^

[Bri]

Heh, I was trying this exact same thing almost two years ago on NodeBB:

Load external scripts with requirejs without access to config

I'm trying to load the datatables javascript library in a plugin that I'm writing. The issue is that I get a conflict when I load the external resource, because datatables is conflicting with somet...

Stack Overflow (stackoverflow.com)