Created by: gwideman, Oct 9, 2010 4:50 am
Revised by: gwideman, Nov 3, 2011 4:31 pm (7 revisions)

Wikispaces makes use of the excellent jQuery Javascript library, so it is available for any scripts we develop, without requiring us to load it explicitly. There are a very few points to watch.

No $ alias for jQuery

Most examples of jQuery code make heavy use of the "$" variable as an alias for the jQuery function. However, the Wikispaces code does not make available this $ variable, presumably to avoid conflicts with other libraries you might want to use. Consequently, examples of jQuery code that you might try to copy from a book or tutorial sites will not work verbatim.

So, at first blush it may appear that code which normally uses $ will need to be rewritten substituting jQuery. Example:

<script type="text/javascript">
  var title = $('span.WikiPageMenuTitle').text();
  document.write('Title: ' + title + '<br>');
</script>

Rewrite as:

<script type="text/javascript">
  var title = jQuery('span.WikiPageMenuTitle').text();
  document.write('Title: ' + title + '<br>');
</script>

Using $ alias within the document ready handler function

It is often the case that we want a script to create a function that will run after the document is ready, and it's within that function that we would like to use jQuery most heavily, and where the $ alias would be most convenient. In that case we can use one of the conventional ways of using jQuery to create such a function, within which we can establish the $ variable locally.

You may see this as a sample for creating a ready handler:
 $(document).ready(function() {
 var title = $('span.WikiPageMenuTitle').text();
 alert('Title: ' + title);
} );
That of course assumes that $ is already an alias for jQuery, which won't work in Wikispaces, and as shown earlier, we would need to replace each "$" with "jQuery". Instead we can use an alternate syntax by which to invoke jQuery's ready handler function, as follows:
jQuery(function($) {
 var title = $('span.WikiPageMenuTitle').text();
 alert('Title: ' + title);
} ) ;
In this example, we spell out jQuery for the outermost call to the jQuery function. When the jQuery function sees a function as the argument (here, the anonymous "function($)" ) it assumes that this function is to be used as a document ready function. Furthermore, jQuery's document ready apparatus passes jQuery to our ready function, which becomes the value assigned to the $ parameter. This allows us to use $ inside our ready function.

Using $ alias for inline javascript

We might need to use jQuery in inline javascript, though this is less likely since jQuery is usually used for tasks on the fully loaded document. In any case, if we want to use $ as the alias for jQuery in inline code, without setting a global $ variable, we can wrap our code in a function. This is done most economically with an anonymous function like this:
<script type="text/javascript">
( function($) {
 $("a").css("background-color","#BADA55");
} ) (jQuery);
</script>