Woocommerce Ajax cart update when state select field is changed

I'm trying to update shopping cart via Ajax when user change the shipping state field selector, but with no success. My code is the follow:

add_action( 'wp_footer', 'ava_cart_refresh_update_qty', 9999 ); 
function ava_cart_refresh_update_qty() { 
    if (is_cart()) { 
        ?> 
        <script type="text/javascript">
        (function($) {
            var triggerUpdate = function() {
                $('div.woocommerce').on('click', 'select.state_select', function(){ 
                    console.log('test');
                    $("button[name='calc_shipping']").trigger("click");
                 });
            }

            triggerUpdate();

            $(document).ajaxComplete(function() {
                triggerUpdate();
            });
        })(jQuery);
        </script> 
        <?php 
    } 
}

Solution

This doesn't requires Ajax. To auto update on change state requires to be a delegated event attached to <body> like:

add_action('wp_footer', 'wc_cart_submit_on_state_change');
function wc_cart_submit_on_state_change() {
    if ( is_cart() ) :
    ?>
    <script type="text/javascript">
    jQuery( function($){
        var state = '';

        // update cart on delivery location checkbox option
        $(document.body).on( 'change', '#calc_shipping_state', function() {
            if( state !== $(this).val() ) {
                state = $(this).val();
                $('button[name="calc_shipping"]').submit();
            }
        });
    });
    </script>
    <?php
    endif;
}

Code goes in functions.php file of your active child theme (or active theme). Tested and works.