Технологія Ajax (Asynchronous JavaScript And XML) дозволяє отримувати дані з сервера без перезавантаження всієї сторінки. Без сумніву, це дуже зручно! Навіть існують спеціальні плагіни (наприклад, AJAX for all), що дозволять кожну сторінку завантажувати з допомогою цієї технології. Тема ж цієї статті – вибіркове застосування Ajax у WordPress: як правильно це зробити?
Основи
На загал, існує три стадії роботи Ajax запиту:
- JavaScript спрацьовує на певну дію користувача (клік мишкою, вибір значення у випадаючому меню і т.д.), створює запит і надсилає його на сервер.
- Сервер (скрипт на сервері) обробляє запит і надсилає інформацію назад.
- Той же JavaScript виводить отриману інформацію.
Важливе значення тут має скрипт на сервері, що обробляє запит. Потрібна зручна і кросс-браузерна бібліотека. На щастя, WordPress використовує саме таку – SACK (Simple Ajax Code-Kit) – і вона вже вбудована у двигунець. Ця бібліотека знаходиться за адресою: wp-admin/admin-ajax.php. Отже, дуже важливо, щоб запит надсилався саме до цього файла!. Інакше, ваш запит взагалі не буде оброблятись двигунцем. Він його просто ігноруватиме.
Починаючи з WordPress версії 2.8 створено новий хук ‘wp_ajax_назва_дії’ і ‘wp_ajax_nopriv_назва_дії’. Перший діє для авторизованих користувачів, другий – для гостей. Дані хуки дозволять вам прив’язати певний Ajax-запит до певної php-функції.
add_action('wp_ajax_назва_дії', 'функція_що_спрацьовує_при_цьому'); add_action('wp_ajax_nopriv_назва_дії', 'функція_що_спрацьовує_при_цьому');
Власне, це основне що потрібно знати для організації правильної роботи Ajax у WordPress для фроент-енд. Далі ще наведу простий приклад для наочності.
Приклад
У нас є випадаюче меню з двома батьківськими категоріями: “новини” та “спорт”. Категорія “новини” немає дочірних категорій, а новина “спорт” – має. При виборі користувачем батьківської категорії “спорт” нижче з’явиться ще одне випадаюче меню, що міститиме дочірні її категорії.
Нижче наведено повний код. Приклад реалізовано на jQuery, отож спершу вам знадобиться долучити дану бібліотеку на веб сторінку. Найшвидше це можна зробити з допомогою сервісу Gogle Code.
Долучаємо бібліотеку jQuery:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>Випадаючі меню:
<select id="category" name="form_cat"> <option style="color:#DFDFDF" value="0" title="Не вибрано" selected="selected">Тип запису</option> <option value="1" title="Новини"> Новини</option> <option value="3" title="Спорт"> Спорт</option> </select> <span id="subcat"></span>
jQuery скрипт – спрацьовує на дію, створює і надсилає запит з допомогою Ajax:
<script> $(document).ready(function() { $('#category').change(function() { // "id" блока випадаючого меню з батьківськими категоріями var main_category = $(this).val(); var send = { // тут знаходяться дані, що надсилаються action: 'my_special_ajax_call', // назва action'a, при якому спрацьовує php catid: main_category // значення перемінної, що треба передати }; if (main_category == 3) { // ID батьківської категорії $.ajax({ url: "http://ваш_сайт/wp-admin/admin-ajax.php", // шлях до бібліотеки Ajax, що оброблятиме запит type: 'POST', // метод надсилання data: send, // дані, що надсилаються dataType: 'html', beforeSend: function() { $('#subcat').html('<img src="http://ваш_сайт/wp-content/themes/ваша_тема/images/loader.gif" alt="loading..." />'); // просте зображення-завантажувач }, success: function(response) { $('#subcat').empty(); $('#subcat').append(response); // "id" блока випадаючого меню з дочірними категоріями } }); return false; } else { $('#subcat').empty(); return false; } }); return false; }); </script>
PHP функція і хуки (повинні міститись у файлі functions.php):
function implement_ajax() { if(isset($_POST['catid'])){ $categories = get_categories('child_of='.$_POST['catid'].'&hide_empty=0'); echo '<select id="subselect" name="form_subcat">'; foreach ($categories as $cat) { $option .= '<option value="'.$cat->term_id.'">'; $option .= $cat->cat_name; $option .= '</option>'; } echo '<option style="color:#DFDFDF" value="0">Категорія спорт</option>'.$option; echo '</select>'; die(); } } add_action('wp_ajax_my_special_ajax_call', 'implement_ajax'); add_action('wp_ajax_nopriv_my_special_ajax_call', 'implement_ajax');



at 13:47
Привіт. Збільши розмір шрифту теми. Незручно читати малі літери.
at 13:58
Знак долара «$» не рекомендовано використовувати, оскільки можуть бути проблеми із іншими скриптами. Бажано використовувати «jQuery» замість знака долара.
Не розумію для чого підвантажувати сторонню бібліотеку jQuery, якщо можна використати її з адмінки. Чи вона не підходить для аяксу?
at 14:11
Так, збільшив.
Ти правий. Але допис не про те, як використовати jQuery у не конфліктному режимі. Неможливо розповісти про всі подібні нюанси. Інакше вийде трактат.
Бібліотеки різняться тільки версіями. Я використовую метод який описав лише для того, щоб бути впевненим у тому, яку саме версію я долучаю.
at 20:00
Помилки у вас в коді явасріпта. Кинулось у очі.
У стрічках
action: ‘my_special_ajax_call’, // назва action’a, при якому спрацьовує php
catid: main_category // значення перемінної, що треба передати
аction та catid мають бути в лапках, так як це ключі об’єкту, а не змінні.
at 20:11
Можливо таке написання не канонічне. Але воно практичне, не викликає помилок і нормально обробляється.