Prevent a modal from closing

Question

This is I want to do:

• open a modal with a form in it
• On hitting 'Save', perform an ajax-call
  • if everything is OK (no error sent back), then close the modal
  • if things are not OK, keep the modal open and show the error messages in the modal

I have a few successes, but not with 2.2, id est, keep the modal open when error is sent back.

This is the code I have so far:

<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

I have success with what your trying to do. I basically had to "return false" for onApprove property so that semantic UI doesn't close my modal on button click for the approve(save) button.

Your "return false" for ajax function hasn't reached to semantic UI's onApprove property, it just returns false for that anonymous function, leaving onApprove without a return value, and so the result is closing the modal on approve(save) button click.

So something similar to:

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

Here's how I did it, but I used semantic UI form validations instead of JQuery Validations and AJAX: http://plnkr.co/edit/5fK7UuJIm7QTJGiu23NL?p=preview

Also recall AJAX is asynchronous, so your AJAX request would be sent, and your code will continue execute the rest of the onApprove function without a response from the AJAX code.

Perhaps these steps should be taken if you need to stick with AJAX and JQuery validations:

1. Take a look at synchronous AJAX, from How can I get jQuery to perform a synchronous, rather than asynchronous, Ajax request?
2. You need to figure out how to get the return value of that AJAX request
3. Return that value as the onApprove function's return value.