Re: [xwiki-users] xwiki and jquery - xwiki-users@xwiki.org

3 Dec 2009

Hi Bubulina,
jQuery can be used with XWiki without complete integration too. I was able
to use jquery for table sorting in a small experiment on my local XWiki
instance today & use it for some UI features in my production XWiki instance
in office. I am not an expert in javascript libraries, however, IMHO I've
never had an instance where prototype & jquery have interefered. I tried the
following steps. Hope this might help you.

1. Created a new page called 'jquery' in XWiki
2. Attached a javascript object to this page called 'jquery' using the
object editor
3. Copied over the javascript code from the minified jQuery downloaded from
the jQuery website into the object created in above step.
4. The object settings are: Use this extension= On Demand, Parse Content=
No, Caching Policy=default
5. Repeated the above steps with the tablesorter.js file available from the
TableSorter 2.0 plugin for jQuery
6. Created the final table sorter demo page. Added the two javascript
includes & html table as follows:
(Note: I use XWiki syntax 1.0 since I am most comfortable with that. You
might want to change the code here for XWiki Syntax 2.0 compatibility).

$xwiki.jsx.use("devmain.jquery")
$xwiki.jsx.use("devmain.tablesorter")

<script>
$(document).ready(function() 
    { 
        $("#myTable").tablesorter(); 
    } 
); 
</script>

<table id="myTable"> 
<thead> 
<tr> 
    <th>Last Name</th> 
    <th>First Name</th> 
    <th>Email</th> 
    <th>Due</th> 
    <th>Web Site</th> 
</tr> 
</thead> 
<tbody> 
<tr> 
    <td>Smith</td> 
    <td>John</td> 
    &lt;td&gt;jsmith(a)gmail.com&lt;/td&gt; 
    <td>$50.00</td> 
    <td>http://www.jsmith.com</td> 
</tr> 
<tr> 
    <td>Bach</td> 
    <td>Frank</td> 
    &lt;td&gt;fbach(a)yahoo.com&lt;/td&gt; 
    <td>$50.00</td> 
    <td>http://www.frank.com</td> 
</tr> 
<tr> 
    <td>Doe</td> 
    <td>Jason</td> 
    &lt;td&gt;jdoe(a)hotmail.com&lt;/td&gt; 
    <td>$100.00</td> 
    <td>http://www.jdoe.com</td> 
</tr> 
<tr> 
    <td>Conway</td> 
    <td>Tim</td> 
    &lt;td&gt;tconway(a)earthlink.net&lt;/td&gt; 
    <td>$50.00</td> 
    <td>http://www.timconway.com</td> 
</tr> 
</tbody> 
</table> 

That's it!!!
One observation though, using too many javascript libraries is going to slow
down the page. XWiki loads prototype & scriptaculous by default (AFAIK,
these two would definitely get downloaded on every page refresh till XWiki
version 1.9.X). Adding jQuery (which when minified would still be 56
something kb & tablesorter.js which is another 13 kb approx) will definitely
make the page crawl with too many users. I tested the above page with YSlow!
Plugin on firefox & got a Grade D & overall performance score of 62 on
localhost. 
Hope the information helps. Thank you Bubulina.

Message: 7
Date: Wed, 2 Dec 2009 14:25:30 +0100
From: Vincent Massol &lt;vincent(a)massol.net&gt;
Subject: Re: [xwiki-users] xwiki and jquery
To: XWiki Users &lt;users(a)xwiki.org&gt;
Message-ID: &lt;A8CC7914-4D2F-4A96-BBF6-98711739C674(a)massol.net&gt;
Content-Type: text/plain; charset=US-ASCII; format=flowed; delsp=yes

Hi,

On Dec 2, 2009, at 2:10 PM, Bubulina wrote:

...

 Hello
 Do you know if jquery and xwiki work together? am trying to use the  
 table
 sort from jquery and integrated in xwiki i have errors ? 
AFAIK the only issue is to make prototype and jquery work together but  
that's doable. See for ex;
http://docs.jquery.com/Using_jQuery_with_Other_Libraries

You could also check the mail archives, maybe there are answers there:
http://xwiki.markmail.org/search/?q=jquery

Thanks
-Vincent