1
\$\begingroup\$

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. Please suggest ways to write only single code for modal dialog and one jQuery AJAX call as more general.

\$\endgroup\$

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Browse other questions tagged or ask your own question.