防止模式关闭

Question

这是我想做的：

打开一个包含表单的模式
点击 'Save' 时，执行 ajax 调用
- 如果一切正常（没有返回错误），则关闭模态
- 如果情况不对，请保持模态打开并在模态中显示错误消息

我取得了一些成功，但在 2.2 中没有成功，id est，在发回错误时保持模式打开。

这是我目前的代码：

<div class="ui modal" id="createAddress">
    <i class="close icon"></i>
    <div class="header">
        Adresses
    </div>
    <div class="content">
        <div class="ui form">
            <?php
            $encrypter = app('Illuminate\Encryption\Encrypter');
            $encrypted_token = $encrypter->encrypt(csrf_token());
            ?>
            <input id="token" type="hidden" value="{{$encrypted_token}}">
            <div class="field">
                <label>Address</label>
                <input type="text" id="address">
            </div>
            <div class="two fields">
                <div class="field">
                    <label>Zip</label>
                    <input type="text" id="zip">
                </div>
                <div class="field">
                    <label>County</label>
                    <input type="text" id="county">
                </div>
            </div>
            <div class="field">
                <label>Country</label>
                <input type="text" id="country">
            </div>
            <div class="field">
                <label>Phone</label>
                <input type="text" id="phone">
            </div>
            <div class="field">
                <label>E-mail</label>
                <input type="text" id="email">
            </div>
        </div>
    </div>
    <div class="actions">
        <div class="ui red cancel button">Cancel</div>
        <div class="ui positive button">Save</div>
    </div>
</div>

$('.ui.modal')
        .modal({
            onApprove : function() {
                var $_token = $('#token').val();
                var dataJs = {  address:$("#address").val(),
                                zip:$("#zip").val(),
                                county:$("#county").val(),
                                country:$("#country").val(),
                                tel:$("#tel").val(),
                                email:$("#email").val()};
                $.ajax({
                    type: 'POST',
                    headers: { 'X-XSRF-TOKEN' : $_token },
                    dataType: 'json',
                    data: dataJs,
                    url: '/admin/relationshipTmpAddressesStoreAjax',
                    error: function(xhr, textstatus, errorThrown){
                        alert('request failed');
                        return false
                    }
                });
            }
        })
        .modal('show')

Answer 1

我已经成功完成了您的尝试。对于 onApprove 属性，我基本上必须 "return false" 以便语义 UI 不会在按钮单击批准（保存）按钮时关闭我的模式。

你的 "return false" for ajax 函数还没有达到语义 UI 的 onApprove 属性，它只是 returns false for that anonymous函数，让 onApprove 没有 return 值，因此结果是在点击批准（保存）按钮时关闭模式。

所以类似于：

$('.ui.modal').modal({
  onApprove : function() {
    ... //Validate here, or pass validation to somewhere else
    return false; //Return false as to not close modal dialog
  }
}).modal('show');

我是这样做的，但我使用语义 UI 表单验证而不是 JQuery 验证和 AJAX： http://plnkr.co/edit/5fK7UuJIm7QTJGiu23NL?p=preview

还记得 AJAX 是异步的，因此您的 AJAX 请求将被发送，并且您的代码将继续执行 onApprove 函数的其余部分而无需 AJAX 代码的响应.

如果您需要坚持使用 AJAX 和 JQuery 验证，也许应该采取这些步骤：

看看同步AJAX，来自How can I get jQuery to perform a synchronous, rather than asynchronous, Ajax request?
您需要弄清楚如何获取 AJAX 请求的 return 值
Return 该值作为 onApprove 函数的 return 值。

Answer 2

感谢鬼崎。我已经进步并来到了您在回答中建议的路径。

这是我想出的代码（我实际上是使用一个变量来定义 return 值）：

        $('.ui.modal')
                .modal({
                    selector    : {
                        close    : '.close, .actions .button',
                        approve  : '.actions .positive, .actions .approve, .actions .ok',
                        deny     : '.actions .negative, .actions .deny, .actions .cancel'
                    },

                    onShow: function(){
                        $("#createAddressForm .field")
                                .removeClass("error");
                        $("#createAddressForm .field :input")
                                .attr("placeholder", "")
                                .val("")
                    },

                    onApprove: function () {

                        var $_token = $('#token').val();
                        var dataJs = {
                            address: $("#address").val(),
                            zip: $("#zip").val(),
                            county: $("#county").val(),
                            country: $("#country").val(),
                            tel: $("#tel").val(),
                            email: $("#email").val()
                        };

                        $.ajax({
                            type: 'POST',
                            async: false,
                            headers: {'X-XSRF-TOKEN': $_token},
                            dataType: 'json',
                            data: dataJs,
                            url: '/admin/relationshipTmpAddressesStoreAjax',

                            success: function(){
                                ajaxSucceeded = true;
                                console.log('did it')
                            },

                            error: function (xhr, textstatus, errorThrown) {
                                ajaxSucceeded = false;
                                $.each(JSON.parse(xhr.responseText), function (index, element) {
                                    $('#' + index)
                                            .attr("placeholder", element)
                                            .parent().addClass("error")

                                });
                            }
                        });

                        return ajaxSucceeded;

                    }
                })
                .modal('show')
    } );

起初，我使用了代码而没有更改异步默认值，实际上，正如您在回答中所建议的那样，我不得不将其设置为 false 以确保我从 ajax - 在到达 onApprove 闭包结束之前调用。

onShow部分使代码更加完整。如果我没有把它放在那里，当模态在错误保存后点击取消按钮后再次出现时，字段仍将处于错误状态。

Answer 3

我同意@MTran，除了答案开始考虑同步请求的最后一部分。有更好的方法！ :)

首先，改变你的模态元素。 let $createAddressModal = $('#createAddress');

然后，在 onApprove 处理程序中，return false; 无论如何都在最后，因为你想隐藏模态有条件地，稍后 （不是现在，当onApprove handler需要完成执行时） 以后在response handler functions中，可以有条件地'hide' the modal as/when有必要通过参考你的模态变量（D.R.Y。通过重新选择模态）。

$createAddressModal.modal({
    // settings...,
    onApprove: function() {
        
        let ajaxRequest = $.ajax({ ... });

        ajaxRequest.done(function(response) {

            if(response.is42) {
                $createAddressModal.modal('hide'); // <-----
            }
        });

        ajaxRequest.fail(function(x, y, z) { ... });

        return false;
    }
});

防止模式关闭

Prevent a modal from closing

modal-dialog

semantic-ui