jQuery jGrowl динамическое уведомление ajax из php файла

Question

jQuery jGrowl динамическое уведомление ajax из php файла

У меня есть jQuery jGrowl, загруженный в мою тему, и я могу отобразить уведомление, как это:

jQuery.jGrowl('This is a notification', { life: 10000});

Тем не менее, у меня есть функция, которая перезагружается каждые 30 секунд, и я поместил в нее уведомление jGrow следующим образом:

setInterval(function() {
jQuery.jGrowl('This is a notification', { life: 10000});
}, 30000);

Я хочу, чтобы уведомления динамически основывались на том, какую информацию php-файл отправляет обратно. Файл php возвращает список новых сообщений, и я хочу, чтобы jGrowl отображал уведомление для каждого из этих новых сообщений. Не уверен, что лучший способ получить php-файл для вывода данных, чтобы jGrowl мог понять это, и как это можно сделать.

Любые предложения будут великолепны.

Спасибо

0

ajax jgrowl jquery php

Решение

Другие решения

Других решений пока нет …

Источник

Accepted Answer

Вам нужно использовать что-то вроде метода $ .ajax () jQuery для опроса конечной точки с вашими данными. Я предлагаю вернуть его в формате JSON, а затем перебрать его и передать в качестве сообщения методу $ .jGrowl.

Вы можете попробовать что-то вроде следующего примера:

index.html

<!doctype>
<html>
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery-jgrowl/1.4.3/jquery.jgrowl.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-jgrowl/1.4.3/jquery.jgrowl.min.js"></script>
<script>
$(function(){
$('form').submit(function(e){
e.preventDefault();

$.ajax({
type: 'get',
url: $('form').attr('action'),
data: $('form').serialize(),
success: function() {
$('input[type=text]').val('');
}
});
});

setInterval(function(){
$.ajax({
dataType: 'json',
url: 'messages.php',
success: function(messages) {
$.each(messages, function(message){
$.jGrowl('This is a notification', { life: 10000});
});
}
});
}, 5000);
});
</script>
<body>
<form method="get" action="addMessage.php">
<input type="text" name="message" placeholder="New message" />
<input type="submit"/>
</form>
</body>
</html>

addMessage.php

<?php
session_start();
if (!isset($_SESSION['messages'])) {
$_SESSION['messages'] = array();
}
if (isset($_GET['message']) && !empty($_GET['message'])) {
$_SESSION['messages'][] = strip_tags($_GET['message']);
}
print json_encode($_SESSION['messages']);

messages.php

<?php
session_start();
if (!isset($_SESSION['messages'])) {
$_SESSION['messages'] = array();
}
print json_encode($_SESSION['messages']);

Я не рекомендую использовать это в работе, вы захотите улучшить работу по контролю и очистке ваших сообщений, но это должно дать вам общее представление о том, как опрашивать сообщения и передавать их в jGrowl.

0