Show Dropdown New Value After Submit

[NomadicJosh]

I have a dropdown list of departments being pulled from the database. On the same page, you can click a button, a modal form appears and you can add another department if the department you want doesn't exist. After the form is submitted, I need the new value appended to the dropdown list for use. I am not fluent in jquery and ajax at all, so I need help figuring out what is wrong with my code. Below I am pasting each element separately along with the json output as well as the error message.

 

Javascript:

<script type="text/javascript">
$(function() {
    $("#btn_dept").click(function(e) {
        e.preventDefault();
        var deptCode = $("#newDeptCode").val();
        var deptTypeCode = $("#deptType").val();
        var deptName = $("#deptName").val();
        var deptEmail = $("#deptEmail").val();
        var deptPhone = $("#deptPhone").val();
        var deptDesc = $("#deptDesc").val();
        var dataString = 'deptCode='+deptCode+'&deptTypeCode='+deptTypeCode+'&deptName='+deptName+
        '&deptEmail='+deptEmail+'&deptPhone='+deptPhone+'&deptDesc='+deptDesc; 
        if(deptCode == '')
        {   
            $('.success').fadeOut(200).hide();
            $('.error').fadeIn(200).show();
        }
        if(deptTypeCode == '')
        {   
            $('.success').fadeOut(200).hide();
            $('.error').fadeIn(200).show();
        }
        if(deptName == '')
        {   
            $('.success').fadeOut(200).hide();
            $('.error').fadeIn(200).show();
        }
        else
        {
            $.ajax({
                type: "POST",               
                url: "<?=url('/crse/dept/');?>",
                data: dataString,
                success: function() {
                    $('#form').fadeOut(200).hide();
                    $('.success').fadeIn(200).show();
                    $('.error').fadeOut(200).hide();
                    $("#deptForm")[0].reset();
                    $('#deptCode').append($('<option>', {
                        value: data.deptCode,
                        text: deptCode+' '+deptName
                    }));
                }
            });
        }
        return false;
    });
});
</script>

Modal Form:

<div class="modal fade" id="dept">
    <form class="form-horizontal margin-none" id="deptForm" autocomplete="off">
    <div class="dialog-form modal-dialog">
        <div class="modal-content">
            <!-- Modal heading -->
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                <h3 class="modal-title"><?=_t( 'Department' );?></h3>
            </div>
            <!-- // Modal heading END -->
            <div class="modal-body">
                
                <div class="error"><?=_t( 'You must fill out the required fields.' );?></div>
                <div class="success"><?=_t( 'The Department was created successfully.' );?></div>
                    
                <!-- Group -->
                <div class="form-group">
                    <label class="col-md-3 control-label"><font color="red">*</font> <?=_t( 'Department Code' );?></label>
                    <div class="col-md-8">
                        <input class="form-control" id="newDeptCode" type="text" name="deptCode" required/>
                    </div>
                </div>
                <!-- // Group END -->
                
                <!-- Group -->
                <div class="form-group">
                    <label class="col-md-3 control-label"><font color="red">*</font> <?=_t( 'Department Type' );?></label>
                    <div class="col-md-8">
                        <?=dept_type_select();?>
                    </div>
                </div>
                <!-- // Group END -->
                
                <!-- Group -->
                <div class="form-group">
                    <label class="col-md-3 control-label"><font color="red">*</font> <?=_t( 'Department Name' );?></label>
                    <div class="col-md-8">
                        <input class="form-control" id="deptName" type="text" name="deptName" required/>
                    </div>
                </div>
                <!-- // Group END -->
            
                <!-- Group -->
                <div class="form-group">
                    <label class="col-md-3 control-label"><?=_t( 'Department Email' );?></label>
                    <div class="col-md-8">
                        <input class="form-control" id="deptEmail" type="text" name="deptEmail" />
                    </div>
                </div>
                <!-- // Group END -->
                
                <!-- Group -->
                <div class="form-group">
                    <label class="col-md-3 control-label"><?=_t( 'Department Phone' );?></label>
                    <div class="col-md-8">
                        <input class="form-control" id="deptPhone" type="text" name="deptPhone" />
                    </div>
                </div>
                <!-- // Group END -->
                
                <!-- Group -->
                <div class="form-group">
                    <label class="col-md-3 control-label"><?=_t( 'Short Description' );?></label>
                    <div class="col-md-8">
                        <input class="form-control" id="deptDesc" type="text" name="deptDesc" />
                    </div>
                </div>
                <!-- // Group END -->
            </div>
            <div class="modal-footer">
                <button type="submit" id="btn_dept" class="btn btn-icon btn-default"><i></i><?=_t( 'Add' );?></button>
                <button type="button" data-dismiss="modal" class="btn btn-icon btn-primary"><i></i><?=_t( 'Cancel' );?></button>
            </div>
        </div>
    </div>
    </form>
</div>

Dropdown list of departments:

<div class="form-group">
    <label class="col-md-3 control-label"><font color="red">*</font> <?=_t( 'Department' );?></label>
    <div class="col-md-8">
        <select name="deptCode" id="deptCode" class="selectpicker form-control" data-style="btn-info" data-size="10" data-live-search="true" required>
            <option value=""> </option>
            <?php table_dropdown('department', 'deptTypeCode = "acad" AND deptCode <> "NULL"', 'deptCode', 'deptCode', 'deptName'); ?>
        </select>
    </div>
    <a<?=ae('access_forms');?> href="#dept" data-toggle="modal" title="Department" class="btn btn-primary"><i class="fa fa-plus"></i></a>
</div>

Database Query:

        $dept = $app->db->department();
        foreach($_POST as $k => $v) {
            $dept->$k = $v;
        }
        $dept->save();
        $ID = $dept->lastInsertId();

        $department = $app->db->department()
            ->where('deptID = ?', $ID);
        $q = $department->find(function($data) {
            $array = [];
            foreach ($data as $d) {
                $array[] = $d;
            }
            return $array;
        });
        echo json_encode($q);

JSON output:

{"deptID":"40","deptTypeCode":"ACAD","deptCode":"HIST","deptName":"History","deptEmail":"","deptPhone":"","deptDesc":"","LastUpdate":"2015-07-30 09:33:00"}

Error message output in Chrome:

Uncaught ReferenceError: data is not defined

Any help with figuring this out is greatly appreciated.

[NomadicJosh]

Figured it out. I was missing the data source:

success: function(data) {}