Mootools

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

Javascript to accompany your Mootools library

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;
    }
    
}

Mootools Helper

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>

Removing items from a list

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>