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.

[code] // 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;
}

}

[/code]

[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.

[code] <?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);

}

?> [/code]

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] [code] <?=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" />

loading...

</form>

[/code]

[b]Non-repeating form (that is the form goes away after you've submitted)[/b] [code] <?=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" />

loading...

</form>

[/code]

[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!).

[code]

<a href='#' onclick="ajax_remove_item('<?=base_url()?>/delete/item_id', 'unique_id_for_each_item');" id='unique_id_for_each_item_delete'> Your dynamic text goes here ;) [/code]