Как правильно реализовать пользовательский ajax

Чтобы сохранить логотекст <div class="small-7 medium-4 columns logo"> и меню <nav class="pagedMenu" role="navigation"> , без обрезки на странице обновления или во время загрузки содержимого из страница к другой, я пытаюсь реализовать это решение, сделанное @Buzinas (особая благодарность). Еще несколько слов:

В header.php у нас есть этот скрипт:

 <head> ... <script> function ajax(url, callback, method, params) { if (!method) method = 'GET'; var xhr = new XMLHttpRequest(); xhr.open(method, url); if (callback) xhr.addEventListener('load', function() { callback.call(this, xhr); }); if (params) { params = Object.keys(params).map(function(key) { return encodeURIComponent(key) + '=' + encodeURIComponent(params[key]); }).join('&'); xhr.send(params); } else { xhr.send(); } } // CUSTOM AJAX CONTENT LOADING FUNCTION function ajaxRevslider(obj) { // obj.type : Post Type // obj.id : ID of Content to Load // obj.aspectratio : The Aspect Ratio of the Container / Media // obj.selector : The Container Selector where the Content of Ajax will be injected. It is done via the Essential Grid on Return of Content var content = ""; data = {}; data.action = 'revslider_ajax_call_front'; data.client_action = 'get_slider_html'; data.token = '<?php echo wp_create_nonce("RevSlider_Front"); ?>'; data.type = obj.type; data.id = obj.id; data.aspectratio = obj.aspectratio; // SYNC AJAX REQUEST jQuery.ajax({ type:"post", url:"<?php echo admin_url('admin-ajax.php'); ?>", dataType: 'json', data:data, async:false, success: function(ret, textStatus, XMLHttpRequest) { if(ret.success == true) content = ret.data; }, error: function(e) { console.log(e); } }); // FIRST RETURN THE CONTENT WHEN IT IS LOADED !! return content; }; // CUSTOM AJAX FUNCTION TO REMOVE THE SLIDER function ajaxRemoveRevslider(obj) { return jQuery(obj.selector+" .rev_slider").revkill(); } document.addEventListener('DOMContentLoaded', function() { var main = document.querySelector('div[role=main]'), spinner = document.querySelector('div.sk-spinner'), pages = {}; window.addEventListener('load', function() { toggleSpinner(false); }); function toggleSpinner(b) { spinner.classList[b ? 'remove' : 'add']('hidden'); document.getElementById('wrapper').style.opacity = b ? 0 : 1; } function changePage(url, title) { setTimeout(function() { window.SITE.init(); window.vc_js(); }, 0); history.pushState({ html: main.innerHTML, title: title }, '', url); toggleSpinner(false); } document.getElementById('menu-menu-2').addEventListener('click', function(e) { var el = e.target; if (el.tagName === 'A') { e.preventDefault(); toggleSpinner(true); if (pages[el.href]) { main.innerHTML = ''; main.appendChild(pages[el.href]); changePage(el.href); } else { ajax(el.href, function(xhr) { var frag = document.createRange().createContextualFragment(xhr.responseText); main.innerHTML = '<div>' + frag.querySelector('div[role=main]').innerHTML + '</div>'; //pages[el.href] = main.firstElementChild; var _currentScripts = [].slice.call(document.querySelectorAll('script')); [].forEach.call(frag.querySelectorAll('script'), function(el, i) { if ((el.src === '' && el.parentNode) || el.src.indexOf('slider') >= 0 || el.src.indexOf('Scroll') >= 0 || el.src.indexOf('vendor') >= 0 || el.src.indexOf('composer') >= 0 ) { var s = _currentScripts.filter(function(x) { return x.src === el.src; }); while (s.length) { if (s[0].parentNode) s[0].parentNode.removeChild(s[0]); s.shift(); } document.body.appendChild(el); } }); [].forEach.call(frag.querySelectorAll('style'), function(el, i) { document.querySelector('head').appendChild(el); }); changePage(el.href, frag.querySelector('title').textContent); }); } } }); window.addEventListener('popstate', function(e) { if (e.state) { main.innerHTML = e.state.html; document.title = e.state.title; } }); }); </script> ... </head> . <head> ... <script> function ajax(url, callback, method, params) { if (!method) method = 'GET'; var xhr = new XMLHttpRequest(); xhr.open(method, url); if (callback) xhr.addEventListener('load', function() { callback.call(this, xhr); }); if (params) { params = Object.keys(params).map(function(key) { return encodeURIComponent(key) + '=' + encodeURIComponent(params[key]); }).join('&'); xhr.send(params); } else { xhr.send(); } } // CUSTOM AJAX CONTENT LOADING FUNCTION function ajaxRevslider(obj) { // obj.type : Post Type // obj.id : ID of Content to Load // obj.aspectratio : The Aspect Ratio of the Container / Media // obj.selector : The Container Selector where the Content of Ajax will be injected. It is done via the Essential Grid on Return of Content var content = ""; data = {}; data.action = 'revslider_ajax_call_front'; data.client_action = 'get_slider_html'; data.token = '<?php echo wp_create_nonce("RevSlider_Front"); ?>'; data.type = obj.type; data.id = obj.id; data.aspectratio = obj.aspectratio; // SYNC AJAX REQUEST jQuery.ajax({ type:"post", url:"<?php echo admin_url('admin-ajax.php'); ?>", dataType: 'json', data:data, async:false, success: function(ret, textStatus, XMLHttpRequest) { if(ret.success == true) content = ret.data; }, error: function(e) { console.log(e); } }); // FIRST RETURN THE CONTENT WHEN IT IS LOADED !! return content; }; // CUSTOM AJAX FUNCTION TO REMOVE THE SLIDER function ajaxRemoveRevslider(obj) { return jQuery(obj.selector+" .rev_slider").revkill(); } document.addEventListener('DOMContentLoaded', function() { var main = document.querySelector('div[role=main]'), spinner = document.querySelector('div.sk-spinner'), pages = {}; window.addEventListener('load', function() { toggleSpinner(false); }); function toggleSpinner(b) { spinner.classList[b ? 'remove' : 'add']('hidden'); document.getElementById('wrapper').style.opacity = b ? 0 : 1; } function changePage(url, title) { setTimeout(function() { window.SITE.init(); window.vc_js(); }, 0); history.pushState({ html: main.innerHTML, title: title }, '', url); toggleSpinner(false); } document.getElementById('menu-menu-2').addEventListener('click', function(e) { var el = e.target; if (el.tagName === 'A') { e.preventDefault(); toggleSpinner(true); if (pages[el.href]) { main.innerHTML = ''; main.appendChild(pages[el.href]); changePage(el.href); } else { ajax(el.href, function(xhr) { var frag = document.createRange().createContextualFragment(xhr.responseText); main.innerHTML = '<div>' + frag.querySelector('div[role=main]').innerHTML + '</div>'; //pages[el.href] = main.firstElementChild; var _currentScripts = [].slice.call(document.querySelectorAll('script')); [].forEach.call(frag.querySelectorAll('script'), function(el, i) { if ((el.src === '' && el.parentNode) || el.src.indexOf('slider') >= 0 || el.src.indexOf('Scroll') >= 0 || el.src.indexOf('vendor') >= 0 || el.src.indexOf('composer') >= 0 ) { var s = _currentScripts.filter(function(x) { return x.src === el.src; }); while (s.length) { if (s[0].parentNode) s[0].parentNode.removeChild(s[0]); s.shift(); } document.body.appendChild(el); } }); [].forEach.call(frag.querySelectorAll('style'), function(el, i) { document.querySelector('head').appendChild(el); }); changePage(el.href, frag.querySelector('title').textContent); }); } } }); window.addEventListener('popstate', function(e) { if (e.state) { main.innerHTML = e.state.html; document.title = e.state.title; } }); }); </script> ... </head>

Следующий jquery-ready.js зарегистрирован / установлен в script-calls.php :

 (function($){ var readyList = []; // Store a reference to the original ready method. var originalReadyMethod = jQuery.fn.ready; // Override jQuery.fn.ready jQuery.fn.ready = function(){ var args = [].slice.call(arguments); if(args.length && args.length > 0 && typeof args[0] === 'function') { readyList.push(args[0]); } // Execute the original method. originalReadyMethod.apply( this, args ); }; // Used to trigger all ready events $.triggerReady = function() { $(readyList).each(function(i, el) { try { el.apply(el); } catch(e) { console.log(e); } }); }; })(jQuery);

Кроме того, в page.php я заменил функции get_header() и get_footer() следующим образом:

 <?php if(!isset($_REQUEST['ajax'])){ get_header(); } ?> <?php if (is_page()) { $id = $wp_query->get_queried_object_id(); $sidebar = get_post_meta($id, 'sidebar_set', true); $sidebar_pos = get_post_meta($id, 'sidebar_position', true); } ?> ... <?php if(!isset($_REQUEST['ajax'])){ get_footer(); } ?>

Есть еще некоторые проблемы, связанные с загрузкой страницы с помощью слайдера Revolution или содержимого Visual Composer Parallax, например, на страницах Parallax или About us .

Вы можете использовать эту ссылку и перейти к вышеупомянутым страницам; Тесты выполняются только в Chrome 45.0.2454.101 m 64-bit / Win7, еще не подготовленном для IE, Firefox, мобильных устройств и т. Д.

О поведении: содержимое параллакса верстальщика Rev, будет скремблировано из второго посещения ссылки (страницы « Домой» или « Параллакс» ); Содержимое параллакса Visual Composer (парень на картинке стола, например о нас ) фиксируется при первом посещении ссылки – после того, как F5 будет в порядке;

Меню mynewmenu.js запомнит состояние сеанса , поэтому вам нужно закрыть браузер в другом, чтобы правильно посетить несколько прямых ссылок.

Я получил ответ от команды поддержки слайдера Rev, сказав мне:

Лучшим вариантом для Ajax является простое добавление короткого кода слайдера к обычной странице / сообщению, а затем сценарий «init» слайдера будет автоматически включен в HTML-код слайдера. Затем, когда HTML слайдера удаляется из DOM, все события jQuery также удаляются. Таким образом, все, что вам действительно нужно сделать, это вытащить слайдер в качестве содержимого страницы / сообщения, а затем вам не понадобится какой-либо специальный скрипт для слайдера.

К сожалению, я понятия не имею, как я могу подойти к этому, внедряя вышеупомянутое решение в мое уже принятое решение.

Может быть что-то связано с API (?) Я нашел эти данные на страницах слайдера Revolution / Visual Composer . Есть предположения?

Вероятно, вы должны прочитать:

Вы должны передать переменные PHP в свои файлы javascript, используя wp_localize_script .

Даже если вы этого не сделаете, вам не нужно взламывать шаблоны главной страницы, чтобы обслуживать определенный контент – создайте одноразовую страницу, а затем создайте для нее определенный шаблон . Затем вы можете использовать URL этой страницы в качестве конечной точки ajax.

Но если вам действительно нужно сделать, это запустить короткий код Rev Slider (и Parallax, если он есть), кроме страницы:

В коде (шаблон страницы, functions.php и т. Д.) – https://developer.wordpress.org/reference/functions/do_shortcode/
В виджетах (который ссылается на следующий) – https://digwp.com/2010/03/shortcodes-in-widgets/
В основном везде – http://stephanieleary.com/2010/02/using-shortcodes-everywhere/

Похоже, вы используете WordPress Theme, поэтому прежде чем вы начнете возиться с кодами, вам нужно знать, как изменения будут влиять на веб-сайт.

То, как я создаю сайт PHP, – это мой заголовок, содержащийся в файле PHP и извлекается с использованием

 <?php include('include/header.php'); ?>

Вы используете (PHP) скрипты на стороне сервера для получения информации из базы данных с использованием сценариев на стороне клиента, по крайней мере, так оно и есть. Возможным решением может быть переписать заголовок и переместить скрипт java во внешний файл

Вам нужна помощь в этом? Я думаю, что команда поддержки слайдера революции прибила его заявлениями

просто добавьте короткий код слайдера на обычную страницу / сообщение

а также

все, что вам действительно нужно сделать, это вставить ползунок в качестве содержимого страницы / сообщения

Таким образом, используйте слайдер на странице WordPress / post через короткий код [shortcode]. Затем ссылайтесь на элементы массива $ _GET [] и / или $ _POST [] в php (или javascript, но вы это делаете) по мере необходимости.