jquery - Bootstrap - 模态对话框避免重复输入和加载时为空

Question

我有一个使用 bootstrap 3、数据表、js 和 php 的网络应用程序。

我面临两个问题：

a) 当我在模式上按下 SAVE 按钮时，加载代码有时需要更多的时间。这有一个结果，即用户再次按下 SAVE 按钮。结果是应用程序获得了重复的答案（数据库中的行）。

b) 当模态加载时，用户可以从前一个打开的行中看到 1 秒的数据。

我想解决这两个问题。

我正在发布模态和js的一部分。因为我的模式有 15 个输入/选择字段。

我的页面的html代码（.php）：

<div class="modal fade" id="update_appointment" tabindex="-4" role="dialog" aria-label="UpdateAppointmentModalLabel" aria-hidden="true" data-keyboard="false" data-backdrop="static">
    <div class="modal-dialog modal-customer" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                <h5 class="modal-title">View Appointment</h5>
            </div>
            <form method="POST" id="UpdateAppointmentForm" enctype="multipart/form-data">
                <div class="modal-body">
                    <div class="row" id="UpdateAppointmentFormdiv">
                        <div class="col-xs-12">
                            <div class="form-group row">
                                <label for="upd_app_date" class="col-xs-2 col-form-label">Date:</label>
                                <div class="col-xs-2 form-group">
                                    <input id="upd_app_date" name="app_date" type="text" class="form-control date"/>
                                </div>
                            </div>
                            <div class="form-group row">
                                <label for="upd_work_id" class="col-xs-2 col-form-label">Work:</label>
                                <div class="col-xs-5 form-group">
                                    <select id="upd_work_id" name="work_id" class="form-control">
                                        <option value="">Please Select</option>
                                    </select>
                                </div>
                            </div>
                            <div class="form-group row">
                                <label for="upd_app_price" class="col-xs-2 col-form-label">Price:</label>
                                <div class="col-xs-2 form-group">
                                    <input id="upd_app_price" name="app_price" type="text" class="form-control price" value=""/>
                                </div>
                            </div>
                            <div class="form-group row">
                                <label for="upd_app_paid_to" class="col-xs-2 col-form-label">Paid To:</label>
                                <div class="col-xs-3 form-group">
                                    <select id="upd_app_paid_to" name="app_paid_to" class="form-control">
                                        <option value="">Please Select</option>
                                        <option value="0">Bill</option>
                                        <option value="1">John</option>
                                    </select>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="row" id="UpdateAppointmentFormloader" style="display:none;">
                        <div class="col-xs-12 text-center">
                            <i class="fa fa-spinner fa-pulse fa-3x fa-fw"></i>
                            <span class="sr-only">Loading...</span>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                    <button type="submit" class="btn btn-primary">Save changes</button>
                </div>
            </form>
        </div>
    </div>
</div>

我的模态提交按钮的js代码：

$('#UpdateAppointmentForm').submit(function(event) {
    event.preventDefault(); //prevent default action 
    upd_app_date = $('#upd_app_date').val();
    if (isValidDate(upd_app_date) === false) {
        alert("Appointment date is not valid.");
        return false;
    }
    if ($('#upd_work_id').val() != "") {
        upd_work = $('#upd_work_id option:selected').html();
    } else {
        upd_work = "";
    }
    if ($('#upd_app_paid_to').val() != "") {
        upd_app_paid_to = $('#upd_app_paid_to option:selected').html();
    } else {
        upd_app_paid_to = "";
    }
    
    html  = '<td>' + $('#upd_app_date').val() + '</td>';
    html += '<td>' + upd_work + '</td>';
    html += '<td class="text-right">' + $('#upd_app_price').val() + '</td>';
    html += '<td class="text-center">' + upd_app_paid_to + '</td>'; 
    html += '<td class=" text-center">';
    html += '<button type="button" class="btn btn-primary btn-sm same_button_td" onclick="viewAppoitment(\'' + $('#upd_app_id').val() + '\')"><i class="fa fa-eye" aria-hidden="true"></i></button> <button type="button" class="btn btn-success btn-sm same_button_td" onclick="editAppoitment(\'' + $('#upd_app_id').val() + '\', $(this))"><i class="fa fa-pencil" aria-hidden="true"></i></button></td>';
    
    app_paid_to = $('#upd_app_paid_to').val();
    if (app_paid_to != "") {
        if (price_paid.length == 0) {
            alert("Price Paid cannot be blank.");
            return false;
        }
        if (payment_id == "") {
            alert("Select Payment");
            return false;
        }
        if (receipt_id == "") {
            alert("Select Receipt");
            return false;
        }
    }
    var form_data = $("#UpdateAppointmentForm").serialize(); //Encode form elements for submission
    $('#UpdateAppointmentFormdiv').hide();
    $('#UpdateAppointmentFormloader').show();
    $.ajax({
        url: "api/customer.php?action=UpdateAppointment",
        type: "POST",
        data: form_data,
        dataType: 'json',
        success: function(result) {
            if (result.success == true) {
                $ele.parent().parent().html(html);
                html = '<div class="alert alert-success alert-dismissible" role="alert">' + result.message + '<button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button></div>';
                $('#appalertmsg').html(html);
                $('#appalert').slideDown();
                $('#UpdateAppointmentForm')[0].reset();
                $('#UpdateAppointmentFormdiv').show();
                $('#UpdateAppointmentFormloader').hide();
                $('#update_appointment').modal('hide');
            } else {
                html = '<div class="alert alert-warning alert-dismissible" role="alert">' + result.message + '<button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button></div>';
                $('#appalertmsg').html(html);
                $('#appalert').slideDown();
                $('#UpdateAppointmentFormdiv').show();
                $('#UpdateAppointmentFormloader').hide();
            }
        }
    });
});

我的A问题的解决方案。如果我在event.preventDefault();这行之后加上：

    $('#UpdateAppointmentFormdiv').hide();
    $('#UpdateAppointmentFormloader').show();

它会解决我的问题吗？

我的B问题的解决方案。我尝试使用以下内容：

$('#update_appointment').on('hidden.bs.modal', function(){
    $('#upd_app_date').val('');
    $('#upd_work_id').val('');
    $('#upd_app_price').val('');
    $('#upd_app_paid_to').val('');
});

但没有成功。也许我的代码中有一个小的拼写错误。

标签： jquerytwitter-bootstraptwitter-bootstrap-3modal-dialogbootstrap-modal