Сам я совсем недавно познакомился с такой возможностью передачи асинхронных запросов в WordPress. Наткнулся в коде какого-то плагина и сперва никак не мог понять, как оно работает.
Но на деле всё оказалось очень удобным.
Тут есть только две вещи, отличающие вордпрессовский ajax-запрос от обычного:
/wp-admin/admin-ajax.php
, однако он уже записан в переменную ajaxurl
— её то мы и будем использовать.action
— что-то вроде идентификатора запроса, чтобы WordPress знал, какая функция должна обрабатывать его.Как-то так:
jQuery.ajax({ type:'POST', url:ajaxurl, data:'action=myaction&input_val=' + my_value, success:function(data){ jQuery('#response').html(data); } });
Или так:
В этом случае в HTML-форму обязательно нужно добавить скрытое поле с параметром action
.
jQuery.ajax({ type:'POST', url:ajaxurl, data:jQuery('#form').serialize(), success:function(data){ jQuery('#response').html(data); } });
<form id="form"> <input type="text" name="input_val" /> <input type="hidden" name="action" value="myaction" /> <button>Отправить</button> </form>
Тут важно учесть только одну деталь — в хуках обязательно должно быть прописано значение параметра action
, в моем примере это myaction
.
А сам код, как обычно — в файл functions.php
:
function true_function(){ update_option('my_settings', esc_attr($_POST['input_val'])); echo 'Привет, значение ' . $_POST['input_val'] . ' сохранено.'; die(); } // wp_ajax_ - только для зарегистрированных пользователей add_action('wp_ajax_myaction', 'true_function'); // wp_ajax_{значение параметра action} // wp_ajax_nopriv_ - только для незарегистрированных, т е для залогиненных он работать не будет (результатом выполнения запроса будет 0) add_action('wp_ajax_nopriv_myaction', 'true_function'); // wp_ajax_nopriv_{значение параметра action}
Предположим, в нашем интернет-магазине прямо-таки дофига товаров и при этом приходится часто изменять их цены. Конечно, в таком случае будет удобнее, если редактируемое поле с ценой будет непосредственно в списке товаров, то есть, чтобы можно было изменять цену, не переходя на страницу редактирования.
На самом деле есть два варианта решения, но мы рассмотрим только тот, который по теме.
Более подробно о колонках в списках постов я писал здесь, кстати, возможно плагин магазина, который вы используете (если используете) уже мог сам надобавлять колонок, тогда вам потребуется лишь немного отредактировать их содержимое.
Вот готовый код для колонок.
Обязательно убедитесь, что тип поста на 16-й строчке кода соответствует вашему (слово product
)!
function true_add_post_columns($my_columns){ $slider = array( 'price' => 'Цена' ); $my_columns = array_slice( $my_columns, 0, 5, true ) + $slider + array_slice( $my_columns, 5, NULL, true ); return $my_columns; } function true_fill_post_columns( $column ) { global $post; switch ( $column ) { case 'price': echo '<input type="text" class="this_price" data-id="' . $post->ID .'" value="' . get_post_meta( $post->ID, '_price', true ) . '" /><p></p>'; break; } } add_filter( 'manage_edit-product_columns', 'true_add_post_columns', 10, 1 ); // manage_edit-{тип поста}_columns add_action( 'manage_posts_custom_column', 'true_fill_post_columns', 10, 1 );
Всталяем этот код в например functions.php
, и у вас должно получиться что-то в этом роде:
По скриншоту виду, что никаких кнопок типа «Сохранить» к полю добавлено не было — на самом деле зачем они нам, если цену можно сохранять автоматически (при снятии фокуса), достаточно лишь кликнуть мышью за пределами поля ввода.
Самый легкий шаг на самом деле, но при этом он очень важен. Итак, сначала нужно создать какой-нибудь пустой js-файл в папке с вашей текущей темой (важно, чтобы он находился в той же папке, что и functions.php
, style.css
). Назовите его как-нибудь, у меня это будет ajax-post-meta.js
.
Теперь в functions.php
добавим:
wp_enqueue_script('jquery'); wp_enqueue_script('ajaxpostmeta', get_stylesheet_directory_uri() . '/ajax-post-meta.js', array('jquery'));
Если до этого шага вы делали всё в точности так, как я описывал, можете вставлять следующий код в ajax-post-meta.js
, не задумываясь:
jQuery(function($){ $('.this_price').blur(function(){ this_price = $(this); $.ajax({ type:'POST', url:ajaxurl, data:'action=updatePrice&price_val=' + this_price.val() + '&product_id=' + this_price.attr('data-id'), beforeSend:function(xhr){ this_price.attr('readonly','readonly').next().html('Сохраняю...'); }, success:function(results){ this_price.removeAttr('readonly').next().html('<span style="color:#0FB10F">Сохранено</span>'); } }); }); });
В functions.php
:
function updatePrice_callback(){ // название не имеет значения, но должно соответствовать названиям в хуках update_post_meta($_POST['product_id'], '_price', esc_attr($_POST['price_val'])); die(); } if( is_admin() ) { add_action('wp_ajax_updatePrice', 'updatePrice_callback'); // wp_ajax_nopriv_ не нужен, так как мы работаем в админке (а в админку не попадают незареганные пользователи) }
Функция is_admin() нужна в данном случае для того, чтобы подключать обработчик только в бэкэнде и не нагружать остальной сайт.
В итоге у вас всё должно получиться, то есть сначала вводим цену в поле, потом щелкаем где-нибудь на странице (например переходим в другое поле), и цена сохраняется.
Михаил, просто слов нет, чтобы передать, как Вы меня выручили! С ajaxurl не была близко знакома. Вот всю неделю пыталась воплотить функцию по выводу редактируемых произвольный полей в админке, столько вариантов перепридумывала.. только себе жизнь усложнила.. в конце-концов доигралась и все цены проставились как одна, сидела правила их всю ночь.
Ваш код - спасение! Немного подкрутила под свои колонки и поля, и теперь, благодаря Вам, моим мучениям с обновлениями цен - конец!
Преклоняюсь :).. теперь я знаю, чем займусь ночами на следующей неделе - буду учить матчасть. Благодарю!
отлично) рад, что смог помочь))
Доброй ночи...
вот и опять я, с вопросом =).
Такая заковыка по аяксу:
есть самописный блок, который передает все значения в одно произвольное поле key . Удалось из массива вытащить цену
застопорилась на том, как засунуть ее обратно =).
Значение меняет, но у всего поля key целиком и почему-то подставляет только первую цифру, а остальное отрубает..
Миш, если не сложно, пожааалуйста, скажи в какую сторону мне копать =)
Доброй ночи)
Сорри за задержку с ответом, наверн проблема уже разрешилась и все же.
Функция array_merge() в помощь, если надо, могу написать пример кода =)
Привет,
array_merge() я смотрела, но так и не нашла как прикрутить. Играет ли роль, что массив там сериализован? Если не затруднит, помочь с кодом, буду рада =).
Привет ещё раз, как-то так:
array_merge() не понадобился, что-то я тупанул вчера:)
Так пробовала, обновляет всё поле. Причем перезаписывает и оставляет только первую цифру.
А сама переменная, переданная в функцию update_post_meta() - корректная?
Блмн, я как-то сталкивался с поддобной проблемой, но уже даже и не помню,
попробуйте перед использованием массива указать, что это массив, вот так:
дает белый экран
Миш, я чувствую, что уже где-то близко, но из-за нехватки знаний никак не выкопаю..
Вот смотри, что пока я напридумывала.
Значение произвольного поля key это сериализованный массив.
Я с помощью принт_р вывожу его в текстовое поле area
Затем в админке произвожу манипуляции в этом поле (меняю допустим цену).
Затем при потере фокуса снова сериализую массив, запихиваю его в input readonly, значение которого передаю уже в update_post_meta по событию blur.
Код такой:
ajax от башки написала.. сейчас пытаюсь дотыкать методом тыка до работоспособного состояния.. может и проще есть выход.. Вся надежда только на тебя 0:-)
так ли это? в базе данных он точно сериализован - но будет ли он сериализован после получения через функцию
get_post_meta()
.Миш, как-то я выводила его в сериализованном виде, через print_r вроде. Но уже не суть важно. Отправила человека к тем кто ему пилил движок с плагом.. можешь удалить мои комменты?
зачем?)
Ну так в них же код не рабочий 😉
ну в них есть же рассуждения, что тоже может быть полезным)
нифига не выходит, всё равно при запросе /wp-admin/admin-ajax.php показывает 0.
1. проверьте, что параметр action совпадает
2. убедитесь, что ваша функция что-нибудь выводит (а не возвращет)
3. в конце функции добавьте
die();
отлично, если б я ещё знал как это делается было бы вообще запипись.
с каким из этих пунктов возникают трудности? я вам постараюсь объяснить в двух словах.
со всеми. я не кодер. а может быть если при запросе /wp-admin/admin-ajax.php показывает 0 то это нормально?
можно тогда взглянуть на вашу функцию?
что значит взглянуть на функцию можно спросить? если нужно просто скопировать код тогда скажите откуда.
хорошо, начнем сначала - вы знаете что такое:
а) php-функция?
б) ajax?
в) jQuery?
приблизительно. функция это функция, аякс это аякс а jQuery библиотека какая то кажется. Михаил, спасибо вам за помощь но в комментах вам вряд ли удастся меня чему то обучить.
ок,
если будут какие-то конкретные вопросы, обращайтесь
у меня вопрос один - при запросе /wp-admin/admin-ajax.php показывает 0. и надо ли что то с этим делать и как?
в самом конце функции вставить
die()
Зачем же вы хук вешаете на wp_ajax_nopriv_...
Это же для незарегистрированных пользователей, вам так кто угодно сможет запросы посылать. В админке нужно вешать только на wp_ajax_...
Спасибо за поправку. Обновлю код в статье.
Функционалом пользовплся этим, но вот всегда была проблема, незалогененым нельзя было пользоваться, только у вас вот увидил хук wp_ajax_nopriv_
Спасибо!
Пожалуйста, рад помочь!
Привет, спасибо за статью, полезный материал
Можно заменить input на textarea чтобы вставлять текст не в 1 строку а в несколько?
Привет, конечно.
В админке всё супер работает, прикрутил для произвольных полей.
Подскажите вот с чем:
Я хочу создать на сайте отдельную страницу и некоторые блоки на ней сделать редактируемыми (contenteditable) только для 1 конкретного пользователя, чтобы он залогинился, перешел на эту страницу и мог её редактировать онлайн, не имея доступа в админку сайта. Наверное правильно будет создать для этого пользователя свою роль.
Подскажите по коду, как это реализовать?
То есть я так понимаю сначала надо проверить роль, если роль совпадает - вывести кнопку "редактировать" на редактируемых блоках. По клику на кнопку вывести модальное окно с формой и прицепить на обработчик формы обновление этого блока.
Может эта идея понравится вам для создания новой записи?)
Если пользователь только 1, то можно по ID )
Спасибо за идею)
Подскажите как поправить ajax запрос и php обработчик?
Благодарю за ответ!
Напишите мне пожалуйста по email или в вк, попробуем разобраться.
Я настроил вывод стобца с произвольным полем в раздел "пользователи" админки:
Заменил update_post_meta на update_user_meta. Не уверен правильно ли я задаю $meta_key.
В итоге скрипт не обрабатывает поле 🙁
Подскажите в чём может быть ошибка?
Решил проблему, это невнимательность.
Правильный name=\"$user_id\" и пара неточностей при выводе самого поля:
Добрый день! Михаил, подскажите, откуда берутся данные вот в этих переменных
Никак не могу сообразить, как мне поменять названия, а то чего-то не срабатывает
Добрый день!
Из запроса AJAX:
Так, тогда поправьте меня, если я не прав. Получаем следующее:
аякс-запрос, забирает из инпута значение поля и его ID, передает через POST в функцию update_post_meta, которая обновляет значение произвольного поля. Правильно?
В целом всё именно так.
Еще вопрос, может все жто не срабатывать если название произвольного поля на кириллице?
Заработало! Не правильно подключал скрипт. Но все равно интересно узнать правильно я алгоритм понял или нет
привет. а как всетаки сделать чтобы на отдельной странице а не в админке можно было вывести такие аджакс блоки?
Привет!
Точно так же, как и в админке, только jQuery не забыть ещё подключить.
в шаблоне страницы добавил:
в functions.php:
подскажи, пожалуйста, какой именно jQuery подключать?
jQuery пожалуйста через хук подключай, подробные примеры тут.
ajax-post-meta.js
можно глянуть?ajax-post-meta.js как у тебя в примере
только наверно нужен не он? в джаваскрипте не силен, поэтому все на уровне скопировал/вставил - получилось/неполучилось
по поводу подключения jQuery не понял, он ведь и так подключен через
Извини, возможно тебе не понравится мой ответ, но пока что тебе нужно просто внимательнее перечитать эта статью и ту, ссылку на которую я дал.
Приветствую, Михаил! Подскажи, с чем связано, что
1. Надо размещать файл с аякс скриптом обязательно там же где и файл функшионс, то бишь в коневой папке темы
2. Ну и подключать не через функцию как положено, а отдельно.
Так-то все работает, по ВП ошибку выдает... http://snap.ashampoo.com/3BapngwE
Привет!
.js
файл? Нет, не обязательно.А wp_enqueue_script() через фильтр подключена?
1. Ты сам написал что обязательно - " (важно, чтобы он находился в той же папке, что и functions.php, style.css)" . Пробовал по другому подключать, тогда не работает
2. Вот именно что когда подключаешь через фильтр, например так
То нифига не срабатывает, а если просто так впихиваешь
То все прекрасно работает, но при этом выдает ошибку, так как скрипт подключен не через фильтр
И кстати, мне почему-то уведомления не приходят...
1. Если расположение файла изменить, то и в функции подключения надо менять путь, только и всего.
2. В HTML код погляди, если не робит через фильтр, то либо
wp_head()
отсутствует, либо где-то косяк.Может в спаме?
Хм, ну с первым понятно, тут чет я тупанул, а вот со вторым все нормально
на месте, да и в нескольких темах проверял, не хочет через фильтр работать...
Не, в спаме точно нету, просто ничего не приходить, попробую другую почту указать
Михаил, категорически приветствую! С наступающим!
У меня как обычно вопрос)))
есть вот такое подключение
и js с ajax
Все очень похоже на код и этой статьи, но при этом скрипт срабатывает, а вот значение поля не изменяется. Не срабатывает функция, уже все проверил, что возможно... Где может быть ошибка, в какую сторону хоть рыть
Приветствую!
Что у вас в переменной results вот тут?
В консоли браузера есть ошибки?
Не, в консоли нет ошибок. А как посмотреть значение переменной?
А можно подробнее про этот момент?
Нажимаю на чек, происходит срабатывание как положено, вроде как сохраняет (сначала Сохраняю, потом Сохранено, на я просто поменял сами фразы). Но значение поля при этом не изменяется, перезапись не происходит.
То ли функция перезаписи не срабатывает, то ли аякс
Вам нужно определить, доходит ли вообще до обработчика, внутри функции
success
посмотрите, чему равенresults
.Однако перед этим в функции PHP перед
die()
добавьте:Как вы поняли, таким образом нужно разбираться, в каком месте ошибка.
Попробую, спасибо. По результатам отпишусь
Буду делать комментарии на Ajax