%META:TOPICINFO{author="ProjectContributor" comment="reprev" date="1265972954" format="1.1" reprev="1.2" version="1.2"}%
%META:TOPICPARENT{name="JQueryPlugin"}%
---+!! %TOPIC%
Follow [[http://drupal.org/node/172169][Drupal&#8217;s JavaScript coding standards]]

%TOC%
%JQREQUIRE{"chili"}%

---++ Wrap =$=

If you want to use jQuery&#8217;s =$= variable, you have to wrap your code like this:

<verbatim class="js">
(function($) {

  // code using $ variable

})(jQuery);
</verbatim>

The =$= global variable is not used by !JQueryPlugin, to avoid conflicts
with other javascript libraries that may be loaded. jQuery examples that
you find on the web will work as written, just as long as you wrap
them as described here. 

---++ Shorthands
Use the jQuery shorthand =$= where possible:

<verbatim class="js">
$(function() { ... });
</verbatim>

instead of 

<verbatim class="js">
$(document).ready(function() { ... });
</verbatim>

---++ Global variables

If you want to use global variables within the scope of your code, wrap your code like this:

<verbatim class="js">
(function() {

  var foo = 'bar'; // yay, it's almost like I'm global

})();
</verbatim>

If you want to use global variables in the global scope, put the variable in the =foswiki= namespace:

<verbatim class="js">
foswiki.foo = 'bar';
</verbatim>

Mind the predefined global variables. See next section.

---++ Propagating perl settings to javascript

The standard foswiki library initializes the global =foswiki= object with
a subset of preference settings from foswiki, =SCRIPTURLPATH=, =SCRIPTSUFFIX=, and =PUBURLPATH=. These are sufficient to call scripts on the server and build attachment URLs. They are accessed using the =foswiki.getPreference= method:
<verbatim>
var pubUrlPath = foswiki.getPreference('PUBURLPATH');
</verbatim>

In addition, the JQuery =foswiki= plugin adds the macros specified by the
global =EXPORTEDPREFERENCES= preference (currently %EXPORTEDPREFERENCES%).

---++ Avoid Internet Explorer errors

   * Use an object if you need an associative array, not an array. [[http://ajaxian.com/archives/javascript-associative-arrays-considered-harmful][ [source&#93; ]]
   * Declare all local variables with =var= before they are used.
   * Remove trailing commas from array and object definitions, i.e.:
     <verbatim class="js">var object = { foo: 'bar' }</verbatim> not 
     <verbatim class="js">var object = { foo: 'bar', }</verbatim>

---++ Metadata

Use JQueryMetadata to integrate jQuery plugins into Foswiki.

---++ <nop>LiveQuery

Use JQueryLiveQuery to initialize your plugin for all html elements of a page. Otherwise content
that is loaded asynchronously using ajax won't be initialized. !LiveQuery will take care of that
automatically.

Instead of

<verbatim class="js">
$(".jqPluginName").each(function() {
  // initializer
});
</verbatim>

use

<verbatim class="js">
$(".jqPluginName").livequery(function() {
  // initializer
});
</verbatim>

See JQueryMetadata for a more thorough example of using metadata and livequery



%META:PREFERENCE{name="TOPICTITLE" title="TOPICTITLE" type="Local" value="JQuery Coding Standards"}%
