JSFiddle - React, Tailwind, and code Playground

by nickolsky

HTML

<script src="http://nickolsky.dyndns.org/pub/jquery-ui-1.8.17.js"></script>
<script src="http://nickolsky.dyndns.org/pub/knockout-2.2.1.js"></script>
<script src="http://nickolsky.dyndns.org/pub/knockout-jqueryui.js"></script>
<script src="http://nickolsky.dyndns.org/pub/knockout.mapping-latest.js"></script>
<script src="http://nickolsky.dyndns.org/pub/availablePartners.js"></script>
<script src="http://nickolsky.dyndns.org/pub/ib.knockout.bindings.js"></script>
<div class="doc-post-form green">
    <div style="font-family:Tahoma; font-size:36px; color: green" class="doc-post-form"><span>Warehouse Order</span>
    </div>
</div>
<div data-bind="with: Transactions.Transaction" style=' font-family:Tahoma; font-size:12px;'>
    <table>
        <tr>
            <td style='vertical-align: top; padding-right: 20px'>
                <div data-bind='foreach: { data: PurchaseOrder.Header.Entities.Entity }'>
                    <div style='border-color: #99ba12;
border-style: solid; width: 300px;
border-width: 2px; margin: 15px 0 15px 0;
padding: 5px;'> <strong> <span style='font-size: 15px' data-bind='text: $data["@description"]'>&nbsp;</span></strong> 
                        <table style='border-spacing:2px; border-collapse: separate;'>
                            <tr>
                                <td class='top nowrap'><strong>Name:</strong>

                                </td>
                                <td class='top nowrap'>
                                    <input class='required' data-bind='value: $data.Names.Name, uniqueName: true' style='display: block;'>&nbsp;</input>
                                </td>
                            </tr>
                            <tr>
                                <td class='top nowrap'><strong>Street 1:</strong> 
                                </td>
                                <td class='top nowrap'>
                                    <input class='required' data-bind='value:...

JavaScript

window.countries = ko.observableArray();
window.itemCodes = ko.observableArray();

ko.bindingHandlers.product = {
    init: function (element, valueAccessor, allBindingsAccessor, viewModel) {
        var value = valueAccessor();

        $(element).change(function () {
            value($("option:selected", this).val().replace(' (precision SKU)', ''));
        });
    },
    update: function (element, valueAccessor) {
    }
};

var isPrecision = window.availablePartners.Senders.length > 0 && window.availablePartners.Senders[0].CustomerName.indexOf('Precision') > -1;

if (isPrecision) {
    window.warehouses = window.availablePartners.Receivers;
} else {
    window.warehouses = window.availablePartners.Senders;
}


$.ajax({
    url: 'http://primary.infoborders.com/service/countries',
    type: 'GET',
    async: false,
    success: function (data) {
        window.countries(data);
    }
});

var newPOID = '';
var blankLine = {
    '@line-number': '',
    Product: {
        ProductIdentification: [{
            '@code': 'SKU',
                '@description': 'Stock-Keeping Unit',
                '#text': ''
        }, {
            '@code': 'OWC',
                '@description': 'Original code',
                '#text': ''
        }]
    },
    Quantities: {
        OrderQty: {
            '@uom': 'UNT',
                '@uom_description': 'Units',
                '#text': ''
        }
    },
    Price: {
        UnitPrice: {
            '@uom': 'UNT',
                '@uom_description': 'Units',
                '#text': ''
        }
    },
    Description: {
        DescriptionLine: ''
    }

};


var vm = {
    Transactions: {
        Transaction: {
            '@type': 'TSI_ORDER',
            SenderEDIID: {
                '@ISA_ID': '',
                    '@ISA_QUALIFIER': '',
                    '@GS_ID': '',
            },
            ReceiverEDIID: {
                '@ISA_ID': 'PRECISION',
                    '@ISA_QUALIFIER': 'ZZ',
                   ...