Не работает замена контента с ajax
-
Помогите разобраться, почему не работает подгрузка/замены постов с помощью Ajax без перезагрузки страницы при нажатии на ссылки.
Я создал шаблон для страницы помощи и справки пользователей. Возможно он покажется немного корявым:<?php /* Template Name: Помощь и Справка */ get_header(); the_post(); ?> <main> <script src="http://code.jquery.com/jquery-3.3.1.js"></script> <-- Стили для меню --> <style type="text/css"> /* Стили колонок */ .left_column { float: left; width: 33.3333%; } .right_column { float: left; width: 66.6667%; } /* // Стили колонок */ body { font-size: 100%; } a { text-decoration: none; } ul, ul ul { margin: 0; padding: 0; list-style: none; } ol > li, ul > li { padding: 0px 0px; } /* CSS для главного меню */ #wrapper { width: 370px; font-size: 1.3em; } .menu { width: auto; height: auto; -webkit-box-shadow: 0px 1px 3px 0px rgba(0,0,0,.73), 0px 0px 18px 0px rgba(0,0,0,.13); -moz-box-shadow: 0px 1px 3px 0px rgba(0,0,0,.73), 0px 0px 18px 0px rgba(0,0,0,.13); box-shadow: 0px 1px 3px 0px rgba(0,0,0,.73), 0px 0px 18px 0px rgba(0,0,0,.13); } .menu > li > a { background-color: #616975; background-image: -webkit-gradient(linear, left top, left bottom, from(rgb(114, 122, 134)),to(rgb(80, 88, 100))); background-image: -webkit-linear-gradient(top, rgb(114, 122, 134), rgb(80, 88, 100)); background-image: -moz-linear-gradient(top, rgb(114, 122, 134), rgb(80, 88, 100)); background-image: -o-linear-gradient(top, rgb(114, 122, 134), rgb(80, 88, 100)); background-image: -ms-linear-gradient(top, rgb(114, 122, 134), rgb(80, 88, 100)); background-image: linear-gradient(top, rgb(114, 122, 134), rgb(80, 88, 100)); filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,StartColorStr='#727a86', EndColorStr='#505864'); border-bottom: 1px solid #33373d; -webkit-box-shadow: inset 0px 1px 0px 0px #878e98; -moz-box-shadow: inset 0px 1px 0px 0px #878e98; box-shadow: inset 0px 1px 0px 0px #878e98; width: 100%; height: 2.75em; line-height: 2.75em; text-indent: 2.75em; display: block; position: relative; font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; font-weight: 600; color: #fff; text-shadow: 0px 1px 0px rgba(0,0,0,.5); } /* CSS для подменю */ .menu ul li a { background: #fff; border-bottom: 1px solid #efeff0; width: 100%; height: 2.75em; line-height: 2.75em; text-indent: 2.75em; display: block; position: relative; font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; /*font-size: 0.923em;*/ font-weight: 400; color: #878d95; } .menu ul li:last-child a { border-bottom: 1px solid #33373d; } /* Наведение и активный стиль */ .menu > li > a:hover, .menu > li > a.active { background-color: #35afe3; background-image: -webkit-gradient(linear, left top, left bottom, from(rgb(69, 199, 235)),to(rgb(38, 152, 219))); background-image: -webkit-linear-gradient(top, rgb(69, 199, 235), rgb(38, 152, 219)); background-image: -moz-linear-gradient(top, rgb(69, 199, 235), rgb(38, 152, 219)); background-image: -o-linear-gradient(top, rgb(69, 199, 235), rgb(38, 152, 219)); background-image: -ms-linear-gradient(top, rgb(69, 199, 235), rgb(38, 152, 219)); background-image: linear-gradient(top, rgb(69, 199, 235), rgb(38, 152, 219)); filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,StartColorStr='#45c7eb', EndColorStr='#2698db'); border-bottom: 1px solid #103c56; -webkit-box-shadow: inset 0px 1px 0px 0px #6ad2ef; -moz-box-shadow: inset 0px 1px 0px 0px #6ad2ef; box-shadow: inset 0px 1px 0px 0px #6ad2ef; } .menu > li > a.active { border-bottom: 1px solid #1a638f; } /* Нумерация главного меню */ .menu > li > a span { font-size: 0.857em; display: inline-block; position: absolute; right: 1em; top: 50%; background: #48515c; line-height: 1em; height: 1.7em; width: 3em; padding: .4em .6em; margin: -.8em 0 0 0; color: #fff; text-indent: 0; text-align: center; -webkit-border-radius: .769em; -moz-border-radius: .769em; border-radius: .769em; -webkit-box-shadow: inset 0px 1px 3px 0px rgba(0, 0, 0, .26), 0px 1px 0px 0px rgba(255, 255, 255, .15); -moz-box-shadow: inset 0px 1px 3px 0px rgba(0, 0, 0, .26), 0px 1px 0px 0px rgba(255, 255, 255, .15); box-shadow: inset 0px 1px 3px 0px rgba(0, 0, 0, .26), 0px 1px 0px 0px rgba(255, 255, 255, .15); text-shadow: 0px 1px 0px rgba(0,0,0,.5); font-weight: 500; } .menu > li > a:hover span, .menu > li a.active span { background: #2173a1; } /* Стрелки */ .menu > li > ul li a:before { content: '▶'; font-size: 8px; color: #bcbcbf; position: absolute; width: 1em; height: 1em; top: 0; left: -2.7em; } .menu > li > ul li:hover a, .menu > li > ul li:hover a:before { color: #32373D; } </style> <-- // Стили для меню --> <body> <div class="container"> <?php the_content(); ?> <!-- Левая колонка --> <div class="left_column"> <div id="wrapper"> <!-- Меню для смены контента --> <ul class="menu"> <li class="item1"><a href="#">Примеры меню <span>3</span></a> <ul> <li class="subitem1"><a href=""><span class="link-aj" data-id="1882">Как пользоваться сайтом?</span></a></li> <li class="subitem2"><a href="#"><span class="link-aj" data-id="1883">Почему Ваш аккаунт могут заблокировать?</span></a></li> <li class="subitem3"><a href="#"><span class="link-aj" data-id="1884">Правила пользования сайтом</span></a></li> </ul> </li> <li class="item2"><a href="#">Примеры меню <span>3</span></a> <ul> <li class="subitem1"><a href="#"><span class="link-aj" data-id="1885">Пример 1</span></a></li> <li class="subitem2"><a href="#"><span class="link-aj" data-id="1886">Пример 2</span></a></li> <li class="subitem3"><a href="#"><span class="link-aj" data-id="1887">Пример 3</span></a></li> </ul> </li> </ul> </div> </div> <!-- // Левая колонка --> <!-- Контентная колонка --> <div class="right_column"><span class="result"></span> </div> <!-- // Контентная колонка --> <!-- Скрипт для меню --> <script type="text/javascript"> $(function() { var menu_ul = $('.menu > li > ul'), menu_a = $('.menu > li > a'); menu_ul.hide(); menu_a.click(function(e) { e.preventDefault(); if(!$(this).hasClass('active')) { menu_a.removeClass('active'); menu_ul.filter(':visible').slideUp('normal'); $(this).addClass('active').next().stop(true,true).slideDown('normal'); } else { $(this).removeClass('active'); $(this).next().stop(true,true).slideUp('normal'); } }); }); </script> <!-- Скрипт для контента--> <script type="text/javascript"> jQuery(document).ready(function($){ $('body').on('click', '.link-aj', function(){ i = $(this).data('id'); $.ajax({ type: 'post', url: "/wp-admin/admin-ajax.php", data: { action: 'my_aj', 'id':i, }, success: function(html){ $('.result').html(html); }, }) }); }); </script> </div> </body> </main> <?php get_footer(); ?>
Опишу код шаблона по порядку.
Сначала я подключаю шапку, тут же сделал стили для меню, потом создал меню в виде списка и расположил слева (это сделал в стилях), справа сделал div для контента, дальше прописал скрипт для меню и ниже скрипт для самого контента.
В самих ссылках указаны класс link-aj и идентификатор data-id нужного поста/записи, контент которого нужно загрузить в контентную колонку с классом result.
В коде всё подписано, если поймете где что.
В файле темы functions.php я прописал вот такой обработчик:<?php function func_my_aj() { echo $_POST['id']; die(); } add_action('wp_ajax_my_aj', 'func_my_aj'); add_action('wp_ajax_nopriv_my_aj', 'func_my_aj'); ?>
Потом в Вордпресс создал страницу и в качестве шаблона указал этот. Но при нажатии на ссылки ничего не работает, не могу понять почему. Подскажите, что не так? Может быть я не туда код вставил, или есть какие-то ошибки, или нужно его как-то изменить/дополнить?
В итоге мне нужно, чтобы по нажатию ссылки контент заменялся на контент, соответствующий id этой ссылки и поста. Нужно, чтобы страница не перезагружалась, но в поисковой строке менялся URL (слаг) этого поста. Ну и, если вас не затруднит, подскажите, какой код дописать для сохранения истории, чтобы можно было пользователю вернуться назад или вперед после перехода по ссылкам (наверно при помощиhistory.pushState()
илиhistory.replaceState()
). Также было бы неплохо, если бы контент сменялся не резко, а более менее плавно, чтобы пользователь заметил, что что-то изменилось на странице.Заранее большое спасибо!
- Тема «Не работает замена контента с ajax» закрыта для новых ответов.