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

[eluser]stathis[/eluser]
hey, please don't mind on the above, you have answered it on your previous post. Thanks again!

[eluser]thinkigniter[/eluser]
I've updated the class to version 4.06.

I've remove the sanitize feature and replaced it with an encoding feature.

Now, problematic html attributes will be encoded and a decoding jquery function will be called right after this so the encoded content will be decoded right after it is displayed in your html.

Cheers

[eluser]stathis[/eluser]
Hi , it's me again.
I would like your advice on implementing the following:

I have a form for a cms system, that displays the fields of a database table(products).
Inside the form, i have a datagrid that populates some related records from another table(product_images).
I've build the datagrid in such way , that each record is populated into input boxes, and it has 2 links, one for edit, one for delete.
Each of these links has a onclick function assigned, that calls a function by passing the record's id to it. For example:

Code:

<table>
<tr id="row_id_1">
   <td>
      &lt;input id="image_id_1" value="productimage1.jpg"/&gt;
   </td>
   <td>
      <a href="#" id="image_edit_1">edit</a>&nbsp;
      <a href="#" id="image_delete_1">delete</a>&nbsp;
   </td>
</tr>
<tr id="row_id_2">
   <td>
      &lt;input id="image_id_2" value="blalbla.jpg"/&gt;
   </td>
   <td>
      <a href="#" id="image_edit_2">edit</a>&nbsp;
      <a href="#" id="image_delete_2">delete</a>&nbsp;
   </td>
</tr>
</table>

The javascript function is like this:

Code:

function ajax_function(id,action){
   img=document.getElementById("image_id_"+id).value;
   $.ajax({
      type: "POST",
      url: base_url + "index.php/mycontroller/mytacofunction/"+ id,
      data:{ image_name: img, action: action}
   });        
}

The question comes to the point where i need to use the taco class to reload this content, and set the onclick functions using the eval functionallity
Do i need to specify eval functionality for the links of each row of the datagrid?
For example:

Code:

$this->taco->set('eval', "$('#image_edit_1').click(function () {ajax_function(1,'edit')};");
$this->taco->set('eval', "$('#image_delete_1').click(function () {ajax_function(1,'delete')};");
$this->taco->set('eval', "$('#image_edit_2').click(function () {ajax_function(1,'edit')};");
$this->taco->set('eval', "$('#image_delete_2').click(function () {ajax_function(2,'delete')};");

Could you please advice?

Thanks in advance,

Stathis

[eluser]thinkigniter[/eluser]
Hi Stathis,

I hope this helps...

First lets change your "function ajax_function" to a jquery function.

Code:

$(function() {

    $("td a").click(
        function(){
            var base_url = "http://localhost/";
            var link_id = $(this).attr('id');
            var link_action = $(this).html();
            var image_value = $("#image_id_"+link_id.substring(link_id.length-1)).val();
            $.post( base_url +"index.php/mycontroller/mytacofunction/", { id: link_id ,image_name: image_value, action: link_action } );
        });

});<!-- END jquery -->

This function will be called when the "a" link is clicked.

It will get the "ID" {link_id} of the "A" link that called it.
It will get the html {link_action} of the link that called it. e.g delete, edit
It will get the image value/name from the input above it.

It will then $.post (not $.AJAX) the information to your controller/method

The reason I used $.post not $.AJAX is because $.AJAX adds a cache breaking string to the end of the uri that stuffs up CI's uri fetching.

As to the return action...
If you have taconite loaded on your html/view file and the controller generates TACO/XML
then the html/view will automaticly recognise the taco commands you sent and action them.

cheers

[eluser]thinkigniter[/eluser]
also if you want to remove the input tag that has the image.

In Taco...

Code:

$link_id = $this->input->post('link_id');
$this->taco->set('empty', '#image_id_' . $link_id);

Poooof and it's GONE.

I LOVE JQUERY...

[eluser]stathis[/eluser]
Hi,
I was taking some time off for a while!!
Many thanks for your help, it was indeed what i was looking for.

[eluser]thinkigniter[/eluser]
No problems, anytime

[eluser]stathis[/eluser]
Hi,
Just a couple of questions (again!!)
1. I noticed that in the first line of your class on the codeigniter's wiki, you have the:

Code:

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

instead of

Code:

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

in all the other codeigniter's classes.

The class does not work on me with the ABSPATH check but it works when i use the BASEPATH check. Why it doesn't work on me with the ABSPATH, is it my mistake, do i need to check anything else?

2. I noticed that the replaceContent functionallity returns a leading space that causes the xml to break with "junk after document element".
I'm trying to implement it on a really basic example and it returns the following(i placed the [return value starts here] to point the space on the start of the document):

Code:

[return value starts here] <?xml version="1.0" encoding="ISO-8859-1"?>
<taconite>
<eval>&lt;![CDATA[jQuery.fn.decode=function(){
                return this.each(
                  function(){
                      var element = jQuery(this);
                      var html = element.html();
                      element.html(html.replace(/&amp;/g,'&')
                                        .replace(/</g,'<')
                                        .replace(/>/g,'>')
                                        .replace(/~raquo;/g,'&raquo;')
                                        );
                    });
              };]]></eval>
<replaceContent select="div#test_div">10:45:19
</replaceContent>
<decode select="div#test_div" />
</taconite>[return value ends here]

Notice the space before <?xml version="1.0" encoding="ISO-8859-1"?>

Any advice?
Thanks in advance

[eluser]stathis[/eluser]
Hi,
Thanks for your previous help.
I have another question and sincerely hope to make it work and stop bugging you!

I noticed that when taco works for the first time and returns the results it does not fire any events afterwards.
I'm using the $("td a").click(function(){....}) you provided in #13 post.

On that post i see that you mention:

[quote author="thinkigniter" date="1256703677"]
..As to the return action...
If you have taconite loaded on your html/view file and the controller generates TACO/XML
then the html/view will automaticly recognise the taco commands you sent and action them.
[/quote]

I'm not sure if it has something to do with and i'm missing something.

Once again,

Many thanks

[eluser]thinkigniter[/eluser]
Try using the jquery "Live" function
From Jquery docs
"Binds a handler to an event (like click) for all current - and future - matched element. Can also bind custom events."

Code:

$("td a").live("click", function(){
        var base_url = "http://localhost/";
        var link_id = $(this).attr('id');
        var link_action = $(this).html();
        var image_value = $("#image_id_"+link_id.substring(link_id.length-1)).val();
        $.post( base_url +"index.php/mycontroller/mytacofunction/", { id: link_id ,image_name: image_value, action: link_action } );
    });