Difference between revisions of "User:Adrian Greeve/form comparison"

Jump to: navigation, search
(form data definition)
(Form saving)
Line 1: Line 1:
 +
{| class="nicetable"
 +
|+ Form saving
 +
|-
 +
!width="50%"|Type A
 +
!width="50%"|Type B
 +
|-
 +
| <code javascript>
 +
save_edit_form: function(formobject) {
 +
 +
            // Perhaps this could all be included in a save method for the form.
 +
            var formdata = formfactory.getFormData();
 +
            formdata["lessonid"] = lesson.id;
 +
            formdata["pageid"] = this.id;
 +
            delete formdata["Jump_1"];
 +
 +
            var promises = ajax.call([{
 +
                methodname: 'mod_lesson_add_page',
 +
                args: formdata
 +
            }]);
 +
 +
            $.when.apply($.when, promises).then(function(response) {
 +
                if (response.warnings.length != "0") {
 +
                    formobject.handleErrors(response.warnings);
 +
                }
 +
            });
 +
</code>
 +
| <code javascript>
 +
save_edit_form: function(formobject) {
 +
 +
            // Perhaps this could all be included in a save method for the form.
 +
            var formdata = formfactory.getFormData();
 +
            formdata["lessonid"] = lesson.id;
 +
            formdata["pageid"] = this.id;
 +
            delete formdata["Jump_1"];
 +
 +
            var promises = ajax.call([{
 +
                methodname: 'mod_lesson_add_page',
 +
                args: formdata
 +
            }]);
 +
 +
            $.when.apply($.when, promises).then(function(response) {
 +
                if (response.warnings.length != "0") {
 +
                    formfactory.handleErrors(response.warnings, formobject);
 +
                }
 +
            });
 +
</code>
 +
|}
 +
 
{| class="nicetable"
 
{| class="nicetable"
 
|+ Form data compilation for display
 
|+ Form data compilation for display

Revision as of 01:27, 26 November 2015

Form saving
Type A Type B
save_edit_form: function(formobject) {
 
            // Perhaps this could all be included in a save method for the form.
            var formdata = formfactory.getFormData();
            formdata["lessonid"] = lesson.id;
            formdata["pageid"] = this.id;
            delete formdata["Jump_1"];
 
            var promises = ajax.call([{
                methodname: 'mod_lesson_add_page',
                args: formdata
            }]);
 
            $.when.apply($.when, promises).then(function(response) {
                if (response.warnings.length != "0") {
                    formobject.handleErrors(response.warnings);
                }
            });
save_edit_form: function(formobject) {
 
            // Perhaps this could all be included in a save method for the form.
            var formdata = formfactory.getFormData();
            formdata["lessonid"] = lesson.id;
            formdata["pageid"] = this.id;
            delete formdata["Jump_1"];
 
            var promises = ajax.call([{
                methodname: 'mod_lesson_add_page',
                args: formdata
            }]);
 
            $.when.apply($.when, promises).then(function(response) {
                if (response.warnings.length != "0") {
                    formfactory.handleErrors(response.warnings, formobject);
                }
            });
Form data compilation for display
Type A Type B
var frm = new form();
            frm.addFieldset('general', 'General');
            textfield = new text();
            textfield.set_name('title');
            textfield.set_id('mod_lesson_title_' + pageid);
            textfield.set_label('Page Title');
            textfield.set_required();
            textfield.set_text(lesson.pages[pageid].title);
            frm.addElement(textfield);
            selectfield = new selectElement();
            selectfield.set_name('Jump_1');
            selectfield.set_label('Jumps');
            selectfield.set_id("mod_lesson_jump_1_" + pageid);
            selectfield.set_options(joptions);
            frm.addElement(selectfield);
            $.when(frm.printForm()).then(function(tempformstuff) {
                $('.mod_lesson_pages').append(tempformstuff); 
                $('#mod_lesson_editor_save_btn').click(function() {
                    // Could do client side validation here.
                    if ($("#mod_lesson_title_" + pageid).val() == "") {
                        var textelement = $("#fitem_mod_lesson_title_" + pageid);
                        frm.handleError('title', textelement, 'text', 'Title should not be empty');
                    } else {
                        lesson.pages[pageid].save_edit_form(frm);
                    }
                });
                $('#mod_lesson_editor_cancel_btn').click(function() {
                    $('.mod_lesson_page_editor').remove();
                });
            });
var formdata = {
                lessonpagetype: lesson.pages[pageid].qtypestring,
                pageid: pageid,
                title: {
                    id: "mod_lesson_title_" + pageid,
                    label: "Page Title",
                    name: "title",
                    text: lesson.pages[pageid].title,
                    required: 1
                },
                contents: lesson.pages[pageid].contents,
                select: {
                    id: pageid,
                    label: "Jumps",
                    name: "Jump_1",
                    options: formfactory.formatOptions(joptions),
                    helpButton: "<button type=\"button\">Help is here</button>"
 
                }
            };
            $.when(templates.render('mod_lesson/page_editor', formdata)).done(function(pageeditor) {
                $('.mod_lesson_pages').append(pageeditor); 
                $('#mod_lesson_editor_save_btn').click(function() {
                    // Do client side validation.
                    var titleelement = $("#mod_lesson_title_" + pageid);
                    if (titleelement.val() == "") {
                        var errors = {
                            errors: {
                                name: "title",
                                message: "The lesson page title should not be empty"
                            }
                        };
                        formfactory.handleErrors(errors, formdata);
                    } else {
                        lesson.pages[pageid].save_edit_form(formdata);
                    }
                });
                $('#mod_lesson_editor_cancel_btn').click(function() {
                    $('.mod_lesson_page_editor').remove();
                });
            });

Template for a select element

Same for both.

<div id="fitem_{{id}}" class="fitem fitem_select {{#required}}required{{/required}} {{#advanced}}advanced{{/advanced}}" data-field-type="select">
    <div class="fitemtitle">
        <label {{#hiddenLabel}}class="accesshide"{{/hiddenLabel}} for="{{id}}">
            {{label}}
            {{#required}}{{>core/form-required}}{{/required}}
            {{#advanced}}{{>core/form-advanced}}{{/advanced}}
        </label>
        {{{helpButton}}}
    </div>
    <div class="felement fselect {{#error}}error{{/error}}">
        {{#error}}
        <span class="error" tabindex="0">{{{error}}}</span>
        <br/>
        {{/error}}
        <select name="{{name}}" id="{{id}}" {{#required}}required{{/required}} {{#size}}size="{{size}}"{{/size}}>
            {{#options}}
                <option value="{{value}}" {{#selected}}selected{{/selected}}>{{text}}</option>
            {{/options}}
        </select>
    </div>
</div>
Form template
Type A Type B
{{!
    @template mod_lesson/page_editor
 
}}
 
<div class="mod_lesson_page_editor">
<form action="">
<h3>Edit this {{lessonpagetype}} </h3>
    {{#title}}
        {{>core/form-element-text}}
    {{/title}}
    <div>Page Content</div>
    {{#select}}    
        {{>core/form-element-select}}
    {{/select}}    
    <div>
        <button type="button" id="mod_lesson_editor_save_btn">Save</button>
        <button type="button" id="mod_lesson_editor_cancel_btn">Cancel</button>
    </div>
</form>
</div>
Library
Type A Type B
define(['jquery', 'core/templates'], function($, templates) {
 
    var Form = function() {
        this._fieldsets = {};
        this.elements = {};
        this.formPage = '';
 
    };
 
    // These two methods would actually be using classes for the form.
    Form.prototype.add_top = function() {
        this.formPage += '<div class="mod_lesson_page_editor"><form action="">';
    };
 
    Form.prototype.add_bottom = function() {
        this.formPage += '<div><button type="button" id="mod_lesson_editor_save_btn">Save</button>';
        this.formPage += '<button type="button" id="mod_lesson_editor_cancel_btn">Cancel</button></div></form></div>';
    };
 
 
 
    Form.prototype.addFieldset = function(key, title) {
        this._fieldsets[key] = title;
    };
 
    Form.prototype.handleError = function(errorname, errorelement, elementtype, errormessage) {
        var index = elementtype + "-" + errorname;
        this.elements[index].set_error(errormessage);
        var htmlpromise = templates.render(this.elements[index].template, this.elements[index]);
        $.when(htmlpromise).then(function(newhtml) {
            templates.replaceNode(errorelement, newhtml);
        });
    }
 
    Form.prototype.handleErrors = function(errors) {
 
        // Need to loop through all potential errors.
 
        var errorname = errors.errors.name;
        var errorelementid = $(":input[name=" + errorname + "]").attr("id");
        // console.log(errorelementid);
        var errorelement = $("#fitem_" + errorelementid);
        // console.log(errorelement);
        // Get the form element type.
        var elementtype = errorelement.attr("data-field-type");
        Form.prototype.handleError.call(this, errorname, errorelement, elementtype, errors.errors.message);
    }
 
 
    Form.prototype.addElement = function(element) {
        var index = element.type + "-" + element.name;
        this.elements[index] = element;
    };
 
    Form.prototype.showElements = function() {
        console.log(this.elements);
    };
 
    Form.prototype.printForm = function() {
 
        var allpromises = [];
        for (index in this.elements) {
            allpromises.push(this.elements[index].show());
        }
 
        return $.when.apply($.when, allpromises).then(function() {
            Form.prototype.add_top.call(this);
            var schema = arguments;
            for (index in schema) {
                this.formPage += schema[index][0];
            }
            Form.prototype.add_bottom.call(this);
            return this.formPage;
        }, function() {
           return 'default html'; 
        });
    }
 
    return Form;
 
});
define(['jquery', 'core/templates'], function($, templates) {
 
    var formData;
 
    return {
 
        handleErrors: function(errors, formdata) {
            // name attribute of the error.
            var errorname = errors.errors.name;
            var templatedata;
            for (index in formdata) {
                if (typeof formdata[index] == "object") {
                    if (formdata[index].name == errorname) {
                        formdata[index].error = errors.errors.message;
                        templatedata = formdata[index];
                    }
                }
            }
            // for (index in errors.errors) {
 
            //     console.log(errors.errors["name"]);
            // }
 
            // Need to loop through all potential errors.
 
            var errorelementid = $(":input[name=" + errorname + "]").attr("id");
            // console.log(errorelementid);
            var errorelement = $("#fitem_" + errorelementid);
            // console.log(errorelement);
            // Get the form element type.
            var elementtype = errorelement.attr("data-field-type");
            // console.log(elementtype);
            var template = 'core/form-element-' + elementtype;
            var templatepromise = templates.render(template, templatedata);
            $.when(templatepromise).then(function(newhtml) {
                templates.replaceNode(errorelement, newhtml);
            });
        },
 
        getFormData: function() {
            formData = $('form').serializeArray();
            var tempstorage = {};
            for (index in formData) {
                var name = formData[index].name;
                if (name !== 'query') {
                    tempstorage[name] = formData[index].value;
                }
            }
            return tempstorage;
        },
 
        /**
         * Format a normal array into an object for a select form element.
         *
         * @param {array} options An array of options.
         * @param {string} selected The selected option. Needs to match the array index.
         * @return {object} An options object that can be used with a select form element.
         */
        formatOptions: function(options, selected) {
            var returnoptions = [];
            var select = 0;
            if (selected !== 'undefined') {
                select = selected
            }
            for (index in options) {
                if (index == selected) {
                    returnoptions.push({
                        value: index,
                        text: options[index],
                        selected: select
                    });
                } else {
                    returnoptions.push({
                        value: index,
                        text: options[index],
                    });
                }
            }
            return returnoptions;
        }
    };
});