Mootools

This Mootools article was written to make it easy to utilize mootools in CI projects.

[h3]Javascript to accompany your Mootools library[/h3]

This wraps up mootools to make is easier to use with the helpers. Hopefully someone finds it useful.

[b]NB:[/b] This was written when Mootools r83 was around. I haven't tested with with v1 release, so it may or may not work. With some minor tweaks I suspect it would work like a charm.

// For AJAX Forms
function ajax_me(url, item_id, loading, container) {
    
    new ajax(url,
        {postBody:$(item_id),
        update: container,
        onStateChange: function() {
            $(loading).setStyle('display', 'inline');
        },
        onComplete: function() {
            $(loading).setStyle('display', 'none');
            $(item_id).remove(); // Get rid of the form
            $(item_id).reset(); // Clear the form just in case
        },
        evalScripts: true}
    ).request();
    
    //var myEffect = new Fx.Slide(item_id, {duration: 0});
    //myEffect.toggle(); //will close the element if open, and vice-versa.
    
}

function ajax_me_repeat(url, item_id, loading, container) {
    
    new ajax(url,
        {postBody:$(item_id),
            update: container,
            onStateChange: function() {
                $(loading).setStyle('display', 'inline');
            },
            onComplete: function() {
                $(loading).setStyle('display', 'none');
                $(item_id).reset(); // Clear our form for the next round
            },
            evalScripts: true}
        ).request();

}

// For AJAX 'remove in place'
function ajax_remove_item(url, item_id) {
    
    var agree=confirm("Are you sure you wish to delete this?");

    if (agree) {
    
        new ajax(url,
            {postBody:$(item_id),
            update: item_id,
            onStateChange: function() {
                //$(loading).setStyle('display', 'inline');
            },
            onComplete: function() {
                //$(loading).setStyle('display', 'none');
                var myEffect = new Fx.Slide(item_id, {duration: 500});
                myEffect.toggle(); //will close the element if open, and vice-versa.
                $(item_id).remove(); // Get rid of the form
            },
            evalScripts: true}
        ).request();
        
    } else {
        return false;
    }
    
}

[h3]Mootools Helper[/h3]

You'll notice it's very simple, and basically a drop in for form_open but for Mootools. In my quick testing this fails gracefully BUT you need to account for it with your controller.

<?php

    // Mootools Ajax form
    function form_open_ajax($action, $attributes = array(), $hidden = array(), $ajax_loading, $ajax_returned) {

        $CI =& get_instance();
        $attributes['onsubmit'] = "ajax_me('".$CI->config->site_url($action)."', this, '$ajax_loading', '$ajax_returned');return false;";
        return form_open($action, $attributes, $hidden);

    }
    
    function form_open_ajax_repeat($action, $attributes = array(), $hidden = array(), $ajax_loading, $ajax_returned) {

        $CI =& get_instance();
        $attributes['onsubmit'] = "ajax_me_repeat('".$CI->config->site_url($action)."', this, '$ajax_loading', '$ajax_returned');return false;";
        return form_open($action, $attributes, $hidden);

    }
    
?>

I'm be bad here and assume you've already included the helper and you don't need hand-holding. Here is how you implement it into a view.

[b]Repeating form (that is the form stays there after you've submitted)[/b]

<?=form_open_ajax_repeat('mycontroller', array('id' => 'formname'), NULL, 'loading', 'returned_data');?>
    <input type="text" name="input_name" id="input_name" /> <input type="submit" value="add" />
     <div id="loading"><img src='&lt;?=base_url()?&gt;assets/loading.gif' alt='loading...' /> loading...</div>    
&lt;/form&gt;

<div id="returned_data"></div>

[b]Non-repeating form (that is the form goes away after you've submitted)[/b]

<?=form_open_ajax('mycontroller', array('id' => 'formname'), NULL, 'loading', 'returned_data');?>
    <input type="text" name="input_name" id="input_name" /> <input type="submit" value="add" />
     <div id="loading"><img src='&lt;?=base_url()?&gt;assets/loading.gif' alt='loading...' /> loading...</div>    
&lt;/form&gt;

<div id="returned_data"></div>

[h3]Removing items from a list[/h3]

This is how you remove items from a list (it saves back to the server). I've use a table (since it's correct for showing lists of data effectively) - I don't want to start WW3 over DIVs vs Tables (there is a forum topic about that already!).

<tr id="unique_id_for_each_item">
        <td>
            &lt;a href='#' onclick="ajax_remove_item('&lt;?=base_url()?&gt;/delete/item_id', 'unique_id_for_each_item');" id='unique_id_for_each_item_delete'&gt;
                <img src="&lt;?=base_url()?&gt;assets/delete.gif" alt="Delete" border="0" /></a>
        </td>
        <td>Your dynamic text goes here ;)</td>
    </tr>