modal-dialog - 防止模式关闭

Question

这是我想做的:

• 打开一个包含表单的模态框
• 点击“保存”后，执行 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 属性“返回 false”，以便语义 UI 不会在单击批准(保存)按钮时关闭我的模式。

ajax 函数的“返回 false”尚未到达语义 UI 的 onApprove 属性，它只是为该匿名函数返回 false，而 onApprove 没有返回值，因此结果是在批准(保存)时关闭模式单击按钮。

所以类似于:

$('.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 验证，也许应该采取以下步骤:

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