New subject: [xwiki-users] How to add a Js library into a page from CDN?

26 Feb 2014

Hi Boudjelda (and Marius),

I was wondering if you ever found a solution for this? I would like to 
add TogetherJS to XWiki (see: https://togetherjs.com/#tryitout-section) 
but am not sure how to insert the JS source into the page head.

I went through the suggested steps:

1st, created a new object for the page "myurl/Sandbox/WebHome/",
"Edit" 
-> "Objects":

Objects of type XWiki.JavaScriptExtension
- JavaScriptExtension 0: TogetherJS

Code:
document.observe('xwiki:dom:loaded', function() {
     <script
src="https://togetherjs.com/togetherjs-min.js"></script>
}

Then in the page I added:

{{velocity}}
$xwiki.jsx.use("XWiki.SkinExt")
{{/velocity}}

{{velocity}}
#set ($discard = $xwiki.ssx.use('Sandbox.WebHome'))
#set ($discard = $xwiki.jsx.use('Sandbox.WebHome'))
{{/velocity}}

{{html}}
<button onclick="TogetherJS(this); return false;">Start
TogetherJS</button>
{{/html}}

Any ideas?

Thanks Patrick

On Sun, Oct 14, 2012 at 10:55 AM, Boudjelda Mohamed Said
<bmscomp at gmail.com  <http://lists.xwiki.org/mailman/listinfo/users>>
wrote:
...
 /  Hi XWiki users 
/...
 /
/>/  I wanted to add a jQuery library from CDN so I added <script> tag
inside
/>/  {{html}} macro this way :
/...
 / />/  {{velocity}}
/>/  {{html clean="false"}}
/>/  <head>
/>/  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js
/>/  "></script>
/>/  </head>
/...
 / />/  {{/html}}
/>/  {{/velocity}}
/
Note that whatever you put in the content of a wiki page the result is
inserted in the BODY tag of the final HTML page so generating the HEAD
tag in the content of a wiki page is wrong.

Your best option is to load the JavaScript and CSS dynamically
following this steps:

(1) Define a JavaScript/CSS extension. See
http://platform.xwiki.org/xwiki/bin/view/DevGuide/SkinExtensionsTutorial
.
(2) For CSS you simply use @import. For JavaScript you listen to page
load and then inject a SCRIPT tags in the existing HEAD of the HTML
page.

document.observe('xwiki:dom:loaded', function() {
     // Inject the script tag here.
})
(3) Whenever you need the JavaScript/CSS you use

{{velocity}}
#set ($discard = $xwiki.ssx.use('Space.PageWithSSX'))
#set ($discard = $xwiki.jsx.use('Space.PageWithJSX'))
{{/velocity}}

You may want to take a look at
http://extensions.xwiki.org/xwiki/bin/view/Extension/jQuery+Helpers  .
Also note that we're using Prototype.js in XWiki everywhere so you
need to handle the conflicts with jQuery.

Hope this helps,
Marius

...
 / />/  I could not use jQuery and it gives me
this error in console.
/...
 / />/   Refused to execute a JavaScript
script. Source code of script found within
/>/  request
/>/  Resource interpreted as Script but transferred with MIME type text/html:
/>/  "about:blank".
/...
 / />/  any way to use js libraries and css
from CDN ??
/...
 / />/  Thanks
/>/  _______________________________________________
/>/  users mailing list
/>/  users at xwiki.org  <http://lists.xwiki.org/mailman/listinfo/users>
/>/  http://lists.xwiki.org/mailman/listinfo/users
/

-- 
     ||    |      |  ||||    ||    ||    |  ||||    |||    | |||
Patrick Masson
General Manager, Director & Secretary to the Board
Open Source Initiative
855 El Camino Real, Ste 13A, #270
Palo Alto, CA 94301
United States
Skype: massonpj
sip: masson(a)getonsip.com 
<https://www.getonsip.com/call?a=masson@getonsip.com>
Ph: (970) 4MASSON
Em: masson(a)opensource.org <mailto:masson@opensource.org>
Ws: www.opensource.org <http://www.opensource.org>

Re: [xwiki-users] How to add a Js library into a page from CDN?