ajax — ploshadka.net

Svelte — кнопка автообновления

Admin — Sun, 10 Jan 2021 08:00:00 +0000

Пример кнопки с отчетом таймера на Svelte, после или в течении которого происходит какое-нибудь событие. Это событие обновляет страницу или подтягивает данные аяксом без обновления.

В примере ниже, по кнопке запустить обновления, запускаются обновления и счетчик отчитывается до 0, после которого снова будет запущено обновление. И т.д. пока не отключить.

Первичное подключение функций svelte не связанных с таймером, но завязанных на нём: аякс запросы, которые подтягиваются на страницу.

Непосредственно функции таймера в Svelte:

let varSetInterval,
varSetTimeout,
timer = '-',
status = 'ВЫКЛ';

function setTimer() {
timer = 60;
status = 'ВКЛ';
document.cookie = 'svelteLiveUpdate=1';

varSetInterval = setInterval(() => {
if (timer > 0) timer--;
}, 1000);

varSetTimeout = setTimeout(function () {
// Запускаем обновление по окончанию таймера
getUpdatedDate();

// Сбрасывает таймер
clearInterval(varSetInterval);
clearTimeout(varSetTimeout);
setTimer();
}, 60000);
}

if (getCookie("svelteLiveUpdate") === '1') {
setTimer();
}

let stop = false;

function clickLiveReload() {
if (getCookie("svelteLiveUpdate") === '1') {
// Запускаем обновление при нажатии кнопки
if (!stop) {
getUpdatedDate();
stop = true;
}

document.cookie = 'svelteLiveUpdate=0';
clearInterval(varSetInterval);
clearTimeout(varSetTimeout);
timer = '-';
status = 'ВЫКЛ';
return;
}

setTimer();
}
script>

Таблица на скрине. Здесь при клике на кнопку срабатывает функция clickLiveReload из кода выше. Она же запускает обновление, сохраняет куки и включает/выключает таймер на svelte.

<div class="table table-links">
<div class="body">
<div class="item link center" on:click={clickLiveReload}>
{#if timer === '-'}
class="cell">Обновить и запустить автообновление</dic>
{:else}
class="cell">Обновится через {timer} секунд</dic>
{/if}
</div>

{#await updatedAtPortfolio}
{:then updatedAtPortfolio}
<div class="item">
<div class="cell name">Портфель:</div>
<div class="cell date center">{updatedAtPortfolio}</div>
</div>
{/await}

{#await updatedAtPriceInPortfolio}
{:then updatedAtPriceInPortfolio}
<div class="item">
<div class="cell name">Тек. цены в портфеле:</div>
<div class="cell date center">{updatedAtPriceInPortfolio}</div>
</div>
{/await}

{#await updatedAtOperations}
{:then updatedAtOperations}
<div class="item">
<div class="cell name">Все операции:</div>
<div class="cell date center">{updatedAtOperations}</div>
</div>
{/await}

{#await updatedAtPrices}
{:then updatedAtPrices}
<div class="item">
<div class="cell name">Цены на {nameOfShare}:</div>
<div class="cell date center">{updatedAtPrices}</div>
</div>
{/await}
</div>
</div>

Варианты выхода из скрипта php для ответа в ajax

Admin — Wed, 24 Jun 2020 08:00:00 +0000

Пример функции выхода из метода PHP для отправки ответа на ajax.

Допустим есть метод:

public function ajaxGetSomething() {}

В нём что-то делается и нам нужно выйти из него включив шаблон HMTL или просто передать значение. Например, так:

include __DIR__ . '/get.php';
die();

Казалось бы, на js нам достаточно будет проверить ответ на то, что ответ не пустой.

jQuery.ajax({
method : 'post',
dataType: 'json',
url : ajax.ajaxurl,
data : {
action : 'some_action',
},
success : function (response) {

if (response.length !== 0) {

} else {

}
});

Однако иногда такое приводит к ошибке.

die() или die(0), может вернуть не пустоту или 0, а строку с несколькими пустыми символами в первом случае и строку с несколькими пустыми символами и нулем в другом.

Можно конечно поставить в die(‘end’) или die(0) и проверить в js на соответствие через поиск:

response.indexOf('end')

Но это больше похоже костыль. Лучше поступить иначе и написать в методе php выход следующего рода:

$response['success'] = 'success';
$response['message'] = 'один из вариантов сообщения';

ob_start();
include __DIR__ . '/get.php';
$response['content'] = ob_get_clean();

echo json_encode($response);
die();

Тогда на стороне JS мы можем проверить есть ли в ответе статус success. И если он присутствует, то вывести одно, а в его отсутствии другое.

if (response.success) {

div1.innerHTML = response.content;
div2.innerHTML = response.message;

}

CSS анимация на JS ajax

Admin — Fri, 19 Jun 2020 08:00:00 +0000

Простой пример анимации на css.

Примеры анимации можно найти здесь:
https://daneden.github.io/animate.css/

Ниже пример, как сделать одну из любой анимации оттуда или вообще, чтобы все работало.

HTML

Контейнер message нужен для обрамления анимации, чтобы внутри него можно было с ней делать, что душе захочется.

js-message — класс, за который будем цепляться в JS.

animated pulse — классы, которые описывают саму анимацию.

И еще у нас будет класс hidden, который буде вешаться и убираться через JS. Это создаст анимацию в уже присутствующих классах.

SCSS

.message {
margin: 10px 0;
text-align: center;
color: maroon;
position: relative;

// Обязательно для анимации!
display: block;

.animated {
position: absolute;
width: 100%;
top: 0px;

animation-duration: 3s;
animation-fill-mode: both;
}

.pulse {
-webkit-animation-name: pulse;
animation-name: pulse;
}

@keyframes pulse {
from {
-webkit-transform: scale3d(1, 1, 1);
transform: scale3d(1, 1, 1);
}

50% {
-webkit-transform: scale3d(1.05, 1.05, 1.05);
transform: scale3d(1.05, 1.05, 1.05);
}

to {
-webkit-transform: scale3d(1, 1, 1);
transform: scale3d(1, 1, 1);
}
}
}

JS

Пример функции отправки в wordpress jquery ajax запроса на бэк. Анимация будет появляться при получении ответа с бэка.

Функцию максимально упростил, оставил самое нужное для наглядности.

Класс hidden мы навешиваем при нажатии на ссылку. А снимаем после прихода ответа. Тем самым происходит анимация.

+function increase() {
let link = document.querySelector('.js-link');

if (!link) {
return;
}

let message = document.querySelector('.js-message'),
stop = false;

link.addEventListener('click', function (e) {
if (stop) {
return;
}

let current = e.target,
currentClass = current.classList.contains('js-link');

if (!currentClass) {
return;
}

message.classList.add('hidden');

jQuery.ajax({
method : 'post',
dataType: 'json',
url : ajax.ajaxurl,
data : {
action: 'increase',
},
success : function () {
message.classList.remove('hidden');
stop = true;
}
});
});
}();

Как работает ajax в wordpress

Admin — Wed, 05 Jun 2019 08:00:53 +0000

Краткое описание и пример работы ajax в wordpress.

Определяем переменную ajaxurl для frontend:

add_action('wp_enqueue_scripts', function(){
wp_localize_script(
'ploshadka',
'ajax',
['ajaxurl' => admin_url('admin-ajax.php')]
);
});

Экшены вызова PHP функции из JS:

add_action('wp_ajax_name_action', 'actionFunctionPloshadka');
add_action('wp_ajax_nopriv_name_action', 'actionFunctionPloshadka');

Функция JS:

jQuery.ajax({
type: 'post',
url: ajax.ajaxurl,
data: {
action: 'name_action',
name: nameVar;
},
success: function (success) {
}
});

Вызываемая из ajax PHP функция:

public static function actionFunctionPloshadka()
{
}

Определение ошибок на ajax

Admin — Mon, 02 Jul 2018 10:41:02 +0000

Как посмотреть какие ошибки показывается, когда ajax не выполняется правильным образом.

Одна из причин почему на WordPress может не работать ajax, это когда он не разрешен незарегистрированным пользователям. Он будет вызвать ошибку 400 Bad Request.

jQuery

Для jQuery ошибки можно увидеть так:

error: function( xhr, textStatus ) {
alert( [ xhr.status, textStatus ] );
},

или так:

error: function (e) {
console.log(e);
},

JavaScript

if(request.readyState === 4) {
if(request.status === 200) {
} else {
console.log(''Произошла ошибка при запросе: ' + request.status + ' ' + request.statusText);
}
}

Как вариант, можно посмотреть что именно выводится

if(request.readyState === 4) {
if(request.status === 200) {
} else {
console.log('Произошла ошибка при запросе: ' + request.responseText);
}
}