Re: [xwiki-users] How to add a Js library into a page from CDN?
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: [email protected] <https://www.getonsip.com/[email protected]> Ph: (970) 4MASSON Em: [email protected] <mailto:[email protected]> Ws: www.opensource.org <http://www.opensource.org>
On 02/26/2014 02:43 AM, Patrick Masson wrote:
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> }
I guess this way to inject the script tag does not work. You might check your javascript error console - this should tell you it got an error when trying to understand the script-tag. One working option which uses bare bone javascript is shown here: http://stackoverflow.com/questions/8578617/inject-a-script-tag-with-remote-s... (put that code inside the document.observe listener function) if it still does not work check the html source of the page; if the $xwiki.ssx.use and $xwiki.jsx.use elements have been executed properly they should have created tags inside the <head> to include the corresponding page. I remember once I had the case where the includes have been generated, but they have been empty. Cause of that problem: I made a typo in the page name and included javascript from a page that did not exist ...
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
participants (2)
-
Clemens Robbenhaar -
Patrick Masson