form UpdateJob

by Dave Mednick

HTML

<div class="colsize_8">
    <div id="togglers"><span data-section="jobnotes" class="tog_off">Notes</span><span data-section="milestones" class="tog_off">Milestones</span><span data-section="jobattach" class="tog_off">Attachments</span><span data-section="quality" class="tog_off">Quality</span><span data-section="waivers" class="tog_off">Waivers</span><span data-section="mls" class="tog_off">MLs</span><span data-section="rmas" class="tog_off">RMAs</span><span data-section="pickup" class="tog_off">Pickup</span><span data-section="revisions" class="tog_off">Revisions</span><span data-section="rejections" class="tog_off">Rejections</span><span data-section="otheractions" class="tog_off">Other Actions</span>

    </div>
    <form id="job_edit">
        <fieldset id="general" class="jobData">	<span id="editlink" style="">EDIT</span>

            <legend>General / Personnel</legend>
            <div class="colsize_4 leftcol">
                <div class="colsize_2 leftcol r red">Job :</div>
                <div class="colsize_2 rightcol red" id="job_number"></div>
                <input type="hidden" id="job_id" value="" />
                <br class="clear" />
                <div class="colsize_2 leftcol r black">Market :</div>
                <div class="colsize_2 rightcol" name="market" id="market"></div>
                <br class="clear" />
                <div class="colsize_2 leftcol r black">Status :</div>
                <div class="colsize_2 rightcol" id="statusCode"></div>
                <br class="clear" />
                <div class="colsize_2 leftcol r black">Revision :</div>
                <div class="colsize_2 rightcol" id="revision"></div>
                <br class="clear" />
                <div class="colsize_2 leftcol r black">Technology :</div>
                <div class="colsize_2 rightcol" id="technology"></div>
                <br class="clear" />
                <div class="colsize_2 leftcol r black">Project Number :</div>
                <div...

CSS

#togglers span {
    display:block;
    font-family:Helvetica;
    font-size:8px;
    float:left;
    padding:2px 4px 2px 4px;
    border-radius:4px;
    cursor:pointer;
}
.tog_off {
    color:black;
    border:1px solid #000000;
    background-color:white;
}
.tog_on {
    color:white;
    border:1px solid #808080;
    background-color:black;
}
.tog_edit {
    color:red;
    border:1px solid red;
    background-color:white;
}
#togglers {
    clear:both;
}
#special_dialog {
    border-width: 0px;
    border-color: transparent;
    font-size: 9px !important;
}
fieldset {
    border:none;
    clear:left;
}
#editlink {
    position:absolute;
    top:40px;
    right:15px;
    color:red;
    font-weight:bold;
    font-size:9px;
}
#editlink:hover {
    color:white;
    background:red;
    cursor:pointer;
}
#general {
    background-color: #D3D3D3;
}
#jobnotes {
    border-top: 1px solid #2F4F4F;
    background-color: #F5F5F5;
}
#edit_notes {
    border-top: 1px solid red;
    background-color: #F08080;
}
#milestones {
    border-top: 1px solid #2F4F4F;
    background-color: #DCDCDC;
}
#edit_milestones {
    border-top: 1px solid red;
    background-color: #F08080;
}
#jobattach {
    border-top: 1px solid #2F4F4F;
    background-color: #A9A9A9;
}
#quality {
    border-top: 1px solid #2F4F4F;
    background-color: #808080;
}
#edit_quality {
    border-top: 1px solid red;
    background-color: #F08080;
}
#waivers {
    border-top: 1px solid #2F4F4F;
    background-color: #B0E0E6;
}
#edit_waivers {
    border-top: 1px solid red;
    background-color: #F08080;
}
#mls {
    border-top: 1px solid #2F4F4F;
    background-color: #B0C4DE;
}
#rmas {
    border-top: 1px solid #2F4F4F;
    background-color: #C0C0C0;
}
#edit_rmas {
    border-top: 1px solid red;
    background-color: #F08080;
}
#revisions {
    border-top: 1px solid #2F4F4F;
    background-color: #B0C4DE;
}
#rejections {
    border-top: 1px solid #2F4F4F;
    background-color: #B0C4DE;
}
#pickup {
    border-top: 1px...

JavaScript

function getCLLIdata(clliID) {
    $.getJSON('json/json.findCLLIdata.php', {
        clli_id: clliID
    }, function (objCLLI) {
        $('#clli').val(objCLLI.id);
        $('#address_1').text(objCLLI.address_1);
        $('#address_2').text(objCLLI.address_2);
        $('#county').text(objCLLI.county);
        $('#city').text(objCLLI.city);
        $('#state').text(objCLLI.state);
        $('#zip').text(objCLLI.zip);
        $('#region').val(objCLLI.region);
        $('#warehouse').val(objCLLI.warehouse);
        $('#facility').val(objCLLI.facility);
    });
}

function getWHdata() {
    $.getJSON('json/json.findWHdata.php', {
        wh_id: warehouseID
    }, function (objWH) {
        $('#warehouse').text(objWH.name);
        $('#wh_address_1').text(objWH.address_1);
        $('#wh_address_2').text(objWH.address_2);
        $('#wh_city').text(objWH.city);
        $('#wh_state').text(objWH.state);
        $('#wh_zip').text(objWH.zip);
    });
}

function getIFdata() {
    $.getJSON('json/json.findIFdata.php', {
        fac_id: facilityID
    }, function (objFAC) {
        $('#facility').text(objFAC.name);
        $('#if_address_1').text(objFAC.address_1);
        $('#if_address_2').text(objFAC.address_2);
        $('#if_city').text(objFAC.city);
        $('#if_state').text(objFAC.state);
        $('#if_zip').text(objFAC.zip);
    });
}

function getMLdata(jobID) {
    $.getJSON('json/json.getMLDetails.php', {
        job_id: jobID
    }, function (mlData) {
        var mlCount = mlData.ml.length;
        $('#mlTable > tbody').empty();
        $.each(mlData.ml, function (k, v) {
            var mlRow = '<tr><td>' + v.mlname + '</td><td>' + v.mlengineer + '</td><td>' + v.mlbuyer + '</td><td>' + v.mlcom + '</td><td>' + v.mlreason + '</td></tr>';
            $('#mlTable > tbody').append(mlRow);
        });
        $('#mlfurnish').text(mlData.furnish);
        $('#mlcom').text(mlData.com);
        $('#mlmargin').text(mlData.margin);
       ...