1

我在使用插件安装 Wordpress 时遇到问题。有一个日历，您可以单击一天（或几天范围），然后通过admin-ajax.php它通过 ajax 调用计算产品成本。

问题是，当我单击日历单元格时，admin-ajax.php会调用两次。第一次持续几毫秒并立即取消。然后自动地，它再次调用它并获得 ajax 响应。当我第二次单击日历单元格时，将admin-ajax.php调用 3 次。前两个被取消，只有最后一个得到响应。

我发现用于这部分的代码如下。但是，即使我可以在开发者控制台上看到那些已取消的调用，我也找不到任何问题。

$('.wc-bookings-booking-form')
        .on('change', 'input, select', function() {
            var index = $('.wc-bookings-booking-form').index(this);

            if ( xhr[index] ) {
                xhr[index].abort();
            }

            $form = $(this).closest('form');

            var required_fields = $form.find('input.required_for_calculation');
            var filled          = true;
            $.each( required_fields, function( index, field ) {
                var value = $(field).val();
                if ( ! value ) {
                    filled = false;
                }
            });
            if ( ! filled ) {
                $form.find('.wc-bookings-booking-cost').hide();
                return;
            }

            $form.find('.wc-bookings-booking-cost').block({message: null, overlayCSS: {background: '#fff', backgroundSize: '16px 16px', opacity: 0.6}}).show();

            xhr[index] = $.ajax({
                type:       'POST',
                url:        booking_form_params.ajax_url,
                data:       {
                    action: 'wc_bookings_calculate_costs',
                    form:   $form.serialize()
                },
                success:    function( code ) {
                    if ( code.charAt(0) !== '{' ) {
                        console.log( code );
                        code = '{' + code.split(/\{(.+)?/)[1];
                    }

                    result = $.parseJSON( code );

                    if ( result.result == 'ERROR' ) {
                        $form.find('.wc-bookings-booking-cost').html( result.html );
                        $form.find('.wc-bookings-booking-cost').unblock();
                        $form.find('.single_add_to_cart_button').addClass('disabled');
                    } else if ( result.result == 'SUCCESS' ) {
                        $form.find('.wc-bookings-booking-cost').html( result.html );
                        $form.find('.wc-bookings-booking-cost').unblock();
                        $form.find('.single_add_to_cart_button').removeClass('disabled');
                    } else {
                        $form.find('.wc-bookings-booking-cost').hide();
                        $form.find('.single_add_to_cart_button').addClass('disabled');
                        console.log( code );
                    }
                },
                error: function() {
                    $form.find('.wc-bookings-booking-cost').hide();
                    $form.find('.single_add_to_cart_button').addClass('disabled');
                },
                dataType:   "html"
            });
        })
        .each(function(){
            var button = $(this).closest('form').find('.single_add_to_cart_button');

            button.addClass('disabled');
        });

这是来自开发控制台的屏幕截图： 在此处输入图像描述

编辑：我想我发现了问题，但我不确定。还有这部分代码根本不应该使用。日历上有时间功能，但未激活。因此，不应运行此代码。

$('.wc-bookings-booking-form').on( 'date-selected', function() {
        show_available_time_blocks( this );
    });

    var xhr;

    function show_available_time_blocks( element ) {
        var $form               = $(element).closest('form');
        var block_picker        = $form.find('.block-picker');
        var fieldset            = $form.find('.wc_bookings_field_start_date');

        var year  = parseInt( fieldset.find( 'input.booking_date_year' ).val(), 10 );
        var month = parseInt( fieldset.find( 'input.booking_date_month' ).val(), 10 );
        var day   = parseInt( fieldset.find( 'input.booking_date_day' ).val(), 10 );

        if ( ! year || ! month || ! day ) {
            return;
        }

        // clear blocks
        block_picker.closest('div').find('input').val( '' ).change();
        block_picker.closest('div').block({message: null, overlayCSS: {background: '#fff', backgroundSize: '16px 16px', opacity: 0.6}}).show();

        // Get blocks via ajax
        if ( xhr ) xhr.abort();

        xhr = $.ajax({
            type:       'POST',
            url:        booking_form_params.ajax_url,
            data:       {
                action: 'wc_bookings_get_blocks',
                form:   $form.serialize()
            },
            success: function( code ) {
                block_picker.html( code );
                resize_blocks();
                block_picker.closest('div').unblock();
            },
            dataType:   "html"
        });
    }
4

0 回答 0