Question

我正在尝试在我的javascript中创建ajax的通用方法，并且bootstrap模式未按预期工作。

HTML：

<div class="modal fade" id="consult_modal_v2" role="dialog">
    <div class="modal-dialog">
        <div class="modal-content">
            <div style="background-color: #dc3d3e;color: #fff;height:85px !important;;" class="modal-header">
                <div>
                    <div class="row">
                        <div class="col-md-11">
                            <h4 id="message_v2" style="text-align:center;margin-top: 10px;"></h4>
                        </div>
                    </div>
                </div>
                <button id="con_close1_v2" type="button" class="close" data-dismiss="modal" aria-hidden="true">&times</button>
            </div>
            <div class="container"></div>
            <div class="modal-body">

                <div class="col-md-12" style="margin-top:3%;margin-bottom:2%;">

                    <div class="col-md-3" id="con_uname_v2" style="margin-top:11px">Admin Username</div>
                    <div class="col-md-9"><input type="text" id="con_sect_name_v2" class="form-control"></div>
                    <div class="col-md-3" id="con_pass_v2" style="margin-top:11px">Admin Password</div>
                    <div class="col-md-9"><input type="password" id="con_sect_pass_v2" class="form-control"></div>

                </div>

            </div>
            <div style="border:none;" class="modal-footer" >
                <button class="btn btn-default" id="con_close_v2" style="margin-top:3%;">Cancel</button>
                <button class="btn btn-default" id="con_sect_ok_v2" style="margin-right:2%;margin-top:3%;">Override</button>
                <button class="btn btn-default" id="con_upd_sect_ok_v2" style="display:none;margin-right:2%;margin-top:3%;">Override</button>

            </div>
        </div>
    </div>
</div>

JavaScript的：

执行

generalised_ajax('post_url',
    {
        'sub_id': sub_id,
        'status': status,
        '_token': csrf_token
    }, "POST", function () {
        console.log('success placing apt');
    }, {},
    function () {
        console.log('apt cancelled');
    }, {});

function generalised_ajax(url, data, type, post_success, post_success_params, post_cancel, post_cancel_params) {
    $.ajax({
        url: url,
        data: data,
        type: type,
        headers: {Accept: "application/json"},
        dataType: 'json',
        success: function (result, status, xhr) {
            post_success(post_success_params);
        },
        error: function (xhr, ajaxOptions, thrownError) {
            if (xhr.responseJSON.type === "confirmation") {
                responseProcess = xhr.responseJSON;
                generalised_confirm(responseProcess.message, {
                    url: url,
                    data: data,
                    type: type,
                    post_success: post_success,
                    post_success_params: post_success_params,
                    post_cancel: post_cancel,
                    post_cancel_params: post_cancel_params
                }, responseProcess.config_name);
            } else if(xhr.responseJSON.type === "admin_auth"){
                generalised_authentication(responseProcess.message, {
                    url: url,
                    data: data,
                    type: type,
                    post_success: post_success,
                    post_success_params: post_success_params,
                    post_cancel: post_cancel,
                    post_cancel_params: post_cancel_params
                });
            }
        }
    });
}

function generalised_confirm(message, data, config_name) {
    var r = confirm(message);
    if (r === true) {
        data.data[config_name] = true;
        generalised_ajax(data.url, data.data, data.type, data.post_success, data.post_success_params, data.post_cancel, data.post_cancel_params);
    } else {
        data.post_cancel(data.post_cancel_params);
    }
}

var modelX = $("#consult_modal_v2");
function generalised_authentication(message, data){
    var uname = $("#con_sect_name_v2");
    var pass = $("#con_sect_pass_v2");
    $("#message_v2").val(message);
    modelX.modal('toggle');
    $("#con_sect_ok_v2").click(function(event){
        modelX.modal('toggle');
        data.data['a_uname'] = uname.val();
        data.data['a_pswd'] = pass.val();
        uname.val('');
        pass.val('');
        generalised_ajax(data.url, data.data, data.type, data.post_success, data.post_success_params, data.post_cancel, data.post_cancel_params);
    });
    $("#con_close_v2").click(function(event){
        modelX.modal('toggle');
        data.post_cancel(data.post_cancel_params);
    });
}

预期情景：

发送了ajax
服务器响应admin_auth错误
打开模态
输入admin creds（错误的）
关闭模式
发送了ajax
服务器响应admin_auth错误
从第3阶段开始重复

它现在如何运作

发送了ajax
服务器响应admin_auth错误
打开模态
输入admin creds（错误的）
关闭模式
发送了ajax

现在服务器使用与第2点相同的ajax响应。但是模态不会再次打开。它与javascripts确认弹出窗口一起工作正常。

更新

我从模态中删除了淡化类后，它每次都开始出现。但现在它发送了之前尝试的两倍的ajax。喜欢第一次，第二次两次，第三次4次，第4次8次等等。

Answer 1

我不知道这种行为的原因是什么改变

$("#con_sect_ok_v2").click(function(event){
        modelX.modal('toggle');
        data.data['a_uname'] = uname.val();
        data.data['a_pswd'] = pass.val();
        uname.val('');
        pass.val('');
        generalised_ajax(data.url, data.data, data.type, data.post_success, data.post_success_params, data.post_cancel, data.post_cancel_params);
    });

到

$("#con_sect_ok_v2").one('click',function(event){
        modelX.modal('toggle');
        data.data['a_uname'] = uname.val();
        data.data['a_pswd'] = pass.val();
        uname.val('');
        pass.val('');
        generalised_ajax(data.url, data.data, data.type, data.post_success, data.post_success_params, data.post_cancel, data.post_cancel_params);
    });

解决了它。

积分https://stackoverflow.com/a/3393694/2598994

Bootstrap模式不适用于循环场景

1 个答案: