Can not prevent closing the dialog if ajax returns an error

[Wmas]

I am using the following modal dialog which display a modal form.
This form will first receive some data from an ajax call where will be possible to enter some other data.
I am using Laravel 5 which validate the form and returns an error to the form in case the validation fails.
So in this case I do not want the form to close untill the user will make the needd corrections and the validation will pass.

I am using bootbox version 4.3.0

Here is the code for my modal form:

In the example below I leave the 'paid_at' field empty and saving the form I will get a response error

$.ajax({
url: '/admin/summary/ajax_payment/'+invoice_id,
type: 'POST',
dataType: 'json',
data: {_token: token, invoiceId: invoice_id},
})
.done(function(data) {
var result = data;
bootbox.dialog({
title: "Enter the payment.",
message:

            '<form action="/clients/modalstore" class="form-horizontal" role="form" id="test_modal"><input type="hidden" name="_token" value="'+token+'">'+
                '<div class="form-body">'+
                    '<div class="form-group">'+
                        '<label class="col-md-3 control-label">Amount</label>'+
                        '<div class="col-md-9">'+
                            '<input type="text" value="'+ result["balance"] +'" class="form-control" id="payment_amount">'+
                        '</div>'+
                    '</div>'+
                    '<div class="form-group">'+
                        '<label class="col-sm-3 control-label">'+ Lang.get('admin.update')+'</label>'+
                        '<div class="col-sm-9">'+
                            '<input $.type(text) value="'+ result["date"] +'"  class="form-control" id="payment_date"/>'+
                            '<span id="paid_at_error"></span>'+
                        '</div>'+
                    '</div>'+
                    '</div>'+
                    '<div class="form-group">'+
                        '<label class="col-md-3 control-label">Payment Method</label>'+
                        '<div class="col-md-9">'+
                            '<select class="form-control" id="payment_method_id">'+
                                '<option value="1">Option 1</option>'+
                                '<option value="2">Option 2</option>'+
                                '<option value="3">Option 3</option>'+
                            '</select>'+
                        '</div>'+
                    '</div>'+
                    '<div class="form-group">'+
                        '<label class="col-md-3 control-label">Send by Mail</label>'+
                        '<div class="col-md-9">'+
                            '<div class="checkbox-list">'+
                                '<label><input type="checkbox" name="send_by_mail"> Checkbox 1 </label>'+
                            '</div>'+
                        '</div>'+
                    '</div>'+
                    '<div class="form-group">'+
                        '<label class="col-md-3 control-label">Notes</label>'+
                        '<div class="col-md-9">'+
                            '<textarea class="form-control" rows="3"></textarea>'+
                        '</div>'+
                    '</div>'+
                '</div>'+
            '</form>',
        buttons: {
            success: {
                label: "Cancel",
                className: "btn-default",
                callback: function () {
                    console.log('cancel')
                }
            },
             main: {
                label: "Save",
                className: "btn-primary",
                callback: function() {
                    var amount = $('#payment_amount').val();
                    var paid_at = $('#payment_date').val();
                    var payment_method_id = $('#payment_method_id').val();
                    $.ajax({
                        url: '/admin/summary/ajaxStorePayment',
                        type: 'POST',
                        data: {_token: token, amount: amount, paid_at: paid_at, payment_method_id: payment_method_id },
                        dataType: 'JSON',
                        success: function (data) {
                            console.log(data);
                        },
                        error: function(data){
                                                  //even I return false the dialoge will close even if there is an error 
                            return false;
                            eval("var response = ("+data.responseText+")");
                            $('paid_at_error').html(response.paid_at)
                        }
                    });

                }
            }
        }
    });
})
.fail(function() {
    bootbox.dialog({

        title: "Error ",

        message: '<div>Can not retrive the invoice details</div>',

        buttons: {
            success: {
                label: "Close",
                className: "btn-default",
                callback: function () {
                    //
                }
            }
        }
    });
})

Hoopely someone can help me with this.

Thank you
Cheers
Franco

[makeusabrew]

Hi Franco,

You need to put the return false statement in the initial callback, not the callback invoked by the AJAX request. You'll then have to manually hide the dialog in the AJAX callback if you determine it to be successful.