+- CodeIgniter Forums (https://forum.codeigniter.com)
+-- Forum: Archived Discussions (https://forum.codeigniter.com/forumdisplay.php?fid=20)
+--- Forum: Archived Libraries & Helpers (https://forum.codeigniter.com/forumdisplay.php?fid=22)
+--- Thread: Taco Class - The power of jQuery all wrapped up in a Codeigniter Library (/showthread.php?tid=22007)
Taco Class - The power of jQuery all wrapped up in a Codeigniter Library - El Forum - 08-26-2009
[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.
Taco Class - The power of jQuery all wrapped up in a Codeigniter Library - El Forum - 08-26-2009
[eluser]thinkigniter[/eluser]
The lasted version can now be found on the Codeigniter Wiki
Taco on Codeigniter wiki
Taco Class - The power of jQuery all wrapped up in a Codeigniter Library - El Forum - 08-30-2009
[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.
Taco Class - The power of jQuery all wrapped up in a Codeigniter Library - El Forum - 09-02-2009
[eluser]Berserk[/eluser]
thanks thinkigniter,very interesting
Taco Class - The power of jQuery all wrapped up in a Codeigniter Library - El Forum - 09-02-2009
[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
Taco Class - The power of jQuery all wrapped up in a Codeigniter Library - El Forum - 09-02-2009
[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.
Taco Class - The power of jQuery all wrapped up in a Codeigniter Library - El Forum - 10-08-2009
[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
Taco Class - The power of jQuery all wrapped up in a Codeigniter Library - El Forum - 10-08-2009
[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>');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');
});
};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");
});
};
');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!!!
Taco Class - The power of jQuery all wrapped up in a Codeigniter Library - El Forum - 10-10-2009
[eluser]stathis[/eluser]
Thinkigniter, many many thanks for your wonderful class and your precious help!!
Taco Class - The power of jQuery all wrapped up in a Codeigniter Library - El Forum - 10-22-2009
[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.