Program a Pattern (Dojo)

Reusable example. Using a class to create a generic updater.

by Piotr Zalewa

HTML

<form id='myForm' method='post' action='/ajax_html_echo/'>
    <input type='text' name='html' value='Something to respond' />
    <input type='submit' />
</form>
<p id='myContainer'></p>

CSS

#myContainer { 
    margin-top: 10px;
    color: navy; 
    font-weight: bold;
}

JavaScript

dojo.declare('foo.FormUpdater', null, {
    constructor: function(form, container, options) {
        this.form = form;
        this.container = container;
        this.requestOptions = options;
        this.attach();
    },
    attach: function(){
        dojo.connect(this.form, 'onsubmit', this, "send");
    },
    send: function(evt){
        if(evt) dojo.stopEvent(evt);
        dojo.xhrPost(dojo.mixin({
            form: this.form,
            url: this.form.action,
            handle: dojo.hitch(this, 'onComplete')
        }, this.requestOptions));
    },
    onComplete: function(data){
        dojo.attr(this.container, "innerHTML", data);
    }
});
dojo.addOnLoad(function() {
    new foo.FormUpdater(dojo.byId('myForm'),
                        dojo.byId('myContainer'));
});