0

The first is a post filtration, the secons is ajax add to cart button Separately they work fine, but adding to cart doesn't work after filtration(with results of filtration, before reloading the page). I tried to place the code of the second request in 'success' of the fist, but it didn'y work. I searched in google something like '2 ajax requests', but what I found wasn't similar to mine, help me to figure and understand how it correctly works please.

The first one(filtration)

jQuery(function($)
{
    $('.categories.side-nav.log>#st-accordion>ul>li input, .sortby>.price-slider input, select.orderby').on('change',function(e){ 
        e.preventDefault();    
        themename_get_posts();
        jQuery('html, body').animate({scrollTop:0}, 1);
    });
    $('.orderby').on('change', function(e){
        e.preventDefault();
        themename_get_posts();
    });
    
    $(document).on("click",".ajax-page-numbers .page-numbers",function(e){
        e.preventDefault();

        var url = $(this).attr('href'); //Grab the URL destination as a string
        var paged = url.split('&paged='); //Split the string at the occurance of &paged=

        if(~url.indexOf('&paged=')){
            paged = url.split('&paged=');
        } else {
            paged = url.split('/page/');
        }
        themename_get_posts(paged[1]); //Load Posts (feed in paged value)
    });

    //Получают данные
    function getCats()
    {
        var cats = []; //Setup empty array

        $(".themename_filter_check input:checked").each(function() {
            var val = $(this).val();
            cats.push(val); //Push value onto array
        });

        return cats; //Return all of the selected genres in an array
    }
    function getColor()
    {
        var cats = []; //Setup empty array

        $(".themename_filter_pa_color_check input:checked").each(function() {
            var val = $(this).val();
            cats.push(val); //Push value onto array
        });

        return cats; //Return all of the selected genres in an array
    }
    function getSize()
    {
        var cats = []; //Setup empty array

        $(".themename_filter_pa_size_check input:checked").each(function() {
            var val = $(this).val();
            cats.push(val); //Push value onto array
        });

        return cats; //Return all of the selected genres in an array
    }
    function getPricesMin(){
       return $('#priceMin').val();
    }
    function getPriceMax(){
       return $('#priceMax').val();
    }
    function themename_order(){
        return $('.orderby option:selected').val();
    }
    function themename_get_posts(paged)
    {
        var paged_value = paged; //Store the paged value if it's being sent through when the function is called
        var ajax_url = woocommerce_params.ajax_url; //Get ajax url (added through wp_localize_script)

        $.ajax({
            type: 'GET',
            url: ajax_url,
            data: {
                action: 'themename_filter',
                category: getCats,
                pa_color: getColor,
                pa_size: getSize,
                min: getPricesMin,
                max: getPriceMax,
                order: themename_order,
                paged: paged_value //If paged value is being sent through with function call, store here
            },
            beforeSend: function ()
            {
                $('.main-product-content').html('<div class="text-center" style="height:50vh;">Waiting</div>');
            },
            success: function(data)
            {
                //Hide loader here
                $('.main-product-content').html(data);
                $('.main-product-content ul.products').addClass('row');
                jQuery('.slider-archive').each(function() {
                  var slider = jQuery(this);
                  slider.slick({
                  infinite: true,
                  slidesToShow: 1,
                  slidesToScroll: 1,
                  driggable:false, 
                  dots: true,
                  arrows:true,  
                  focusOnSelect: true,
                });
                var sLightbox = jQuery(this);
                  sLightbox.slickLightbox({
                    src: 'src',
                    itemSelector: 'img.attachment-woocommerce_single.size-woocommerce_single',   
                  });
                }); 
                jQuery('.var-wrapper-pa_color .radio-span').click(function() {
                  jQuery('.var-wrapper-pa_color .radio-span').removeClass('attr-selected');
                  jQuery(this).addClass('attr-selected');
                });
                 // Add new slide
                
            },
            error: function()
            {
                //If an ajax error has occured, do something here...
                $(".main-product-content").html('<div class="text-center" style="height:50vh;">There has been an error</div>');
            }
        });
    }    
});

The second request(add to cart button)

jQuery( function( $ ) {
 
    $('.single_add_to_cart_button').addClass('ajax_add_to_cart');
 
    $( '.post-type-archive-product' ).on( 'click', '.quantity input', function() {
        return false;
        });
 
    $( '.archive' ).on( 'change input', '.quantity .qty', function() {
            var add_to_cart_button = $( this ).parents( '.product' ).find( '.add_to_cart_button' );
            // For AJAX add-to-cart actions
            add_to_cart_button.data( 'quantity', $( this ).val() );
            // For non-AJAX add-to-cart actions
            add_to_cart_button.attr( 'href', '?add-to-cart=' + add_to_cart_button.attr( 'data-product_id' ) + '&amp;amp;quantity=' + $( this ).val() );
        });
 
        $('.input-text.qty.text').bind('keyup mouseup', function () {
            var value = $(this).val();
        $('.product_quantity').val(value)
        });
 
        if ( typeof wc_add_to_cart_params === 'undefined' )
            return false;
 
        $( document ).on( 'click', '.ajax_add_to_cart', function(e) {
            e.preventDefault();
            var $thisbutton = $(this);          
            var $variation_form = $( this ).closest( '.variations_form' );
            var var_id = $variation_form.find( 'input[name=variation_id]' ).val();
            $( '.ajaxerrors' ).remove();
            var item = {},
                check = true;
                variations = $variation_form.find( 'select[name^=attribute]' );
                if ( !variations.length) {
                    variations = $variation_form.find( '[name^=attribute]:checked' );
                }
                if ( !variations.length) {
                    variations = $variation_form.find( 'input[name^=attribute]' );
                }
            variations.each( function() {
                var $this = $( this ),
                    attributeName = $this.attr( 'name' ),
                    attributevalue = $this.val(),
                    index,
                    attributeTaxName;
                    $this.removeClass( 'error' );
                if ( attributevalue.length === 0 ) {
                    index = attributeName.lastIndexOf( '_' );
                    attributeTaxName = attributeName.substring( index + 1 );
                    $this
                        .addClass( 'required error' )
                        .before( '<div class="ajaxerrors"><p>Please select ' + attributeTaxName + '</p></div>' )
                    check = false;
                } else {
                    item[attributeName] = attributevalue;
                }
            } );
            if ( !check ) {
                return false;
            }
 
            if ( $thisbutton.is( '.ajax_add_to_cart' ) ) {
                $thisbutton.removeClass( 'added' );
                $thisbutton.addClass( 'loading' );
                if ($( this ).parents('.variations_form')[0]){
                var product_id = $variation_form.find('input[name=product_id]').val();
                var quantity = $variation_form.find( 'input[name=quantity]' ).val();
                                var data = {
                                action: 'bodycommerce_ajax_add_to_cart_woo',
                                product_id: product_id,
                                quantity: quantity,
                                variation_id: var_id,
                                variation: item
                                };
                    }
                else {
                var product_id = $(this).parent().find('.product_id').val();
                var quantity = $(this).parent().find('.qty').val();
                var data = {
                action: 'bodycommerce_ajax_add_to_cart_woo_single',
                product_id: product_id,
                quantity: quantity
                };
                }
 
                $( 'body' ).trigger( 'adding_to_cart', [ $thisbutton, data ] );
                $.post( wc_add_to_cart_params.ajax_url, data, function( response ) {
                    if ( ! response )
                        return;
                    var this_page = window.location.toString();
                    this_page = this_page.replace( 'add-to-cart', 'added-to-cart' );
                    if ( response.error && response.product_url ) {
                        window.location = response.product_url;
                        return;
                    }
                    if ( wc_add_to_cart_params.cart_redirect_after_add === 'yes' ) {
                        window.location = wc_add_to_cart_params.cart_url;
                        return;
                    } else {
                        $thisbutton.removeClass( 'loading' );
                        var fragments = response.fragments;
                        var cart_hash = response.cart_hash;
                        if ( fragments ) {
                            $.each( fragments, function( key ) {
                                $( key ).addClass( 'updating' );
                            });
                        }
        $( '.shop_table.cart, .updating, .cart_totals' ).fadeTo( '400', '0.6' ).block({
                            message: null,
                            overlayCSS: {
                                opacity: 0.6
                            }
                        });
                        $thisbutton.addClass( 'added' );
                        if ( fragments ) {                                          
                            $.each( fragments, function( key, value ) {
                                $( key ).replaceWith( value );
                            });
                        }
                        $( '.widget_shopping_cart, .updating' ).stop( true ).css( 'opacity', '1' ).unblock();
                        $( '.shop_table.cart' ).load( this_page + ' .shop_table.cart:eq(0) >; *', function() {
                        $( '.shop_table.cart' ).stop( true ).css( 'opacity', '1' ).unblock();
                        $( document.body ).trigger( 'cart_page_refreshed' );
                        });
                        $( '.cart_totals' ).load( this_page + ' .cart_totals:eq(0) >; *', function() {
                        $( '.cart_totals' ).stop( true ).css( 'opacity', '1' ).unblock();
                    });
                    }
                });
                return false;
            } else {
                return true;
            }
        });
    });

Where is correctly to paste a code from the second function, or tell to the first one somehow 'after success do the second'?

  • Does this answer your question? [Jquery continue another ajax function after the first ajax function call is fully complete](https://stackoverflow.com/questions/12516912/jquery-continue-another-ajax-function-after-the-first-ajax-function-call-is-full) – Don't Panic Aug 02 '21 at 06:58
  • I don't know. Logically yes, but where is the right place to name my second function? It has no name to call it. I didn't write that snippet myself, I found it, and it works, but not with filter – user16511521 Aug 02 '21 at 16:22
  • The same way you have named other functions: `function someFunctionName() { ... }`. The `jQuery( function( $ ) {` just means the code inside won't be run until the page is finished loading. You only need one of them, at the top of your code. Note that your 2nd set of code adds a lot of event handlers (eg `$( document ).on( 'click', ...`. It is usually not good practice to do that based on user actions, as it means for eg that it will run repeatedly. If the filtration code runs 2x, it means the 2nd set of code runs 2x, and it means you get 2x event handlers added. – Don't Panic Aug 03 '21 at 07:32
  • The 2nd event handler does not replace the first one, even if it is identical. And when that event is triggered, they *all* run. Better to define event handlers outside this code, so they are set up once. – Don't Panic Aug 03 '21 at 07:33
  • PS - if you're still having trouble, try to create a **MINIMAL** example that demonstrates the problem, and edit your question. There is way too much code above, most of it has nothing to do with the real problem of how to run AJAX2 after AJAX1. Strip out anything that isn't related to solving just that problem. See how to create a [minimal, complete, and verifiable example](https://stackoverflow.com/help/mcve) for tips. – Don't Panic Aug 03 '21 at 07:36
  • 1
    thanks! I'm still learning, it's valuable – user16511521 Aug 03 '21 at 15:08

0 Answers0