UD Coa widget

If you're reading this, probably not useful to you except as an advanced state widget example.

by donabrams

HTML

<script src="http://ajax.microsoft.com/ajax/jquery.templates/beta1/jquery.tmpl.min.js"></script>
<script src="https://github.com/donabrams/jQuery-State-Widget/raw/master/jquery.stateWidget.js"></script>
<script src="https://github.com/jzaefferer/jquery-validation/raw/master/jquery.validate.min.js"></script>
<script src="https://github.com/donabrams/jQuery-Form---Object-Transforms/raw/master/jquery.formObjTransforms.js"></script>
<script src="https://github.com/donabrams/chart-of-accounts/raw/master/jquery.udel.coa.js"></script>
<script src="https://github.com/donabrams/chart-of-accounts/raw/master/jquery.udel.lookup.js"></script>
<div id="content">original</div>
<div id="content2">original2</div>
<div id="content3">
    <input type="text" name="coa1" value="1" />
</div>


<div id="templates" style="display:none;">
    <div id="loading.html">
        <div id="whatever">loading...</div>
    </div>
    <div id="error.html">
        <div id="whatever">There was a grevious error</div>
    </div>
    <div id="saving.html">
        <div id="blah">Saving...</div>
    </div>
    <div id="new.html">
        <div class="coa">
            <form name="${formName}">
                <div class="chartFields">
                    <div id="messages">
                        {{if messages && messages.length > 0}}
                        <ul class="messages">
                            {{each messages}}
                            <li>${$value}</li>
                            {{/each}}
                        </ul>
                        {{/if}}
                    </div>
                    <div id="errors">
                        {{if errors && errors.length > 0}}
                        <ul class="errors">
                            {{each errors}}
                            <li>${$value}</li>
                            {{/each}}
                        </ul>
                        {{/if}}
                    </div>
                    <label for="speedtype"...

CSS

.coa a {
    outline:none;
}
.coa * {
    margin: 0;
    padding: 0;
}
.coa {
    width: 400; (function() {
    var testEnvironment = {
        templates: {
            "loading": {
                templateString: $("#loading\\.html").html()
            },
            "saving": {
                templateString: $("#saving\\.html").html()
            },
            "error": {
                templateString: $("#error\\.html").html()
            },
            "new": {
                templateString: $("#new\\.html").html()
            },
            "edit": {
                templateString: $("#edit\\.html").html()
            },
            "view": {
                templateString: $("#view\\.html").html()
            }
        },
        stores: {
            //speedtype: "speedtypeStore.action",
            speedtype: {
                fetch: function(callback, data) {
                    callback({
                        result: "SUCCESS",
                        object: {
                            coa: {
                                speedtype: "ITMS11000",
                                setid: "UOD01",
                                account: "120200",
                                purpose: "ITMS11000",
                                source: null,
                                project_id: null,
                                class_field: null,
                                program_code: null,
                                fund_code: "OPBAS",
                                deptid: "02110",
                                budget_ref: null
                            }
                        }
                    });
                }
            },
            //get: "getChartfield.action",
            get: {
                fetch: function(callback, data) {
                    if (data.id) {
                        callback({
                            result: "SUCCESS",
                            object: {
                               ...

JavaScript

$(function() {
    var testEnvironment = {
        templates: {
            "loading": {
                templateString: $("#loading\\.html").html()
            },
            "saving": {
                templateString: $("#saving\\.html").html()
            },
            "error": {
                templateString: $("#error\\.html").html()
            },
            "new": {
                templateString: $("#new\\.html").html()
            },
            "edit": {
                templateString: $("#edit\\.html").html()
            },
            "view": {
                templateString: $("#view\\.html").html()
            }
        },
        stores: {
            //speedtype: "speedtypeStore.action",
            speedtype: {
                fetch: function(callback, data) {
                    callback({
                        result: "SUCCESS",
                        object: {
                            coa: {
                                speedtype: "ITMS11000",
                                setid: "UOD01",
                                account: "120200",
                                purpose: "ITMS11000",
                                source: null,
                                project_id: null,
                                class_field: null,
                                program_code: null,
                                fund_code: "OPBAS",
                                deptid: "02110",
                                budget_ref: null
                            }
                        }
                    });
                }
            },
            //get: "getChartfield.action",
            get: {
                fetch: function(callback, data) {
                    if (data.id) {
                        callback({
                            result: "SUCCESS",
                            object: {
                                coa: {
                                    id: data.id,
                                   ...