Control Client-Side DOM Elements from the Server

Click the buttons to control the display of elements from the server via Ajax

PHP/HTML Source:

require_once 'raxan/pdi/autostart.php';

class CLXPage extends RaxanWebPage {
    protected function _init() {
        // register fadeout event
        $this->registerEvent('fadeOut', '.fadeOut');

    protected function fadeIn($e) {
        $clx = c('#boxFade');

    protected function fadeOut($e){
        $clx = c('#boxFade');

    protected function slideDownPanel($e) {
        $data = 'Name: Mary Jane<br />
            Address: 35 Cyberspace Drive<br />
            Email:<br />';
        c('#personal')->html($data)->slideDown(); // show info
        c('#btnSlideUp')->removeAttr('disabled')->removeClass('disabled'); // enable button

    protected function slideUpPanel($e) {
        c('#btnSlideUp')->attr('disabled','disabled')->addClass('disabled'); // hide info and disable bbutton

    protected function animateBox($e) {
          'left'  => '0px',
          'width'  => '20px',
          'height'  => '20px',
          'display'  => 'block'



<!DOCTYPE html>

        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
        <title>Client Extension</title>
        <link href="raxan/ui/css/master.css" type="text/css" rel="stylesheet" />
        <!--[if lt IE 8]><link rel="stylesheet" href="raxan/ui/css/" type="text/css"><![endif]-->
        <link href="raxan/ui/css/default/theme.css" type="text/css" rel="stylesheet" />

        <div class="container prepend-top">
            <div class="rax-backdrop c10 column">
                <div class="rax-content-pal round pad text-center" >
                    <h3 class="rax-alert-pal hlf-pad">Client Extension</h3>
                    <form name="form1" action="" method="post">
                        <div class="ctrl-group">
                            <input class="button c8" type="submit" name="btnFadeInOut" id="btnFadeInOut" value="Fade In/Out" xt-bind="#click,fadeIn" />
                        <div class="ctrl-group">
                            <input class="button c8" type="submit" name="btnSlideDown" id="btnSlideDown" value="Slide Down Panel" xt-bind="#click,slideDownPanel" />
                        <div class="ctrl-group">
                            <input class="button disabled c8" type="submit" name="btnSlideUp" id="btnSlideUp" value="Slide Up Panel" disabled="disabled" xt-bind="#click,slideUpPanel" />
                        <div class="ctrl-group">
                            <input class="button c8" type="submit" name="btnAnimate" id="btnAnimate" value="Animate Box" xt-bind="#click,animateBox" />
            <div class="column last c20 prepend2">
                <div id="boxFade" class="rax-box success c10 margin hide">
                    <h3>Fade In/Out</h3>
                    <p>This box will fade-out in 2 seconds</p>
                <div id="personal" class="rax-box alert pad hide"></div>
                <div id="boxAnimate" class="border1 above hide"></div>


Plugin Source:

HTML/JavaScript Source:

Data Source: