An Ajax modal window in e commence account center that allows you to modify your shipping date, cancel or update.

Account Center UX

jQuery(function($){

    // Accordion window
    $.accordionWin = {
        init: function() {
            $('.accordion > dt > a').click(function () {
                $('.accordion > dd').slideUp();
                $(this).parent().next().slideDown();
                return false;
            });
        },
        openDefault: function() {
            $('.accordion > dd').hide();
            $('.default-open').show();
            $('#datepicker').val('');
            $('#cancellation-reason').val('');
        }
    }

    // Field validator
    $.fieldValidator = {
        frequency: function() {
            $('#autoreplenishment-frequency').change(function() {
                $('.update-freq-selected-text').text($('#autoreplenishment-frequency option:selected').text().toLowerCase());
                $(this).closest("dd").find('.confirm').slideDown();
            });
        },
        shipmentDate: function() {
            $('#datepicker').change(function() {
                var newDate  = new Date(this.value);
                var lastDate = new Date($(this).attr('last-day'));

                if (newDate < lastDate) {
                    $('.last-date').html("" + $(this).attr('last-day') + "");
                    $('.wrong-date-msg').show();
                    $('#update-date').hide();
                    $(this).closest("dd").find('.confirm').slideDown();
                } else {
                    $('.wrong-date-msg').hide();
                    $('#update-date').show();
                    $(this).closest("dd").find('.confirm').slideDown();
                }
            });
        },
        cancellation: function() {
            $("#cancellation-reason").change(function() {
                $(this).closest("dd").find('.confirm').slideDown();

                if ($("#cancellation-reason option:selected").val() == "") {
                    $(this).closest("dd").find('.confirm').slideUp();
                }
            });
        }
    }

    // Ajax
    $.ajaxWin = {
        init: function(config) {
            var config = config;

            $.ajax({
                type: "POST",
                url: config.url,
                data: config.orderInfo,
                dataType: "json",
                beforeSend: function () {
                    $('.loaderImg').show();
                },
                success: function(data) {
                    $('.loaderImg').hide();

                    if (data['success']) {
                        if (config.orderInfo.mode == 'update') {
                            $("#ar-message").removeClass().addClass("respond-msg success").html(data["success"]);
                            config.row.find('#next-ship-date-text').html(config.parsedDate);
                            config.row.find('#frequency-text').html($('#autoreplenishment-frequency option:selected').text());
                        }

                        if (config.orderInfo.mode == 'cancel') {
                            $("#ar-message").removeClass().addClass("respond-msg canceled").show().html(data["cancel"]);
                        }
                    } else {
                        $("#ar-message").removeClass().addClass("respond-msg error").show().html(data["error"]);
                    }
                }
            });
        }
    }

 });