防止模态关闭

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 Validations和AJAX:http: //plnkr.co/edit/5fK7UuJIm7QTJGiu23NL？p = preview

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

如果您需要坚持使用AJAX和JQuery验证,也许应该采取以下步骤:

1. 看一下同步AJAX,我怎样才能让jQuery执行同步而不是异步的Ajax请求？
2. 您需要弄清楚如何获取该AJAX请求的返回值
3. 将该值作为onApprove函数的返回值返回.