Чтобы сохранить логотип <div class="small-7 medium-4 columns logo"> и меню <nav class="pagedMenu" role="navigation">, без обрезки на странице обновления или во время загрузки содержимого со страницы на другую, я пытаюсь реализовать это решение, сделанное @Buzinas (особая благодарность). В несколько более слов:Как правильно реализовать пользовательский ajax
В 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>
Следующая 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 или Визуальная Composer содержание параллакса, как у нас на параллакса или О нас страниц, например.
Вы можете найти use this link и перейти на указанные страницы; Тесты выполняются только в Chrome 45.0.2454.101 m 64-bit/Win7, еще не подготовленном для IE, Firefox, мобильных устройств и т. Д.
О поведении: Rev слайдер параллакс содержания, станет омлетом со вторым посещением связи (Home или Parallax страниц); Содержимое параллакса Visual Composer (парень на картинке рабочего стола, ), например, на странице) фиксируется при первом посещении ссылки - после того, как F5 будет в порядке;
В меню mynewmenu.js будет отображаться состояние на сессии, поэтому вам нужно закрыть браузер в другом, чтобы правильно посетить несколько прямых ссылок.
Я получил ответ от Rev команды поддержки слайдера говорил мне:
Лучший вариант для Ajax является просто добавить шорткод ползунка к обычной страницы/сообщение, а затем «INIT» сценарий ползунка будет автоматически включаться в HTML-код слайдера. Затем, когда HTML слайдера удаляется из DOM, все события jQuery также удаляются. Таким образом, все, что вам действительно нужно сделать, это вытащить слайдер в качестве содержимого страницы/сообщения, а затем вам не понадобится какой-либо специальный скрипт для слайдера.
К сожалению, я понятия не имею, как я могу подходить к этому, внедряя вышеуказанное предложение в уже полученное решение.
Может быть что-то связанное с API (?) Я нашел эти данные на Revolution slider/Visual Composer страницах. Есть предположения?
@Patel эй там, извините Ф.О. r поздний ответ; на самом деле, вопрос, который, я думаю, довольно ясен, возможно, неясно, принимая во внимание предмет: не обижайтесь. Вы пользователь/разработчик Wordpress? То, что я пытаюсь достичь, - это полностью функциональный ajax, интегрирующий слайдер Revolution и плагины Visual Composer в эту вещь; Во всяком случае, я попытаюсь [применить это] (http://stackoverflow.com/a/32928023/4642215) в нескольких, надеюсь, что у вас будет достаточно времени; может быть правильным ответом. Спасибо за Ваш интерес. –
Это было бы легче отладить, если вы отделите свои проблемы. JavaScript не должен находиться в файле PHP. Используйте PHP-файл для рендеринга динамического HTML, а затем используйте файл JavaScript для управления этим. – freak3dot
@ freak3dot привет, я могу это сделать, это не проблема. Я переместил последовательность js в файл _wp-content/themes/notio-wp/assets/js/buzinas.js_, а также в этот момент файл зарегистрирован/заключен в _script-calls.php_. –