javascript – Why are the contents of all my tabs loading initially?-ThrowExceptions

Exception or error:

Hello we are using WP All Import, Advanced Custom Fields Pro, Auto Listings Plugin and finally the di 360 image plugin. I have 4 tabs and the issue is that they all load at the same time. On the 3rd tab (360_tab) we have a 360 degree interior image which we pull from another server via wp all import which has been placed in our theme as shortcode from advanced custom fields and then also in our child functions.php file, problem is when you click on the 360 tab the canvas box displays, but the image does not and displays blank, so we need to load and fire this content as soon as the 360 tab is clicked. When for example you click on the fullscreen icon to view the 360 degree image then it only displays, or when you open developer tools.

tab currently on click

The html code

<ul class="tabs al-tabs" role="tablist">
                            <li class="details_tab active" id="tab-title-details" role="tab" aria-controls="tab-details">
                    <a href="#tab-details">
                        Details                 </a>
                </li>
                            <li class="specifications_tab" id="tab-title-specifications" role="tab" aria-controls="tab-specifications">
                    <a href="#tab-specifications">
                        Specifications                  </a>
                </li>
                            <li class="360_tab" id="tab-title-360" role="tab" aria-controls="tab-360">
                    <a href="#tab-360">
                        360° Interior View                  </a>
                </li>
                            <li class="finance_tab" id="tab-title-finance" role="tab" aria-controls="tab-finance">
                    <a href="#tab-finance">
                        Finance Calculator                  </a>
                </li>
                    </ul>

The 360.php code

<?php
/**
 * 360 degree interior tab
 *
 * This template can be overridden by copying it to yourtheme/listings/single-listing/tabs/details.php.
 *
 * @package Auto Listings.
 */

if ( ! defined( 'ABSPATH' ) ) {
    exit; // Exit if accessed directly.
}



$heading = apply_filters( 'auto_listings_details_heading', __( '360° Interior View', 'auto-listings' ) );

?>
<?php echo get_image_360(); ?>

Our functions.php in child theme

function get_image_360() {
//Get the value from the field
$image_360 = get_field( 'image_360'); // with field set to return URL
// Pass it to the 360 plugin shortcode 
return do_shortcode("[dimage url='$image_360' control=true]");

}

The js code

/**
 * Tabs
 */
function auto_listings_tabs() {

    $( 'body' ).on( 'init', '.al-tabs-wrapper, .auto-listings-tabs', function() {

            $( '.al-tab, .auto-listings-tabs .panel:not(.panel .panel)' ).hide();

            var $tabs = $( this ).find( '.al-tabs, ul.tabs' ).first();

            $tabs.find( 'li:first a' ).click();

            // show reset password tab
            if( $('.al-tab').hasClass('resetpass') ) {
                $tabs.find( 'li:last a' ).click();
            }

        } )
        .on( 'click', '.al-tabs li a, ul.tabs li a', function( e ) {

            e.preventDefault();
            var $tab          = $( this );
            var $tabs_wrapper = $tab.closest( '.al-tabs-wrapper, .auto-listings-tabs' );
            var $tabs         = $tabs_wrapper.find( '.al-tabs, ul.tabs' );

            $tabs.find( 'li' ).removeClass( 'active' );
            $tabs_wrapper.find( '.al-tab, .panel:not(.panel .panel)' ).hide();

            $tab.closest( 'li' ).addClass( 'active' );
            $tabs_wrapper.find( $tab.attr( 'href' ) ).show();
        } );

    // Init Tabs
    $( '.al-tabs-wrapper, .auto-listings-tabs' ).trigger( 'init' );

}
How to solve:

Leave a Reply

Your email address will not be published. Required fields are marked *