[xwiki-devs] Help need in Javascriptextention
Hai... I tried to use the xwiki.javascrpitextention object to separate my javascript code.But it didn't work correctly.I included the whole javascript code in (Document Type Manager Demo) http://gsoc.myxwiki.org/xwiki/bin/view/DocTypeManagerDemo to here: http://gsoc.myxwiki.org/xwiki/bin/edit/DocTypeManagerDemo/DocTypeManagerScri... and then tried the $xwiki.jsx.use("DocTypeManagerDemo.DocTypeManagerScript"). you can see it in here (I commented it) http://gsoc.myxwiki.org/xwiki/bin/edit/DocTypeManagerDemo/WebHome?&editor=wiki<http://gsoc.myxwiki.org/xwiki/bin/view/DocTypeManagerDemo> please give me some hints to fix this issue... :). Thank you. ~ Chathura Prabuddha Ganegoda~
Chathura Prabuddha wrote:
Hai...
I tried to use the xwiki.javascrpitextention object to separate my javascript code.But it didn't work correctly.I included the whole javascript code in (Document Type Manager Demo) http://gsoc.myxwiki.org/xwiki/bin/view/DocTypeManagerDemo to here: http://gsoc.myxwiki.org/xwiki/bin/edit/DocTypeManagerDemo/DocTypeManagerScri... and then tried the $xwiki.jsx.use("DocTypeManagerDemo.DocTypeManagerScript"). you can see it in here (I commented it) http://gsoc.myxwiki.org/xwiki/bin/edit/DocTypeManagerDemo/WebHome?&editor=wiki<http://gsoc.myxwiki.org/xwiki/bin/view/DocTypeManagerDemo> please give me some hints to fix this issue... :).
Hi Chathura, One of the reasons why the code is not working is that the code is executed before the HTML elements it concerns are loaded. That happens because $xwiki.jsx.use("DocTypeManagerDemo.DocTypeManagerScript") generates a <script type="text/javascript" href="..."></script> element and inserts it in the <head> of the HTML document. So, what you need to do is make sure the code in the extension is executed at the right time (when the whole dom tree is available) and not at the moment when it is referred. For this, you can start by wrapping it in a function that you will call when the xwiki:dom:loaded event is fired: document.observe('xwiki:dom:loaded', function() { // your code here }); Afterwards, when this works fine, you can reorganize the javascript code to comply with our javascript code practices, including http://dev.xwiki.org/xwiki/bin/view/Community/DevelopmentPractices#HJavaScri... -- Sergiu Dumitriu http://purl.org/net/sergiu/
On Thu, Jun 4, 2009 at 1:57 PM, Sergiu Dumitriu <[email protected]> wrote: Chathura Prabuddha wrote: Hi Chathura,
One of the reasons why the code is not working is that the code is executed before the HTML elements it concerns are loaded.
Indeed. And you can get some interesting behavior defining velocity macros vs variables in JSX "parsed" XWiki.JavaScriptExtension instances and trying to use it in the main document, as well as difficulties getting javascript "parameters" into JSX code that might vary based on document data that hasn't been evaluated yet.... FYI, for an example of extensive use of JavaScriptExtensions with Xwiki see below. I had to arrive at my own solutions that worked alongside the MIT Simile project's Exhibit and Timeline widgetry. I will need to see whether "document.observe('xwiki:dom: loaded'..." solution suggested by Sergiu offers advantages worth potentially breaking working code over :-) MIT Simile Exhibit Integration: http://nielsmayer.com/xwiki/bin/view/Exhibit/Presidents4 Source: http://nielsmayer.com/xwiki/bin/download/Exhibit/Presidents4/Presidents4Pkg.... MIT Simile Timeline Integration: http://nielsmayer.com/xwiki/bin/view/Main/SiteTimeline Source: http://nielsmayer.com/xwiki/bin/download/Main/SiteTimeline/SiteTimelinePkg.x... npm@gnuveau ~/DESKTOP $ unzip -l Presidents4Pkg.xar Archive: Presidents4Pkg.xar Length Date Time Name -------- ---- ---- ---- 48041 06-07-09 09:37 Exhibit/Presidents4.xml 64824 06-07-09 09:37 Macros/jQuery.xml 25895 06-07-09 09:37 Macros/Exhibit.xml 511 06-07-09 09:37 package.xml -------- ------- 139271 4 files npm@gnuveau ~/DESKTOP $ unzip -l SiteTimelinePkg.xar Archive: SiteTimelinePkg.xar Length Date Time Name -------- ---- ---- ---- 13954 06-07-09 09:51 Main/SiteTimeline.xml 64824 06-07-09 09:51 Macros/jQuery.xml 22844 06-07-09 09:51 Macros/Timeline.xml 512 06-07-09 09:51 package.xml -------- ------- 102134 4 files FYI, what I ended up doing is putting the JSX/SSX code into Modules that I load as Macros. Since all the "work" is now going on in the header, you can more easily pass "parameters" or customize the "javascript module" before loading it... by putting the customizations in the document's JSX and loading that via $xwiki.jsx.use("$doc.fullName") prior to loading additional modules, e.g. $xwiki.jsx.use("$doc.fullName") ## define doc/app-specific params for other modules #includeMacros("Macros.jQuery") ## #jquery_xwiki_init() ##JSX and SSX calls hidden in here #includeMacros("Macros.Timeline")##see also timeline_create() at bottom #timeline_xwiki_init() ##JSX and SSX calls hidden in here [[.... setup DOM to be accessed by javascript ....]] #timeline_create("") ##Fire up "creation fns" after all JS loaded/DOM defd Niels http://nielsmayer.com
participants (3)
-
Chathura Prabuddha -
Niels Mayer -
Sergiu Dumitriu