JavaScript Theming

This module provides core theme functions in javascript.
Update: If you wish to write contrib themes in javascript then you are VERY interested in this module: http://drupal.org/project/jtemplate .

You can use these functions just as you would use php functions and you would pass them JSON of your data and it will return to you themed output.

Enables better support for AJAX rich themes

For those of you wishing to experiment with javascript Drupal.messages can use the following code to generate messages to better understand how to use this object.
First after enableing the module give your self "administer JavaScript Theming" permissions in admin/user/permissions . then go to admin/settings/js-theming and play around with the settings. Every time you change a setting copy the javascript code bellow into firebug and run it to see the difference in behavior.
Paste it into your FireFox firebug console and click on 'run'. note: you will need to expand your console to be bigger than a single line. generaly that is done by clicking on (^) sign located on the bottom right corner of firebug.

Drupal.messages.set("This is a warning" + Math.random(), 'warning');
Drupal.messages.set("This is a notice" + Math.random(), 'notice');
Drupal.messages.set("This is a status" + Math.random(), 'status');
Drupal.messages.set("This is a custom message" + Math.random(), 'custom');
Drupal.messages.set("This is default status" + Math.random());

To test theme('table') try pasting this code into firebug and running it:

var header = [];
header.push("header 1");
header.push("header 2");
header.push("header 3");

var rows = [];

rows.push(["cell 1", "cell 2" , "cell 3"]);
rows.push(["cell 1", "cell 2" , "cell 3"]);
rows.push(["cell 1", "cell 2" , "cell 3"]);

$('.js_theming_messages').append(Drupal.theme('table', header, rows));

the above would generate this:

<table>
<thead><tr><th>header 1</th><th>header 2</th><th>header 3</th></tr></thead>
<tbody>
 <tr class="odd"><td>cell 1</td><td>cell 2</td><td>cell 3</td> </tr>
 <tr class="even"><td>cell 1</td><td>cell 2</td><td>cell 3</td> </tr>
 <tr class="odd"><td>cell 1</td><td>cell 2</td><td>cell 3</td> </tr>
</tbody>
</table>

Testing with PHP + AJAX + JSON

Create test.php with the following contents and place it at the root of your drupal install.

<?php
require_once './includes/bootstrap.inc';
drupal_bootstrap(DRUPAL_BOOTSTRAP_FULL);

$rows = array();
$header = array();

$header[] = "cell 1";
$header[] = "cell 2";
$header[] = "cell 3";

$cells = array();
$cells[] = array("data 1", "data 1", "data 1");
$cells[] = array('',"data 2");
$cells[] = array("data 3");


$table = array(
  'rows'    => $cells,
  'header'  => $header,
  'caption' => "This is a JSON caption",
);
print drupal_to_js($table);

Next run this code in firebug console

$.get('/test.php',function(data) {
data = Drupal.parseJson(data);
data['rows'][1].push("added cell");
data['rows'][1][0] = "altered cell";
$('.js_theming_messages').html(
  Drupal.theme('table', data['header'], data['rows'],{}, 'calsdfa1234f')
);

});