Importing jQuery plugin

Solved NodeBB Development
  • 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

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

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

  • @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 ^^

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


Suggested Topics