Take the 2-minute tour ×
Code Review Stack Exchange is a question and answer site for peer programmer code reviews. It's 100% free, no registration required.

enter image description here

HTML Code: for Add New button

<div>
  <a data-toggle="modal" href="#addnewDepartment" id="add-new-department-btn">Add New</a>
</div>

<div>
  <a data-toggle="modal" href="#addnewVehicle" id="add-new-vehicle-btn"> Add New </a>
</div>

Modal Dialog frames:

    <!-- Adding New Department -->

<div class="modal fade" id="addnewDepartment">
    <div class="modal-dialog">
        <div class="modal-content">
            <form:form id="add-new-department" action="add-new-department" method="POST" commandName="department">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button><h4 class="modal-title">Add New Department</h4>
            </div>
            <div class="modal-body">
                <div class="form-group">
                    <form:label path="departmentname" >Department</form:label>
                    <form:input required="true" path="departmentname" class="form-control" />
                </div>
        </div>
    </div>
        <p>&nbsp;</p>
        <div id="department_status">&nbsp;</div>
    <div class="modal-footer">
        <input data-bb-handler="confirm" type="submit" value="Add">
        <button type="button" class="btn btn-default">Close</button>
    </div>
    </form:form>
        </div><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
</div>



     <!-- Adding New Vehicle Type -->



            <div class="modal fade" id="addnewVehicle">
                <div class="modal-dialog">
                    <div class="modal-content">
                        <form:form id="add-new-typeofvehicle" action="add-new-typeofvehicle" method="POST"
                            commandName="vehicle">
                            <div class="modal-header">
                                <button type="button" class="close" data-dismiss="modal"
                                    aria-hidden="true">&times;</button>
                                <h4 class="modal-title">Add Vehicle Type</h4>
                            </div>
                            <div class="modal-body">
                                <div class="form-group">
                                    <form:label path="vehicletype" class="col-md-5 control-label">Vehicle Type</form:label>
                                    <div class="col-md-6">
                                        <form:input path="vehicletype" class="form-control" />
                                    </div>
                                </div>
                            </div>
                            <p>&nbsp;</p>
                            <div id="vehicle_status">&nbsp;</div>
                            <div class="modal-footer">
                                <input data-bb-handler="confirm" type="submit"
                                    class="btn btn-primary" value="Add">

                                <button type="button" class="btn btn-default"
                                    data-dismiss="modal">Close</button>
                            </div>
                        </form:form>
                    </div>
                    <!-- /.modal-content -->
                </div>
                <!-- /.modal-dialog -->
            </div>

jQuery AJAX call with validation:

$("#add-new-department").validate({

        // Specify the validation rules
        rules : {
            departmentname : {
                required : true,
                alphanumericsd : true
            },

        },

        submitHandler : function(form) {

                var departmentname = $('#departmentname').val();
                $.ajax({
                    url : $("#add-new-department").attr("action"),
                    type : "POST",
                    data : "departmentname="+departmentname,

                    success : function(response) {
                        if($.isEmptyObject(response)) { 
                            $('#department_status').html('Sorry! Duplicate Record!').css('color','red').show().fadeOut(5000);
                        }
                        else {
                            $('#department_status').html('New Dapartment Added Successfully').css('color','green').show().fadeOut(5000);
                            $('#departmentname').val('');
                            $('#department').append(new Option(response.departmentname,response.departmentid));
                        }

                    },  
                 error : function(e) {  
                  alert('Error: ' + e.responseText);   
                 } 
                });
        }
    });

    // Setup form validation on the #add-new-typeofvehicle element
    $("#add-new-typeofvehicle").validate({

        // Specify the validation rules
        rules : {
            vehicletype : {
                required : true,
                alphanumericsd : true
            },

        },

        submitHandler : function(form) {
            var vehicletype = $('#vehicletype').val();
                $.ajax({
                    url : $("#add-new-typeofvehicle").attr("action"),
                    type : "POST",
                    data : "vehicletype="+vehicletype,

                    success : function(response) {
                        if($.isEmptyObject(response)) { 
                            $('#vehicle_status').html('Sorry! Duplicate Record!').css('color','red').show().fadeOut(5000);
                        }
                        else {
                        $('#vehicle_status').html('New Vehicle Type Added Successfully').css('color','green').show().fadeOut(5000);
                        $('#vehicletype').val('');
                        $('#typeofvehicle').append(new Option(response.vehicletype,response.vehicleid));
                        }
                    },  
                 error : function(e) {  
                  alert('Error: ' + e);   
                 } 
                });
        }
    });

I want to minimize my code because I have so many add new options in my project.

So, please suggest ways to write only single code for modal dialog and one jQuery AJAX call as more general.

share|improve this question
add comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Browse other questions tagged or ask your own question.