12 Aug
2015
12 Aug
'15
12:08 p.m.
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}}
<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();
});
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?
Thanks,
Bryn
12 Aug
12 Aug
4:50 p.m.
Hi Bryn,
On 12 Aug 2015 at 12:09:56, Bryn Jeffries
(bryn.jeffries@sydney.edu.au(mailto:bryn.jeffries@sydney.edu.au)) 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
5:04 p.m.
I’ve tried to improve a
bit http://platform.xwiki.org/xwiki/bin/view/DevGuide/FrontendResources but I’m sure I’ve
forgotten some.
We also need to update that page to explain requirejs and the webjar mechanisms I think.
Thanks
-Vincent
On 12 Aug 2015 at 16:50:47, vincent(a)massol.net
(vincent@massol.net(mailto:vincent@massol.net)) wrote:
Hi Bryn,
On 12 Aug 2015 at 12:09:56, Bryn Jeffries
(bryn.jeffries@sydney.edu.au(mailto:bryn.jeffries@sydney.edu.au)) 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
9:42 p.m.
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
10:04 p.m.
Vincent suggested:
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.
Thanks,
Bryn
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();
});
10:31 p.m.
Hi Bryn,
On 12 Aug 2015 at 22:05:25, Bryn Jeffries
(bryn.jeffries@sydney.edu.au(mailto:bryn.jeffries@sydney.edu.au)) wrote:
Vincent suggested:
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
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();
});
Thanks,
Bryn
10:33 p.m.
On 12 Aug 2015 at 22:31:11, vincent(a)massol.net
(vincent@massol.net(mailto:vincent@massol.net)) wrote:
Hi Bryn,
On 12 Aug 2015 at 22:05:25, Bryn Jeffries
(bryn.jeffries@sydney.edu.au(mailto:bryn.jeffries@sydney.edu.au)) wrote:
errr…. 11 days… :)
-Vincent
Vincent suggested:
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 :)). 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();
});
Thanks
-Vincent
Thanks,
Bryn
13 Aug
13 Aug
6:41 a.m.
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
11:20 a.m.
Yes bootstrap is bundled mostly because XWiki skin is based on it.
Le 13 août 2015 6:42 AM, "Bryn Jeffries" <bryn.jeffries(a)sydney.edu.au> a
écrit :
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
_______________________________________________
users mailing list
users(a)xwiki.org
http://lists.xwiki.org/mailman/listinfo/users
3419
days inactive
3420
days old
8 comments
3 participants
participants (3)
-
Bryn Jeffries -
Thomas Mortagne -
vincent＠massol.net