Taco Class - The power of jQuery all wrapped up in a Codeigniter Library

[eluser]thinkigniter[/eluser]
The Taco class for codeigniter.
——————————————————————————————————————————————————-
You can see a demonstration of this libaray at http://findmeonthe.net/TACONITE/
It has lots of examples and the source code is dowloadable.
——————————————————————————————————————————————————-
Updated to version:- 4.06

Available from the wiki.

What does this class do:

- Manipulate html elements from within your controller
- Transmit data via AJAX
- Send JQUERY commands e.g. slideUp, fade, show, hide, replaceWith, append, etc etc. to munipulate your webpages, without reloading the pages

This class simply generates an xml file that allows you to take control of your webpage.

[eluser]thinkigniter[/eluser]
The lasted version can now be found on the Codeigniter Wiki
Taco on Codeigniter wiki

[eluser]thinkigniter[/eluser]
If anyone is interested i'm almost finished a plugin/helper to make the creation of links in view simpler.

Instead of...

Code:

$('#MYBUTTON').click(function() {$.get('http://findmeonthe.net/TACONITE/index.php/taco_example/example1'); });

It will be...

Code:

trigger( '#MYBUTTON', 'http://findmeonthe.net/TACONITE/index.php/taco_example/example1', 'click' );

It will also except arrays of links.

[eluser]Berserk[/eluser]
thanks thinkigniter,very interesting

[eluser]NachoF[/eluser]
Wow.. I was so excited... I thought it was gonna be something like the Telerik Jquery Extensions!... not that your thing is bad though.. I just have been wanting something like that for codeigniter for some time now
http://www.telerik.com/products/aspnet-mvc.aspx

[eluser]thinkigniter[/eluser]
Hi NachoF
Thanks for your comments.
Did you know that jquery has a UI library that looks very similar to the Telerik Jquery Extensions.
Here is an example on how to use Jquery UI with the Taco Class


Using the Jquery UI library
We will use the Accordion for this demo but all the elements are available.


In Your View
Load the Jquery library, UI library and some UI css in your header...

ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js
ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.min.js
www.malsup.com/jquery/taconite/jquery.taconite.js?v3.06
static.jquery.com/ui/css/base2.css
ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/themes/ui-lightness/jquery-ui.css
static.jquery.com/ui/css/demo-docs-theme/ui.theme.css

Code:

// Create a javascript tag and add
$(function() {
   // enable debug logging in Taconite Plugin
    $.taconite.debug = true;
    /*
        If your path is different than in the root directory
        then this path needs to be changed.
    */
    $.get('http://<?php echo $_SERVER['HTTP_HOST'];?>/jui.php/example/jui_example');
});

In your php controller [called example.php]...

Code:

function jui_example(){
    $this->taco->set('prepend','#mainContainer','This is to be appended');
    $this->taco->set('replaceContent','div#mainContainer','
                <div id="accordion">    
                    <h3><a href="#">Section 1</a></h3>
                    <div>
                        <p>
                        Mauris mauris ante, blandit et, ultrices a, suscipit eget, quam. Integer
                        ut neque. Vivamus nisi metus, molestie vel, gravida in, condimentum sit
                        amet, nunc. Nam a nibh. Donec suscipit eros. Nam mi. Proin viverra leo ut
                        odio. Curabitur malesuada. Vestibulum a velit eu ante scelerisque vulputate.
                        </p>
                    </div>
                    <h3><a href="#">Section 2</a></h3>
                    <div>
                        <p>
                        Sed non urna. Donec et ante. Phasellus eu ligula. Vestibulum sit amet
                        purus. Vivamus hendrerit, dolor at aliquet laoreet, mauris turpis porttitor
                        velit, faucibus interdum tellus libero ac justo. Vivamus non quam. In
                        suscipit faucibus urna.
                        </p>
                    </div>
                </div>');
    //$this->taco->html = true;
    $this->taco->set('eval', "$('div#accordion').accordion();");
    $this->taco->output();        
}

You can download the jui_example.zip for a working example.

[eluser]stathis[/eluser]
Hi,
the class is great, but i have a little question:

First of all, i would like a small explanation on the eval feature, what is the general purpose of it?

Secondly, i use your class to call a controller function and load dynamically content inside a predefined div in my view.

Inside that div, i have a close button (that comes from the dynamically content) and i need to add an onclick event, in order to use again the taco class and do something else.

This works fine in firefox, but not in IE or chrome.
I suspect that somehow the script lucks some reference, and i thought to use the eval feature.
Could you please tell me how to do that?
What i need is to pass using the eval feature, an on click event to the loaded content.

Thanks in advance,

Stathis

[eluser]thinkigniter[/eluser]
Hi stathis,
Try This...

In your div assign an ID to your button e.g. #myID
'#myID' for id='myID' or '.myID' for class='myID'.

Code:

<input value="YouClickedMe" id="myID" type="button">

Now add this to your view

Code:

<script type="text/javascript">
$(function() {
    // enable debug logging in Taconite Plugin
    $.taconite.debug = true;
    
    $('#myID').click(
        function() {
            $.post('http://localhost/index.php/CONTROLLER_NAME/FUNCTION_NAME', {});
        }
    );
});
</script>

OR

Add this to your taco code

Code:

$this->taco->set(
    'append',
        'head',
    '<script type="text/javascript">
        $("#myID").click(function() {
            $.post("http://localhost/index.php/CONTROLLER_NAME/FUNCTION_NAME", {});
        });
    </script>');

The code above will be added into the "HEAD" tag of your HTML page



As to how the eval option works...

Take the code below for example

Code:

// create the example plugin
$.fn.replaceAndFadeIn = function(newContentElements) {
    return this.each(function() {
        $(this).empty().hide().append(newContentElements).fadeIn('slow');
    });
};

This is a simple js/jquery plugin that creates an empty/hide/fadeIn effect to any element it is passed.
You would called it like so...

Code:

<script type="text/javascript">
$(function() {
    $('#myID').replaceAndFadeIn();
});
</script>

Now I can send this code via TACO/PHP like so...

Code:

$this->taco->set(
    'eval',
    '
        // create the example plugin
        $.fn.replaceAndFadeIn = function(newContentElements) {
            return this.each(function() {
                $(this).empty().hide().append(newContentElements).fadeIn("slow");
            });
        };
');

And in the next line of TACO/PHP

Code:

$this->taco->set(
    'replaceAndFadeIn',
    '#myID');

Now when the TACO/PHP function is called the code for the 'replaceAndFadeIn' plugin will be added to the html page.
Then in the next line of TACO/PHP the 'replaceAndFadeIn' plugin is applied to the element with the '#myID' id.

Simple!!!

[eluser]stathis[/eluser]
Thinkigniter, many many thanks for your wonderful class and your precious help!!

[eluser]stathis[/eluser]
Hi,
Just another question.
I'm using the class to implement a editable datagrid table functionality and it works just fine.

I would like to spice up the UI by adding a fade effect in addition to replaceContent functionality.
Any ideas?

Many thanks.