Uncaught TypeError: Cannot read property 'root' of null

[alpezed]

Hi, I'm creating a shortcode for WordPress and element for Avada fusion builder and the output and script is working properly on frontend but not no backend editor, here's the screenshot my code on backend builder.

The issue is to create a Tick counter on the element selected with the given selector.

/ global FusionPageBuilderApp / var FusionPageBuilder = FusionPageBuilder || {};

( function () { jQuery( document ).ready( function () { FusionPageBuilder[ better_script_vars_flip.shortcode_name ] = FusionPageBuilder.ElementView.extend( {

        /**
         * Runs after view DOM is patched.
         *
         * @since 2.0
         * @return {void}
         */
        onRender: function () {
            var self = this;

            jQuery( window ).on( 'load', function() {
                self.afterPatch();
            } );
        },

        /**
         * Runs after view DOM is patched.
         *
         * @since 2.0
         * @return {void}
         */
        afterPatch: function () {
            this._refreshJs();

            var element = jQuery( '#fb-preview' )[ 0 ].contentWindow.jQuery( this.$el.find( '.tick' ) );

            var counter,
                dateTime = this.model.attributes.params.datetime || new Date(),
                schedule = this.model.attributes.params.schedule || '',
                flipType = this.model.attributes.params.type,
                dateTimeFormat = this.model.attributes.params.format,
                format = {
                    format: 'string' === typeof dateTimeFormat ? dateTimeFormat.split(',') : [],
                };

            if ( 0 < element.length ) {

                // setTimeout( function() {

                    // if ( 'undefined' !== element ) {

                        var tick = element.tick( 'create' );

                        if ( 'count_down' === flipType ) {
                            counter = jQuery.tick.count.down( dateTime, format );
                        } else if ( 'count_up' === flipType ) {
                            const dateOnly =
                                "string" === typeof dateTime
                                    ? dateTime.split(/[ T]+/)[0]
                                    : new Date() + 1;
                            counter = jQuery.tick.count.up( dateOnly, format );
                        } else if ( 'schedule' === flipType ) {
                            counter = jQuery.tick.count.schedule( schedule, format );
                        } else {
                            jQuery.tick.helper.interval( function() {
                                var d = jQuery.tick.helper.date();
                                tick.tick( 'value', {
                                    sep: ':',
                                    hours: d.getHours(),
                                    minutes: d.getMinutes(),
                                    seconds: d.getSeconds()
                                } );
                            } );
                        }

                        if ( 'clock' !== flipType ) {
                            counter.onupdate = function ( value ) {
                                tick.tick( 'value', value );
                            };
                        }

                    // }

                // }, 100 );

            }
        },
    } );
} );

} )( jQuery );

[rikschennink]

Hi, happy to take a look. Can you format the code snippets and provide a public test case?

[alpezed]

Hi @rikschennink Thank you but it's already sorted https://github.com/Theme-Fusion/Fusion-Builder-Sample-Add-On/issues/47, trick script has problems with multiple frames and found this solution. Thank you