表单输入选项卡在ajax请求后中断

时间:2017-01-13 22:59:31

标签: javascript jquery html ajax sweetalert

我有一个注册用户的表格,由一个AJAX请求处理 当AJAX请求完成后,SweetAlert会向用户显示发生了什么的更新,但是当我关闭它并在表单字段中单击后面时,键盘上的tab键不再执行任何操作。

添加了settimeout,因此我可以显示第一个swal显示的内容,因此我可以"模拟"缓慢的互联网连接。

<div class="box box-info">
    <div class="box-body">
        <form id="db-test">
            <div class="input-group">
                <span class="input-group-addon"><i class="fa fa-user"></i></span>
                <input type="text" id="user" class="form-control" placeholder="Username" autocomplete="off">
            </div>
            <br>
            <div class="input-group">
                <span class="input-group-addon"><i class="fa fa-key"></i></span>
                <input type="password" id="pass" class="form-control" placeholder="Password" autocomplete="off">
            </div>
            <br>
            <button class="pull-right btn btn-info" id="register"><b>register</b></button>
        </form>
    </div>
</div>

<script type="text/javascript">
    (function () {

        $('#register').submit(function (e) {
            e.preventDefault();

            var credentials = {
                username: $('#user').val(),
                password: $('#pass').val()
            }

            swal({
                title: 'Working on your registration',
                text: 'Give me a bit...<br/><br/><i class="fa fa-spinner fa-pulse fa-3x fa-fw"></i>',
                html: true,
                showConfirmButton: false
            });
            setTimeout(function () {
                $.ajax({
                    url: '../register',
                    method: 'POST',
                    headers: {'X-api': 'application/json'},
                    data: credentials
                })
                    .done(function (data, textStatus, jqXHR) {
                        swal({
                            title: 'Result',
                            text: '<pre>' + JSON.stringify(data, null, 4) + '</pre>',
                            html: true
                        })
                    });
            }, 1000);
        })
    })();
</script>

2 个答案:

答案 0 :(得分:1)

经过大量挖掘后,SweetAlert似乎存在问题 现在有一个问题已经开放了很长一段时间来描述问题。 https://github.com/t4t5/sweetalert/issues/391

目前,似乎我需要这样做(请注意window.onkeydownwindow.onfocus

swal({
    title: 'Working on your registration',
    text: 'Give me a bit...<br/><br/><i class="fa fa-spinner fa-pulse fa-3x fa-fw"></i>',
    html: true,
    showConfirmButton: false
});
$.ajax({
    url: '../register',
    method: 'POST',
    headers: {'X-api': 'application/json'},
    data: credentials
})
    .done(function (data, textStatus, jqXHR) {
        window.onkeydown = window.onfocus = null; // This line is the solution
        swal({
            title: 'Result',
            text: '<pre>' + JSON.stringify(data, null, 4) + '</pre>',
            html: true
        })
});

答案 1 :(得分:0)

有几个问题:

您需要正确关闭第一个swal。你要把它打开。在第一个timer: 1000上设置swal,而不是在第二个setTimeout上使用swal({ title: 'Working on your registration', text: 'Give me a bit...<br/><br/><i class="fa fa-spinner fa-pulse fa-3x fa-fw"></i>', html: true, timer: 1000, showConfirmButton: false }); 。这不是必需的。

.done

在您的AJAX通话中,无需使用success,只需使用swal,然后在确认closeOnConfirm: true上关闭上一个$.ajax({ url: '../register', method: 'POST', headers: {'X-api': 'application/json'}, data: credentials, success: function (data) { swal({ title: 'Result', text: '<pre>' + JSON.stringify(data, null, 4) + '</pre>', html: true, closeOnConfirm: true }) }; });

int stuff = it.getAlpha().length();
return new FooPrime().gamma(it.getAlpha() + it.getBeta());