Question

我想这样做：

打开一个带有表单的模态
点击＆＃39;保存＆＃39;，执行ajax-call
- 如果一切正常（没有发回错误），则关闭模态
- 如果情况不正常，请保持模态打开并在模态中显示错误消息

我有一些成功，但不是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验证，也许应该采取这些步骤：

从How can I get jQuery to perform a synchronous, rather than asynchronous, Ajax request?
您需要弄清楚如何获取该AJAX请求的返回值
将该值作为onApprove函数的返回值返回。

Answer 2

感谢Oniisaki。我已经取得了进步并走上了你在答案中建议的道路。

这是我提出的代码（我实际上是使用变量来定义返回值）：

        $('.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')
    } );

首先，我使用代码而不更改async默认值，事实上，正如您在答案中建议的那样，我必须将其设置为false以确保在到达之前我从ajax调用中获得了返回值。 onApprove关闭结束。

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

防止模态关闭

2 个答案: