Question

enter image description here

Html代码：用于添加新按钮

<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>

模态对话框框架：

    <!-- 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调用验证：

$("#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);   
                 } 
                });
        }
    });

我想最小化我的代码，因为我在项目中添加了很多新选项

所以，请任何人建议我如何只为模态对话框编写单个代码，并将一个jquery ajax调用写为更通用的

Answer 1

通过对html进行一些更改..你可以进行通用jquery执行

将课程设置为表格标记＆＃39;验证＆＃39;
将部门状态标记更改为<div id="department_status" class="status"> </div>

您需要对<form:input required="true" path="departmentname" class="form-control alphanumericsd" />

等html标记进行验证

$（＆＃39; form.validate＆＃39）。每一（功能（）{ $（本）.validate（{ submitHandler：function（form）{ strval =＆＃39;＆＃39; $（＆＃39;输入[类型=文本]＆＃39）。每一（功能（）{ if（strval ==＆＃39;＆＃39;） strval = $（this）.attr（＆＃39; name＆＃39;）+＆＃34; =＆＃34; + $（this）.val（）; 其他 strval =＆＃39;，＆＃39; + $（this）.attr（＆＃39; name＆＃39;）+＆＃34; =＆＃34; + $（this）.val（）; }）

                            $.ajax({
                                url : $(this).attr("action"),
                                type : "POST",
                                data :strval,

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

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

            })

基于按钮单击模式对话框和jquery ajax调用

1 个答案: