Hi Bryn, On 12 Aug 2015 at 12:09:56, Bryn Jeffries ([email protected](mailto:[email protected])) wrote:

Hi,

I'm experimenting with including some jQuery UI elements into some wiki pages using XWiki 7.1. As a test, I've been trying to get the spinner example from http://api.jqueryui.com/spinner/ to work:

I have constructed a minimal page, with content body: {{velocity}} {{html}}

{{/html}} {{/velocity}}

And for the page I've added an objects of type XWiki.JavaScriptExtension containing code: require(['jquery'], function($) { $( "#spinner" ).spinner(); });

However, viewing the page yields an error TypeError: a(...).spinner is not a function "require(["jquery"],function(a){a("#spinner").spinner()});"

So it looks as though the spinner UI code is missing, so I'm guessing I need to include the jQuery UI library somehow. I'm a little confused because there is a jquery-ui-1.11.1.jar file in /usr/lib/xwiki/WEB-INF/lib/ which led me to believe that it was already bundled with XWiki. http://platform.xwiki.org/xwiki/bin/view/DevGuide/FrontendResources says "Prototype is the only JavaScript library that is systematically shipped with any wiki page in XWiki." But it's a bit old.

Any pointers?

I’m far from a JS expert, but it seems your code is saying that it depends on jquery but not on jquery-ui and https://api.jqueryui.com/spinner/ seems to indicate that the spinner is located in jquery-ui… Try depending on jquery-ui maybe? Thanks -Vincent

Thanks,

Bryn

I wrote:

...

I'm experimenting with including some jQuery UI elements into some wiki pages using XWiki 7.1. As a test, I've been trying to get the spinner example from http://api.jqueryui.com/spinner/ to work:

I have constructed a minimal page, with content body: {{velocity}} {{html}} <input id="spinner" /> {{/html}} {{/velocity}}

And for the page I've added an objects of type XWiki.JavaScriptExtension containing code: require(['jquery'], function($) { $( "#spinner" ).spinner(); });

Vincent replied:

I’m far from a JS expert, but it seems your code is saying that it depends on jquery but not on jquery-ui and https://api.jqueryui.com/spinner/ seems to indicate that the spinner is located in jquery-ui…

Try depending on jquery-ui maybe?

Right, I'd misunderstood the purpose of require(), which I thought was to provide compatibility vs prototype when using '$'. However, this still doesn't fix things completely, but does move them forwards a bit. require(['jquery','jquery-ui'], function($) { $( "#spinner" ).spinner(); }); Now gives me "NetworkError: 404 Not Found - https://brynswiki.net/xwiki/bin/view/TestJQ/jquery-ui.js" so it's still looking in the wrong place. Do I need to be configure RequireJS to find jquery-ui.js? I see in the rendered page source require.config({ paths: { 'jquery': '/xwiki/webjars/jquery/1.11.1/jquery.min.js?r=1', 'bootstrap': '/xwiki/webjars/bootstrap/3.3.4/js/bootstrap.min.js?r=1', 'xwiki-meta': '/xwiki/resources/js/xwiki/meta', 'xwiki-events-bridge': "/xwiki/resources/js/xwiki/eventsBridge" }, [...] So jQuery gets mentioned but not jQuery-UI, even though I believe webjars for both are present in the XWiki installation (in /usr/lib/xwiki/WEB-INF/lib/ ) Thanks, Bryn

Hi Bryn, On 12 Aug 2015 at 22:05:25, Bryn Jeffries ([email protected](mailto:[email protected])) wrote:

Vincent suggested:

...

...

Try depending on jquery-ui maybe?

Right, I'd misunderstood the purpose of require(), which I thought was to provide compatibility vs prototype when using '$'.

However, this still doesn't fix things completely, but does move them forwards a bit. require(['jquery','jquery-ui'], function($) { $( "#spinner" ).spinner(); });

Actually, more playing around eventually gave me this, which does work: require(['jquery',"$services.webjars.url('jquery-ui', 'jquery-ui.js')"], function($) { $( "#spinner" ).spinner(); });

I wouldn't say I'm 100% sure of what I'm doing with require, or if this is the best way to do it, but at least it works without errors.

That looks correct. The reason you could simply use “jquery” in the require() function is because it’s declared in javascript.vm: require.config({   paths: {     'jquery': '#removeJsSuffix($services.webjars.url("jquery", "jquery${jsExtension}"))',     'bootstrap': '#removeJsSuffix($services.webjars.url("bootstrap", "js/bootstrap${jsExtension}"))',     'xwiki-meta': '$stringtool.removeEnd($xwiki.getSkinFile('js/xwiki/meta.js'), '.js')',     'xwiki-events-bridge': "$stringtool.removeEnd($xwiki.getSkinFile('js/xwiki/eventsBridge.js'), '.js')"   }, … This is not the case for jquery-ui or for other webjars. This is why you need to use $services.webjars.url(..). Would be great if you could help us and add this information on http://platform.xwiki.org/xwiki/bin/view/DevGuide/FrontendResources :) If you don’t have the time, I’ll do it when I’m back from holidays (still on holidays for the coming 4 days :)). Thanks -Vincent

Thanks,

Bryn

Vincent Massol wrote:

Would be great if you could help us and add this information on http://platform.xwiki.org/xwiki/bin/view/DevGuide/FrontendResources : )

If you don’t have the time, I’ll do it when I’m back from holidays (still on holidays for the coming 4 days :)).

Sure, I'll add what I can. Incidentally, am I right in thinking Bootstrap is also bundled with XWiki? Many thanks for responding during your well-earned time off. Bryn