ПРОБЛЕМА

Я создал этот сайт wordpress, который использует тему чат-бота от QuantumCloud. Я хотел настроить навигацию по страницам сайта для более плавного взаимодействия с пользователем и чтобы чат-бот сайта не прерывался при навигации пользователя по сайту. Метод, который я использовал для реализации функций ajax, был взят из этого руководства (я покажу свой код ниже), и решение в основном работает, но с некоторыми проблемами. А именно, div с содержимым, который я выбрал для динамической загрузки страницы, как только его содержимое заменяется вызовом .load (), многие, если не все обработчики и прослушиватели JS, прикрепленные к элементам в этой области содержимого, прерываются. Это, по-видимому, также включает определенные стили, которые, как я предполагаю, прикреплены к определенным элементам с помощью JS.

Воспроизведение проблемы и наблюдение за симптомами

При первоначальной загрузке strangequark.games все отображается и работает правильно. Теперь нажмите «О нас», а затем вернитесь в раздел «Главная страница». DIV с плавающим содержимым заменяется динамически загружаемым содержимым при переходе на эти страницы, поэтому вы не будете обновлять страницу . Но вы заметите, что там, где на фоновых изображениях на главной странице были эффекты параллакса и добавлено некоторое размытие, теперь нет рабочего параллакса или размытия. Вы также заметите, что

цвет текста серый, а не белый, где раньше он был белым. Кроме того, пространство между миниатюрами изображений сообщений и заголовками/описаниями сообщений теперь находится далеко от того места, где раньше это было разумно. И вы также заметите, что активный пункт меню застревает в положении наведения курсора мыши до тех пор, пока страница не будет нажата после вызова .load (). Более того, если вы перейдете на страницу «О программе» (новая загрузка), а затем нажмете «Главная», чтобы динамически загружать содержимое домашней страницы без обновления страницы, вы увидите, что цвета заголовка домашней страницы теперь изменились с правильного розового на синий. Вторичная проблема, которую вы, возможно, заметили, заключается в том, что при навигации по страницам новое содержимое отображается в .div с плавающим содержимым сразу, а затем немного после ajax-вертушки и анимации непрозрачности на .включается div с плавающим содержимым, и это заставляет его мигать. Другими словами, новый контент отображается, затем тускнеет с помощью spinner, затем снова отображается, где на самом деле он должен просто тускнеть с помощью spinner, а затем отображаться. Мне нужен способ заставить анимацию ajax spinner запускаться быстрее, либо непосредственно перед изменением содержимого, либо в момент его изменения. Это те проблемы, которые я в настоящее время пытаюсь решить.

What’s Been Tried?

I’m combing through the DOM before and after page load events to see if I can catch changes that clue me into things that I might be able to restore to the page using additional logic in my ajax script, or that just might clue me into where breakage is happening, or where styles have gone missing from certain elements. I’m also searching online for ways to refresh JS handlers following an AJAX page load as well as preventing them from breaking to begin with. I know about event delegation, and I tried greppping through all the JS files in the parent theme for instances of .click or .on, etc. to see where I might be able to modify the event delegation, but I wasn’t able to find any cases of that. And I’ve tried to use the following function to reload certain JS files in hopes of refreshing handlers:

 function reloadScript() {
    $( "#elementor-pro-frontend-js" ).remove();
    $.getScript( "/wp-content/plugins/elementor-pro/assets/js/frontend.min.js", function() {
        $( "script:last" ).attr( "id", "elementor-pro-frontend-js" );
    } );
}
 

And then I call the reloadScript() function within the .load() function so that the script gets reloaded after the AJAX content loading. It’s possible that if I keep testing that function with different loaded JS files, I’ll come across a desirable change. But with the JS files I’ve tested so far, this attempt at a solution doesn’t appear to be going anywhere.

THE SETUP

In the parent theme (/wp-content/themes/chatbot-theme), I inserted the following code into the assistent_scripts() function within functions.php in order to register my ajax scripts with the wordpress site:

 if ( ! is_admin() ) {
        $url = get_stylesheet_directory_uri() . '/assets/js/';
        wp_enqueue_script( "hash-change", "{$url}jquery.ba-hashchange.min.js", array( "jquery" ), '', true );
        wp_enqueue_script( "ajaxify-chatbot-theme", "{$url}ajaxify-chatbot-theme.js", array( "hash-change" ), '', true );
    }
 

In the child theme (/wp-content/themes/chatbot-theme-child), I setup assets/js directory with the following files pointed to in the above code:

1. jquery.ba-hashchange.min.js
   I made one modification to this script for compatibility with later versions of jQuery. I changed «$.browser.msie» to «$.support.msie» in that script
2. ajaxify-chatbot-theme.js

 jQuery( function( $ ) {
    var $mainContent = $( ".floating-content" ),
        siteUrl = "https://"   top.location.host.toString(),
        url = '',
        $ajaxSpinner = $( ".loader" ),
        $allLinks = $( 'a' );

    $( document ).delegate( "a[href^='"   siteUrl   "']:not([href*='/wp-admin/']):not([href*='/wp-login.php']):not([href$='/feed/'])", "click", function() {
        location.hash = this.pathname;
        return false;
    } );

    $( ".search-field" ).submit( function( e ) {
        location.hash = "?s="   $( ".search-field" ).val();
        e.preventDefault();
    } );

    $( window ).bind( "hashchange", function() {
        url = window.location.hash.substring( 1 );
        var finalUrl = '';

        if ( !url ) {
            return;
        }

        if ( url == '/' ) {
            finalUrl = url   " .floating-content .elementor.elementor-159";
        } else {
            finalUrl = url   " .floating-content #primary";
        }

        $mainContent.load( finalUrl, function() {
            $ajaxSpinner.fadeIn();
            $mainContent.animate( { opacity: '0' } );
            history.replaceState( null, null, url );

            if ( url == "/about-us/" ) {
                $( "body" ).removeClass().addClass( "page-template-default page page-id-84 custom-background wp-custom-logo theme-chatbot-theme woocommerce-js elementor-default elementor-kit-10 elementor-page elementor-page-84 e--ua-blink e--ua-chrome e--ua-webkit" );
            } else if ( url == "/blog/" ) {
                $( "body" ).removeClass().addClass( "blog custom-background wp-custom-logo theme-chatbot-theme woocommerce-js hfeed elementor-default elementor-kit-10 e--ua-blink e--ua-chrome e--ua-webkit" );
            } else if ( url == "/contact/" ) {
                $( "body" ).removeClass().addClass( "page-template-default page page-id-55 custom-background wp-custom-logo theme-chatbot-theme woocommerce-js elementor-default elementor-kit-10 elementor-page elementor-page-55 e--ua-blink e--ua-chrome e--ua-webkit" );
            } else if ( url == "/" ) {
                $( "body" ).removeClass().addClass( "home page-template page-template-elementor_header_footer page page-id-159 custom-background wp-custom-logo theme-chatbot-theme woocommerce-js elementor-default elementor-template-full-width elementor-kit-10 elementor-page elementor-page-159 e--ua-blink e--ua-chrome e--ua-webkit" );
            } else if ( url.indexOf( "/?s=" ) >= 0 ) {
                $( "body" ).removeClass().addClass( "search search-results custom-background wp-custom-logo theme-chatbot-theme woocommerce-js hfeed elementor-default elementor-kit-10 e--ua-blink e--ua-chrome e--ua-webkit" );
            } else {
                $( "body" ).removeClass().addClass( "post-template-default single single-post postid-628 single-format-standard custom-background wp-custom-logo theme-chatbot-theme woocommerce-js elementor-default elementor-kit-10 e--ua-blink e--ua-chrome e--ua-webkit" );
            }

            $mainContent.animate( { opacity: '1' } );
            $ajaxSpinner.fadeOut();
        } );
    } );

    $( window ).trigger( "hashchange" );
} );

 

Краткие сведения

Итак, повторю, что мой код AJAX выполняет то, что динамическая загрузка страницы работает, и мне пришлось добавить немного логики для изменения классов для тега тела в зависимости от просматриваемой страницы, чтобы восстановить некоторые стили, которые изначально были нарушены после реализации этого решения, но некоторые стили все еще ломаются после события .load (), и некоторые JS, похоже, также ломаются, а сам процесс .load() имеет заметную задержку с анимацией изменения содержимого. Любая помощь была бы очень признательна.