craftpip / jquery-confirm

A multipurpose plugin for alert, confirm & dialog, with extended features.
http://craftpip.github.io/jquery-confirm/
MIT License
1.87k stars 509 forks source link

ajax form submit, if ajax error form stop for disappear #532

Open sajalmia381 opened 4 years ago

sajalmia381 commented 4 years ago

jquery-confirm version: v3.x.x

I'm submitting a ajax form (check one with "x")

$.confirm({
    title: `Enter ${priceSetting} price`,
    content: `<form action="" class="price-update-form" method="post">
        <div class="form-group">
        ${formInputGroup}
        </div>
        </form>`,
    buttons: {
        formSubmit: {
            text: 'Update',
            btnClass: 'btn-blue',
            autoClose: false,
            action: function () {
                let jc = this;
                let data = {}
                if (priceSetting == 'range') {
                    let minPrice = this.$content.find('[name="min_price"]').val();
                    let maxPrice = this.$content.find('[name="max_price"]').val();
                    if (!minPrice || !maxPrice) {
                        $.alert('Provide min pirce and max price valid');
                        return false;
                    }
                    data = {...data, 'min_price':minPrice, 'max_price':maxPrice }
                } else {
                    let price = this.$content.find('[name="price"]').val();
                    let discount = this.$content.find('[name="discount"]').val();
                    if (!price) {
                        $.alert('Provide Price Value');
                        return false;
                    }
                    data = {...data, 'price': price, 'discount':discount}
                }
                $.ajax({
                    method: 'post',
                    url: endpoint,
                    data: data,
                    success: function(res){
                        if (res.success) {
                            if (priceSetting == 'range') {
                                parent.find('.min_price').text(data.min_price)
                                parent.find('.max_price').text(data.max_price)
                            } else{
                                parent.find('.price').text(data.price)
                                parent.find('.discount').text(data.discount)
                                parent.find('.total_price').text(parseFloat(data.price) - parseFloat(data.discount))
                            }
                            $.alert('Price Updated!');
                        } else {
                            $.alert('Price Not Changed');
                        }
                    },
                    error: function({responseJSON: {errors}}) {
                        console.log(errors)
                        let errorMes = '';
                        for (let key in errors){
                            if (errors.hasOwnProperty(key)) {
                                errorMes += `${errors[key]},`
                                let errorInput = $(`[name="${key}"]`);
                                errorInput.addClass('is-invalid')      
                            }
                        }
                        $.alert(errorMes);
                        console.log(jc)
                    }
                });
            }
        },
        cancel: function () {
            //close
        },
    },
    onContentReady: function () {
        // bind to events
        var jc = this;
        this.$content.find('form').on('submit', function (e) {
            // if the user submits the form by pressing enter in the field.
            e.preventDefault();
            jc.$$formSubmit.trigger('click'); // reference the button and click it
        });
    }
});
ciprian2301 commented 4 years ago

Add return false; after ajax call.