#! /usr/bin/perl
use strict ;
use warnings ;
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 $env ;
for (sort keys %ENV) {
$env .= "$_ = $ENV{$_}<br />\n" ;
}
my $q = new CGI ;
my $params = $q->Vars;
my $par ;
for (sort keys %$params) {
$par .= "$_ = $params->{$_}<br />\n" ;
}
my $jquery = $my->{jquery} ;
JQuery::Taconite->new(id => 'ex6', remoteProgram => '/cgi-bin/jquery_taconite2.pl', rm => 'reply', addToJQuery => $jquery) ;
my $html =<<EOD;
<h1>Demo</h1>
This page demonstrates many updates at once.
<p />
<input id="ex6" type="button" value="Run Example 6" />
<input id="wireMe" type="button" value="Not Wired Yet" />
<hr />
<div id="appendDiv">Text will be appended</div>
<div class="deleteDiv">This div will be removed</div>
<div class="deleteDiv">This one too</div>
<div id="afterDiv">Append radio buttons</div>
<div id="beforeDiv">Append before this</div>
<div id="setAttrDiv">Set the attribute to green</div>
<div class="wrapMe">Wrap this text with a style</div>
<div id="evalTarget">Eval Target</div>
EOD
$my->{info}{BODY} = "<h1>START OF TACONITE EXAMPLE</h1>$html<h1>END OF EXAMPLE</h1>" ;
}
sub reply {
my $my = shift ;
my $result=<<EOD;
<taconite>
<hide select="#hideMe" />
<remove select=".deleteDiv" />
<append select="#appendDiv">
<span class="newContent">This span was appended to the APPEND div</span>
</append>
<prepend select="#prependDiv">
<span class="newContent">This span was prepended to the PREPEND div</span>
</prepend>
<after select="#afterDiv">
<p class="newContent">This paragraph element was inserted after the AFTER div</p>
<div class="newContent">
Note that we can have multiple elements here.
<div>Any XHTML can be used!</div>
<p> Radios follow:
<input type="radio" name="1" value="1" />
<input type="radio" name="1" value="2" />
<input type="radio" name="1" value="3" />
</p>
</div>
</after>
<before select="#beforeDiv">
<span class="newContent">This span was inserted before the BEFORE div</span>
</before>
<replace select="#replaceDiv">
<div class="newContent">This is <span style="font-weight:bold">new</span> content that includes a table.</div>
<table border="1" cellpadding="3" class="newContent">
<thead><tr><th>Header 1</th><th>Header 2</th></tr></thead>
<tbody>
<tr><td>row 1 col 1</td><td>row 1 col 2</td></tr>
<tr><td>row 2 col 1</td><td>row 2 col 2</td></tr>
</tbody>
</table>
</replace>
<replaceContent select="#replaceContentsDiv">
<div class="newContent">This is <span style="font-weight:bold">new</span> content that replaced the old content.</div>
<p class="newContent"> Checkboxes follow:
<input type="checkbox" name="1" value="1" />
<input type="checkbox" name="2" value="2" />
<input type="checkbox" name="3" value="3" />
</p>
</replaceContent>
<attr select="#setAttrDiv" name="class" value="green" />
<after select="#tr">
<tr class="newContent"><td>The</td><td>new</td><td>row</td></tr>
</after>
<wrap select=".wrapMe">
<div style="border:3px solid red; padding: 2px"><div style="border:3px solid blue; padding: 2px"></div></div>
</wrap>
<!-- script test -->
<append select="head">
<script type="text/javascript">
// wire up the 'wireMe' button on the fly
\$('#wireMe').click(function() {
alert('Button clicked!');
}).val("Wired!");
</script>
</append>
<eval>
\$('#evalTarget').html("This text came from an eval command");
</eval>
</taconite>
EOD
$my->{info}{AJAX} = $result ;
}