Taconite php class and jQuery plugin

Taco PHP Class

This Class has the following features:

All through the power of the Jquery Javascript Library and best of all this is achieved, mostly, without leaving PHP.

Important:  The Jquery Javascript Library and Taconite Javascript Plugin are required.

Initialising the Taco library

Initialise from within a controller using the following initialisation function:

$this->load->library('taco');
How taconite works

Mike Alsup (malsup.com) is the creater of the taconite plugin and his website discuss this topic in great detail.

Download

Download this example

Code examples

These examples are from the Malsup website with my php code examples added

Structure

This example shows how you can easily manipulate the structure of the DOM. The markup is as follows: 
<div id="example1" style="background-color: #ffa; padding:10px; border:1px solid #ccc"> 
    This is the <span style="color:#800">structure example</span> div. 
</div>

The following code is used in the view to request example1: 

$.get('http://findmeonthe.net/TACONITE/index.php/taco_example/example1');

The php code behind this


        function example1()
        {
          $this->taco->set('after', '#example1', 'This text will go AFTER the example div.');
          $this->taco->set('before', '#example1', '<div>This div will go BEFORE the example div.</div>');
          $this->taco->set('wrap', '#example1 span', '<span style="border: 1px dashed #00F"/>');
          $this->taco->set('append', '#example1', '<div>This div is APPENDED</div>');
          $this->taco->output();    
        }
This is the structure example div.

Tables

This example shows how easy it is to manipulate a table with Taconite. The markup is as follows: 

<table id="example2" style="background-color: #ffa; padding:10px; border:1px solid #ccc"> 
    <thead> 
        <tr><td>one</td><td>two</td></tr> 
    </thead> 
    <tbody> 
        <tr><td>A</td><td>B</td></tr> 
        <tr><td>C</td><td>D</td></tr> 
    </tbody> 
</table>

The following code is used to request example2.xml: 

$.ajax( { url: 'http://findmeonthe.net/TACONITE/index.php/taco_example/example2' } );

The php code behind this

  			  
          function example2()
          {
            $this->taco->set('append', '#example2', '<tfoot><tr><td>Foot-1</td><td>Foot-2</td></tr></tfoot>');
            $this->taco->set('replace', '#example2 thead', '<thead><tr><td>Head-1</td><td>Head-2</td></tr></thead>');
            $this->taco->set('prepend', '#example2 tbody', '<tr><td>Body-First</td><td>Body-First</td></tr>');
            $this->taco->set('before', '#example2 tfoot', '<tr><td>Body-Last</td><td>body-Last</td></tr>');
            $this->taco->set('append', '#example2 tbody', '<tr><td colspan="2" align="center">spanned column</td></tr>');
            $this->taco->output();    
          }

one two
A B
C D

Styling

This example shows how you can use Taconite to change the presentation of the markup. The markup is as follows: 

<div id="example3" style="background-color: #ffa; padding:10px; border:1px solid #ccc"> 
    <div>div one</div> 
    <div><span>div two</span></div> 
    <div>div three</div> 
</div>

The following code is used to request example3.xml: 

$.get('http://findmeonthe.net/TACONITE/index.php/taco_example/example3');

The php code behind this

       function example3()
         {
           $this->taco->set('css', '#example3', array('backgroundColor'=>'#80ff80') );
           $this->taco->set('addClass','#example3 div span','special' );
           $this->taco->output();
         }

div one
div two
div three

Effects

This example shows how you can use jQuery effects with Taconite. The markup is as follows: 

<div id="example4" style="display:none; background-color: #ffa; padding:10px; border:1px solid #ccc"> 
    Initially this div is hidden. 
</div>

The following code is used to request 'http://findmeonthe.net/TACONITE/index.phptaco.php/taco_example/example4': 

$.post('http://findmeonthe.net/TACONITE/index.php/taco_example/example4', {});

The php code behind this

       
    function example4()
    {
       $this->taco->set('replaceContent', '#example4', '<pre>lorem ipsum dolor sit amet consectetuer adipiscing elit</pre>' );
       $this->taco->set('slideDown', '#example4', '100' );
       $this->taco->output();     
    }

Eval

This example shows how you can return JavaScript in your command document. The markup is as follows: 

<div id="example5" style="background-color: #ffa; padding:10px; border:1px solid #ccc"> 
    Initial content. 
</div>

The following code is used to request http://findmeonthe.net/TACONITE/index.phptaco.php/taco_example/example5

$.get('http://findmeonthe.net/TACONITE/index.phptaco.php/taco_example/example5');

The php code behind this

                   
                
    function example5()
                    {
                        $this->taco->set('eval', "$('#example5').html('<strong>This is new content!</strong>');alert('Content udpated.');" );
                        $this->taco->output();
                    }

Initial content.

Demo 1

This page demonstrates many updates at once.

The following code is used to request http://findmeonthe.net/TACONITE/index.php/taco_example/example6

$.get('http://findmeonthe.net/TACONITE/index.php/taco_example/example6');

The php code behind this

        
    function example6()
    {
        //$this->taco->html = true;
        $this->taco->set('remove','.deleteDiv');
        $this->taco->set('prepend', '#prependDiv', '<span class="newContent">This span was prepended to the PREPEND div</span>');
        $this->taco->set('after', '#afterDiv', '
                                            <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>                         
                                         ');
        $this->taco->set('before', '#beforeDiv', '<span class="newContent">This span was inserted before the BEFORE div</span>');
        $this->taco->set('replace', '#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>                         
                         ');
        $this->taco->set('replaceContent', '#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>                         
                         ');
        $this->taco->set('attr','#setAttrDiv', array('class'=>'green') );
        $this->taco->set('after','#tr', '<tr class="newContent"><td>The</td><td>new</td><td>row</td></tr>');
        $this->taco->set('wrap', '.wrapMe', '<div style="border:3px solid red; padding: 2px"><div style="border:3px solid blue; padding: 2px"/></div>');
        $this->taco->set('append', 'head','
                        <script type="text/javascript">
                            $("#wireMe").click(function() {
                                alert("Button clicked!");
                            }).val("Wired!");
                        </script>'                         
                         );
        $this->taco->set('eval', '$("#evalTarget").html("This text came from an eval command");');
		  $this->taco->set('hide', '#hideMe');                
        $this->taco->output();
        
    }

jQuery Command Description Target
remove
Content to the right will be removed
This div will be removed
This one too
append
Content to the right will be appended to
This is the APPEND div
prepend
Content to the right will be prepended to
This is the PREPEND div
after
Content to the right will have new contents placed after it
This is the AFTER div
before
Content to the right will have new contents placed before it
This is the BEFORE div
replace
Content to the right will be completely replaced (note that the target div has a solid green border)
This is the REPLACE div
replaceContent
Content to the right will have its contents replaced (note that the target div has a solid green border)
This is the REPLACE-CONTENTS div (contents contents contents)
attr
Content to the right will have its 'class' attribute changed
This text should turn green
Table Row insertion
Table to the right will have a new row inserted between rows one and two
one one one
two two two
wrap
Text to the right should be wrapped in two bordered divs
Wrap me in bordered divs
<script>
The button to the right will get a click handler via a dynamically added script element
hide
Content to the right will be hidden
HIDE ME
eval
Evaluating the contents of this command should insert text to the right

Demo 2 - Strings Instead of Documents

Demo 2 is exactly the same as Demo 1, with one key difference: Demo 2 processes an XML String returned from the server instead of an XML Document. Processing XML strings can not be done using Taconite's auto-detection logic. To process an XML string response from the server you must invoke the taconite method manually and pass it the string.

NOTE: The preferred way of using Taconite is with XML Documents! However, if you are unable to use XML mime types for some reason, well-formed XML in string format is supported.

The following code is used to request 'http://findmeonthe.net/TACONITE/index.php/taco_example/example7'

    
    $.get('http://findmeonthe.net/TACONITE/index.php/taco_example/example7', 
        function(responseText) { 
   		 // call Taconite manually, passing it the server response 
    		$.taconite(responseText); 
		});        
		);

The php code behind this

        	
    function example7()
    {
        $this->taco->html = TRUE;
        $this->taco->method = 'plain';
        $this->taco->set('hide', '#hideMe2' );
        $this->taco->set('remove','.deleteDiv2');
        $this->taco->set('append', '#appendDiv2', '<span class="newContent">This span was appended to the APPEND div</span>');
        $this->taco->set('prepend', '#prependDiv2', '<span class="newContent">This span was prepended to the PREPEND div</span>');
        $this->taco->set('after', '#afterDiv2', '
                                            <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>                         
                                         ');
        $this->taco->set('before', '#beforeDiv2', '<span class="newContent">This span was inserted before the BEFORE div</span>');
        $this->taco->set('replace', '#replaceDiv2', '
                            <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>                         
                         ');
        $this->taco->set('replaceContent', '#replaceContentsDiv2', '
                            <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>                         
                         ');
        $this->taco->set('attr','#setAttrDiv2', array('class'=>'green') );
        $this->taco->set('after','#tr2', '<tr class="newContent"><td>The</td><td>new</td><td>row</td></tr>');
        $this->taco->set('wrap', '.wrapMe2', '<div style="border:3px solid red; padding: 2px"><div style="border:3px solid blue; padding: 2px"/></div>');
        $this->taco->set('append', 'head','
                        <script type="text/javascript">
                            $("#wireMe2").click(function() {
                                alert("Button clicked!");
                            }).val("Wired!");
                        </script>'                         
                         );
        $this->taco->set('eval', '$("#evalTarget").html("This text came from an eval command");');
        $this->taco->output();
    }

Test Description Target
remove
Content to the right will be removed
This div will be removed
This one too
append
Content to the right will be appended to
This is the APPEND div
prepend
Content to the right will be prepended to
This is the PREPEND div
after
Content to the right will have new contents placed after it
This is the AFTER div
before
Content to the right will have new contents placed before it
This is the BEFORE div
replace
Content to the right will be completely replaced (note that the target div has a solid green border)
This is the REPLACE div
replaceContent
Content to the right will have its contents replaced (note that the target div has a solid green border)
This is the REPLACE-CONTENTS div (contents contents contents)
attr
Content to the right will have its 'class' attribute changed
This text should turn green
Table Row insertion
Table to the right will have a new row inserted between rows one and two
one one one
two two two
wrap
Text to the right should be wrapped in two bordered divs
Wrap me in bordered divs
<script>
The button to the right will get a click handler via a dynamically added script element
hide
Content to the right will be hidden
HIDE ME
eval
Evaluating the contents of this command should insert text to the right

The following code is used to request http://findmeonthe.net/TACONITE/index.php/taco_example/example8

$.get('http://findmeonthe.net/TACONITE/index.php/taco_example/example8');

The php code behind this

function example8()
{
  ob_start();
	echo '<table><tbody>';
	for($i=1;$i<=500;$i++)
	{
		echo '<tr><td>'.$i.'</td><td>data</td><td>data</td><td>data</td><td>data</td><td>data</td><td>data</td><td>data</td><td>data</td><td>data</td></tr>';    
	}
	echo '</tbody></table>';
	$content = ob_get_clean();
	$this->taco->set('replaceContent', '#example8', $content );
	$this->taco->output;	
}

Performance Test

This example loads a 10 column, 500 row table into the space below. Processing this table will result in the creation of over 5500 new elements.

Table will be loaded here.

Taco Class

   Version 4.05 <?php if (!defined('BASEPATH')) exit('No direct script access allowed');

/**
* ----------------------------------------------------------------------------
*
* The Software shall be used for Good, not Evil... bad eval()!
*
* THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
* IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
* FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
* AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
* LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
* OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
* SOFTWARE.
*
*/
DEFINE('TACO_VERSION', 4.05);

// --------------------------------------------------------------------    
class Taco{

    var $storage =  array();
    
    var $newline = "\r\n";
    
    var $xml_encode = 'ISO-8859-1';
    
    var $xml_vers = '1.0';
    
    var $html = FALSE;
    
    var $method = 'xml';
    
    var $illegals = array('&'=>'&amp;','&nbsp;' => '&#160;');

// --------------------------------------------------------------------    
    function taco()
    {
        log_message('message','Taco library started');
    }    
// --------------------------------------------------------------------            
    function _san($string)
    {
        return strtr($string,$this->illegals);
    }    
// --------------------------------------------------------------------            
    function _camel($string)
    {    
        if( strpos($string,'_') === FALSE )    return $string;    
        $s = split('_', $string );
        return strtolower( trim( $s[0] ) ). ucwords( strtolower( trim( $s[1] ) ) );
    }    
// --------------------------------------------------------------------    
    function set($name = '', $attributes = NULL, $content = NULL)
    {
        if( is_string($attributes) and $attributes != '' )
        {            
            /*  */
            switch(true)
            {
                /* self closing + css/class etc. etc. */
                case( is_array($content) ):
                
                    foreach( $content as $arg1 => $arg2 ) 
                    {
                        $this->storage[] = '<'.$name.' select="'.$attributes.'" arg1="'.$this->_camel($arg1).'" arg2="'.$this->_camel($arg2).'" />';
                    }        
                    break;
                /* single + show or class */
                case( $content == 'fast'):
                case( $content == 'slow' ):
                case( $name == 'addClass' ):
                case( $name == 'removeClass' ):
                case( $name == 'toggleClass' ):                
                    $this->storage[] = '<'.$name.' select="'.$attributes.'" arg1="'.$content.'" />';
                    break;
                /* self closing + special: eval */
                case( ($name == 'eval' ) ):
                    
                    $this->storage[] = '<eval><![CDATA['.$attributes.']]></eval>';
                    break;
                /* content replace etc. etc. */
                case( is_string($content) ):    
                    
                    $this->storage[] = '<'.$name.' select="'.$attributes.'">'.$this->_san($content). $this->newline .'</'.$name.'>';
                    break;
                
                default:
                    $this->storage[] = '<'.$name.' select="'.$attributes.'" arg1="'.$content.'" />';
            }    
        }
    }
// --------------------------------------------------------------------            
    /*  */
    function output()
    {
        $storage = $this->storage;
        if($storage != '' and is_array($storage) and count($storage) > 0 )
        {
            $xmlString = '';
            
            foreach( $storage as $string )
            {
                $xmlString .= $this->newline . $string;
            }
           /* 
            * Validation of xmldoc is not available in php4 as far as I can tell...
            * But IE7 & FF3 have xml validating so check your generated docs with them.
            */
            if( $this->html == true )
            {
                header('Content-type: text/html;');
            }
            else
            {
                header('Content-type: text/'.$this->method.'; charset='.$this->xml_encode);    
                echo '<?xml version="'.$this->xml_vers.'" encoding="'.$this->xml_encode.'"?>'.$this->newline;
            }
            echo '<taconite>'.$xmlString.$this->newline.'</taconite>';
        }
    }
}/* <!-- Taco -->*/
?>