Quantity buttons disappear after filtering events

[Matt Gray]

Hi,

After using the filter at the top of the page, the page refreshes and filters fine, but then the ticket buttons don’t generate correctly (http://tinypic.com/r/b88eua/9) – it is normally like this (http://tinypic.com/r/xfohoj/9)

See here: http://www.aquaphysical.com/classes/category/instructor-training

Why is that happening, and how can I fix it?

Cheers,
Matt

[Josh]

Hey Matt,

Thanks for reaching out to us!

It looks like there are some javascript issues on the page once something is “filtered”. You can see this further in action when using the datepicker and then trying to change the date again after the ajax finishes loading. You won’t be able to select a new date.

Did this happen after the latest update on your site? Does the issue persist if you switch to a default theme here?

Thanks!

[Matt Gray]

Hey,

It doesn’t show up at all on the default theme, as the tickets form is only generated through a file in my Avada child theme…

Changing the date twice is working for me, but just the ticket -/+ that isn’t…

Cheers,
Matt

[Barry]

Hi Matt,

This is indeed related to Avada – the code responsible for adding the fancy plus/minus buttons to the quantity selectors can be found in the following file:

themes/Avada/assets/js/main.min.js

What seems to be happening is that that code runs once the page loads, but never again. When our own views update via ajax the quantity selectors are delivered to the browser in ‘plain form’ and the Avada code doesn’t run again to transform them by adding these extra buttons.

Luckily, for just this kind of reason, when we finish loading in fresh content via ajax we trigger various events: with some custom code you can listen for these events and, potentially, you could then call the relevant Avada function to add those extra buttons to the new content. Here’s an outline of what that code would look like:

jQuery( tribe_ev.events ).on( 'tribe_ev_ajaxSuccess', function() { 
    // Of course, you'd replace the following line with a call to the
    // relevant Avada function (or a replacement)
    console.log( 'TEC ajax operation has completed!' ); 
} );

I’m afraid what I can’t do is fill in the missing gap as to which Avada function you should call, but you can probably check in with their own support team on that count.

For more information on adding custom JS code, as in the above example, please refer the WordPress tech docs which describe how to enqueue scripts and declare dependencies (such as jQuery).

I hope that gets you pointed in the right direction 🙂

[Matt Gray]

Hi Barry,
That’s very helpful – thanks…
I’ve raised it with the Avada team too and passed on your comments – I’ll let you know what they come back with.
Alternatively, does the Events plugin have a non-AJAX version if I can’t find a solution?
Cheers,
Matt

[Matt Gray]

Hi Barry,

This was added into Theme Options -> General:

<script>
jQuery( document ).ready( function() {
	jQuery( tribe_ev.events ).on( 'tribe_ev_ajaxSuccess', function() {
		console.log("trigger");
	 var jQuerytestProp = jQuery( 'div.quantity:not(.buttons_added), td.quantity:not(.buttons_added)' ).find( 'qty' );
            if ( jQuerytestProp && jQuerytestProp.prop( 'type' ) != 'date' ) {
                // Quantity buttons
                jQuery( 'div.quantity:not(.buttons_added), td.quantity:not(.buttons_added)' ).addClass( 'buttons_added' ).append( '<input type="button" value="+" class="plus" />' ).prepend( '<input type="button" value="-" class="minus" />' );

                // Target quantity inputs on product pages
                jQuery( 'input.qty:not(.product-quantity input.qty)' ).each(
                    function() {

                        var min = parseFloat( jQuery( this ).attr( 'min' ) );

                        if ( min && min > 0 && parseFloat( jQuery( this ).val() ) < min ) {
                            jQuery( this ).val( min );
                        }
                    }
                );

                jQuery( document ).on(
                    'click', '.plus, .minus', function() {

                        // Get values
                        var jQueryqty = jQuery( this ).closest( '.quantity' ).find( '.qty' ),
                            currentVal = parseFloat( jQueryqty.val() ),
                            max = parseFloat( jQueryqty.attr( 'max' ) ),
                            min = parseFloat( jQueryqty.attr( 'min' ) ),
                            step = jQueryqty.attr( 'step' );

                        // Format values
                        if ( !currentVal || currentVal === '' || currentVal === 'NaN' ) currentVal = 0;
                        if ( max === '' || max === 'NaN' ) max = '';
                        if ( min === '' || min === 'NaN' ) min = 0;
                        if ( step === 'any' || step === '' || step === undefined || parseFloat( step ) === 'NaN' ) step = 1;

                        // Change the value
                        if ( jQuery( this ).is( '.plus' ) ) {

                            if ( max && ( max == currentVal || currentVal > max ) ) {
                                jQueryqty.val( max );
                            } else {
                                jQueryqty.val( currentVal + parseFloat( step ) );
                            }

                        } else {

                            if ( min && ( min == currentVal || currentVal < min ) ) {
                                jQueryqty.val( min );
                            } else if ( currentVal > 0 ) {
                                jQueryqty.val( currentVal - parseFloat( step ) );
                            }

                        }

                        // Trigger change event
                        jQueryqty.trigger( 'change' );
                    }
                );
            }
			
} );
} );
</script>

And now it works again!

Thanks for your help…

[Barry]

Awesome, I’m glad to hear that worked – and thank you for sharing this solution – we’ve got lots of Avada users out there and this will probably be very useful for them, too 🙂

[Author]

Posts