{"id":485,"date":"2015-09-14T12:03:41","date_gmt":"2015-09-14T11:03:41","guid":{"rendered":"http:\/\/ubiquis.co.uk\/?p=367"},"modified":"2020-04-24T12:31:22","modified_gmt":"2020-04-24T11:31:22","slug":"ctools-now-supports-require-js-but-what-about-jquery-plugins","status":"publish","type":"post","link":"https:\/\/ubiquis.co.uk\/ctools-now-supports-require-js-but-what-about-jquery-plugins\/","title":{"rendered":"Ctools now supports Require.js – But… what about jQuery plugins?"},"content":{"rendered":"
Great news from the Pentaho Community Dashboards front. As of the current version (15.06.30), there’s support for Require.js, which greatly streamlines the javascript downloaded when rendering a dashboard, cleans up the global scope and provides a proper management of modules and dependencies. I won’t bother you with the details, you can read more about it in Pedro Alves’s post<\/a>.<\/p>\n This is truly a game changer when it comes to developing CDF\/CDE dashboards. We have to write our code better, with a proper architecture in place to make all the pieces talk to each other, we need to use the proper methods to set or get parameter values, to run custom functions in pre-execution or post-execution code snippets, etc.<\/p>\n This is not a bad thing, far from it. But it doesn’t come without its challenges. We’ve started playing with the new require.js framework here at Ubiquis and we’ve learned useful tricks already.<\/p>\n Here’s one: remember how easy it was to upload that myAwesomeJqueryPlugin that you found on some github repository and allowed you to implement that super-duper feature on your dashboard? Well, it won’t work anymore. Not without a bit of work, at least. Here’s why: your typical jQuery plugin is a function of the type<\/p>\n But now it will fail. The reason is that (function ($) {
\n\/\/ your awesome code goes here
\n})(jQuery);<\/code><\/p>\n$<\/code> is no longer defined in the global scope. It’s still exposed and you can access it as usual from within any component’s internal methods, but not when you’re loading your jQuery plugins.<\/p>\n