#! /usr/bin/perl -w
use strict ;
use JQuery::Demo ;
package main ;
my $tester = new JQuery::Demo ;
$tester->run ;
package JQuery::Demo ;
use JQuery::Taconite ;
sub start {
my $my = shift ;
$my->{info}{TITLE} = "Taconite Example" ;
my $jquery = $my->{jquery} ;
JQuery::Taconite->new(id => 'ex1', remoteProgram => '/cgi-bin/jquery_taconite_results1.pl', addToJQuery => $jquery) ;
my $html =<<EOD;
<h1>Demo 1</h1>
This page demonstrates many updates at once.
<p />
<input id="ex1" type="button" value="Run Example 6" />
<hr />
<table border="1" cellpadding="10">
<tr><th>Test</th><th>Description</th><th>Target</th></tr>
<tr>
<td><code>remove</code></td>
<td><div>Content to the right will be removed</div></td>
<td><div class="deleteDiv">This div will be removed</div>
<div class="deleteDiv">This one too</div>
</td>
</tr>
<tr>
<td><code>append</code></td>
<td><div>Content to the right will be appended to</div></td>
<td><div id="appendDiv">This is the APPEND div</div></td>
</tr>
<tr>
<td><code>prepend</code></td>
<td><div>Content to the right will be prepended to</div></td>
<td><div id="prependDiv">This is the PREPEND div</div></td>
</tr>
<tr>
<td><code>after</code></td>
<td><div>Content to the right will have new contents placed after it</div></td>
<td><div id="afterDiv">This is the AFTER div</div></td>
</tr>
<tr>
<td><code>before</code></td>
<td><div>Content to the right will have new contents placed before it</div></td>
<td><div id="beforeDiv">This is the BEFORE div</div></td>
</tr>
<tr>
<td><code>replace</code></td>
<td><div>Content to the right will be completely replaced
(note that the target div has a solid green border)</div></td>
<td><div id="replaceDiv" style="border: 2px solid green">This is the REPLACE div</div></td>
</tr>
<tr>
<td><code>replaceContent</code></td>
<td><div>Content to the right will have its contents replaced
(note that the target div has a solid green border)</div></td>
<td><div id="replaceContentsDiv" style="border: 2px solid green">This is the REPLACE-CONTENTS div
(<span>contents</span>
<span>contents</span>
<span>contents</span>)
</div>
</td>
</tr>
<tr>
<td><code>attr</code></td>
<td><div>Content to the right will have its 'class' attribute changed</div></td>
<td><div id="setAttrDiv">This text should turn green</div></td>
</tr>
<tr>
<td>Table Row insertion</td>
<td><div>Table to the right will have a new row inserted between rows one and two</div></td>
<td>
<table border="1" cellpadding="3">
<tr id="tr"><td>one</td><td>one</td><td>one</td></tr>
<tr><td>two</td><td>two</td><td>two</td></tr>
</table>
</td>
</tr>
<tr>
<td><code>wrap</code></td>
<td><div>Text to the right should be wrapped in two bordered divs</div></td>
<td><div class="wrapMe">Wrap me in bordered divs</div></td>
</tr>
<tr>
<td><code><script></code></td>
<td>
<div>The button to the right will get a click handler via a dynamically added script element</div>
</td>
<td><input type="button" value="This button has no click handler (yet)" id="wireMe" /></td>
</tr>
<tr>
<td><code>hide</code></td>
<td><div>Content to the right will be hidden</div></td>
<td><div id="hideMe">HIDE ME</div></td>
</tr>
<tr>
<td><code>eval</code></td>
<td><div>Evaluating the contents of this command should insert text to the right </div></td>
<td><div id="evalTarget"></div></td>
</tr>
</table>
</div>
</div>
EOD
$my->{info}{BODY} = "<h1>HELLO</h1>$html<h1>END OF EXAMPLE</h1>" ;
}