orige-zz / jquery-bootstrap-modal-steps

A lightweight step by step modal for bootstrap
MIT License
30 stars 36 forks source link

Prevent modal closing on completeCallback function #12

Open noelc10 opened 7 years ago

noelc10 commented 7 years ago

Good day!

I've just wondered if this plugin could do event.preventDefault() on modal closing when completeCallback function (when the modal step is finished).

I try this code where i perform form validation based on the title field:

` $('#modalAddTicket').modalSteps({ btnCancelHtml: 'Cancel', btnPreviousHtml: 'Previous', btnNextHtml: 'Next', btnLastStepHtml: 'Submit', disableNextButton: false, completeCallback: function() { var info = {}; info['title'] = $.trim($('#fld-title').val()); if (info['title']) { info['description'] = $('#fld-description').val(); info['category_id'] = $('#ticketCategory').val(); // info['email'] = $('#ticketEmail').val() || null; info['unique_id'] = $('#fld-reference-no').val(); // info['date_start'] = $.now(); info['org_id'] = ORG_ID; info['ticket_type_id'] = 2; info['project_id'] = '0';

            var owner = $('#ticketAssignee').val();
            var dateStart = $('#ticketDue').data('daterangepicker').startDate._d;
            var dateDue = $('#ticketDue').data('daterangepicker').endDate._d;
            var date_start = dateStart.getFullYear() + '-' + (dateStart.getMonth() + 1) + '-' + dateStart.getDate();
            var date_due = dateDue.getFullYear() + '-' + (dateDue.getMonth() + 1) + '-' + dateDue.getDate();
            info['owner_id'] = (owner) ? owner : null;
            info['ticket_source_id'] = $('#ticketSource').val();
            info['account_id'] = (account_id =='all') ? $('#ticketAccount').val() : account_id;
            info['created_by'] = USER_LOGGED_ID;
            info['ticket_severity_id'] = $('#ticketUrgency').val();
            info['date_start'] = date_start || null;
            info['date_due'] = date_due;

            $.post(API_URL+'ticket/quickcreate', info, function(response){
              if(response.success) {
                console.log(response.success);
                $('#quick-tt-form').parent('div.btn-group').removeClass('open');              
                var view = $('ul.nav-view-fltr li a.active');
                view.addClass('highlight');
                view.trigger('click');
                resetAddTicketFields();
              }
            });
        } else {
            toastr.options = {
                toastClass: 'alert',
                iconClasses: {
                    error: 'alert-error',
                    info: 'alert-info',
                    success: 'alert-success',
                    warning: 'alert-warning'
                }
            };
            toastr.error("Please fill the Title field!", "ERROR", {
                "closeButton": false,
                "debug": false,
                "newestOnTop": false,
                "progressBar": false,
                "positionClass": "toast-top-right",
                "preventDuplicates": false,
                "onclick": null,
                "showDuration": "300",
                "hideDuration": "3000",
                "timeOut": "5000",
                "extendedTimeOut": "500",
                "showEasing": "swing",
                "hideEasing": "linear",
                "showMethod": "fadeIn",
                "hideMethod": "fadeOut"
            });
            $(this).preventDefault();
        }
    },
    callbacks: {

    }
});

`

but it doesn't working at all, though it is integrated on the bootstrap framework. Any idea and suggestion will much appreciated. Hoping for the quick response, thanks!