Войтиmode_comment Новости и общениеmode_comment Интернет технологииmode_comment Уголок геймераmode_comment Реклама и торговляmode_comment Клуб журналистовmode_comment Скрипты и дизайны
group Люди
assignment О проектеalternate_email Для связи
Форум
arrow_upward Наверх
keyboard_arrow_right Форум
messageГильдия мастеров | Доработать AJAX ответ скрипта
Striptacit Музыка 22 Фев в 18:54
Всем привет))
Такой вопрос: есть скрипт типа лайков на ajax нажал на кнопку


<div class="likes" style="display: inline-block;">
<span data-id="'.$a['id'].'" class="liker" style="display: inline-block;">
<span class="like" style="margin-top: 0px; margin-left: 0px; font-size: 15px;">
<i class="fa fa-heart" style="color: '.$cvet.';" aria-hidden="true"></i>
<span class="counter">
<span style="color:#000000;">'.$like.'
</span>
</span>
</span>
</span>
</div>


Скрипт AJAX:

<script>
$(document).ready(function() {
$(".liker").bind("click", function() {
var link = $(this);
var id = link.data('id');//отлавливаем номер data атрибута
$.ajax({
url: "/ajax/like.photo.php",
type: "POST",
data: {id:id}, // Передаем ай-ди поста(или еще чего то)
dataType: "json",
success: function(result) {
if (!result.error){ // ловим ошибки

$(".fa-heart",link).css({color: result.color});// метим лайк как нибудь
$('.counter',link).html(result.count); //выводим результат
}else{
alert(result.message);
}
}
});
});
});
</script>
Striptacit Музыка 22 Фев в 18:58
Ну и собстна PHP:

// если не голосовал добавляешь запись +1 рейт
if (!$cnt['like']) {
$db-> query("INSERT INTO `photo_like` SET `post`='".$id."', `user`='".$user['id']."', `ocenka` = '1'");
$result = [
'error' => false,
'count' => $cnt['likes']+1,
'color' => '#EF5350',
];
header('Content-Type: text/json; charset=utf-8');
echo json_encode($result);
} else {
// если голосовал удаляешь -1 рейт
$db-> query("DELETE FROM `photo_like` WHERE `post`= '".$id."' AND `user`= '".$user['id']."'");
$result = [
'error' => false,
'count' => $cnt['likes']-1,
'color' => '#475472',
];
header('Content-Type: text/json; charset=utf-8');
echo json_encode($result);
}
} else {
header('Content-Type: text/json; charset=utf-8');
echo json_encode(['error' => true, 'message' => 'Ошибка']);
}

Вот как должно работать
naprognoze.ru/user.files/...103214_photo.jpg
Как выглядит кнопка до нажатия и потом

naprognoze.ru/user.files/...875249_photo.jpg

Только тест еще добавить "Подписаться" и "Отписаться"
----
Отредактировано
DenSBK 22 Фев в 22:34
По мне так проще сделать 2 класса в css например like и dislike
И после того как прошла обработка скриптом допустим в строку $result добавить пункт 'css' => 'like' и так же с 'css' => 'dislike'
И так же с помощью AJAX менять нужный див.
DenSBK 22 Фев в 22:35
Когда то делал такое. Нашел кусок кода.

// type - тип голоса. Лайк или дизлайк
// element - кнопка, по которой кликнули
function like(post,set){
$('#count'+post).html('<img align="middle" alt="loading" src="/images/loading.gif">');
$.ajax({
type: "POST",
url: "/sys/json/like_diary.php",
data:'id='+post,
dataType: "json",
success: function(data){
if(data.result == 'like'){
$('#likes'+post).addClass('active');
$('#count'+post).html(data.count);
if(set=='members'){
show('like',''+post);
}
}else if(data.result == 'dislike'){
$('#likes'+post).removeClass('active');
$('#count'+post).html(data.count);
if(set=='members'){
show('like',''+post);
}
} else if(data.result == 'error'){
$('#likes'+post).html(data.msg);
}
}
});
}
DenSBK 22 Фев в 22:39
Файл обработчика like_diary.php

// получение данных
if(isset($_POST['id']))$diary['id']= intval($_POST['id']);
else $diary['id']= 0;

if (mysql_result(mysql_query("SELECT COUNT(*) FROM `diary` WHERE `id` = '$diary[id]' LIMIT 1"),0)==0){
$error = ':(';
echo json_encode(array('result' => 'error', 'msg' => $error));
}

if(!isset($error)){
if (mysql_result(mysql_query("SELECT COUNT(*) FROM `diary_like` WHERE `id_user` = '$user[id]' AND `id_diary` = '$diary[id]' LIMIT 1"),0)==0){
mysql_query("INSERT INTO `diary_like` (`id_user`, `id_diary`) VALUES ('$user[id]', '$diary[id]')") or die(mysql_error());
mysql_query("UPDATE `diary` SET `like`= `like` + 1 WHERE `id` = '$diary[id]'") or die(mysql_error());
$diary=mysql_fetch_array(mysql_query("SELECT * FROM `diary` WHERE `id` = '$diary[id]' LIMIT 1"));

echo json_encode(array('result' => 'like', 'count'=> ''.$diary['like'].''));
} elseif (mysql_result(mysql_query("SELECT COUNT(*) FROM `diary_like` WHERE `id_user` = '$user[id]' AND `id_diary` = '$diary[id]' LIMIT 1"),0)!=0){
mysql_query("DELETE FROM `diary_like` WHERE `id_user` = '$user[id]' AND `id_diary` = '$diary[id]' LIMIT 1") or die(mysql_error());
mysql_query("UPDATE `diary` SET `like`= `like` - 1 WHERE `id` = '$diary[id]'") or die(mysql_error());
$diary=mysql_fetch_array(mysql_query("SELECT * FROM `diary` WHERE `id` = '$diary[id]' LIMIT 1"));

echo json_encode(array('result' => 'dislike', 'count'=> ''.$diary['like'].''));
}
}

// Устанавливаем заголовок ответа в формате json
header('Content-Type: text/json; charset=utf-8');
DenSBK 22 Фев в 22:40
CSS

.like .i_like {
background: url(img/post_buttons.png) no-repeat;
padding: 0 14px 0 0;
margin: 0;
}
.like .i_like {
background-position: 0 center;
}

.like.active .i_like{
background-position: -14px center;
}

.like .i_like {
margin: 0 4px 0 0;
}
DenSBK 22 Фев в 22:43
Нe и сам код на странице php

if (mysql_result(mysql_query("SELECT COUNT(*) FROM `diary_like` WHERE `id_user` = '$user[id]' AND `id_diary` = '$post[id]' LIMIT 1"),0)!=0) $div = 'active '; else $div = '';
echo "<a class='user_link' href='/diary/view/?id=$post[id]#form'><img src='/images/icons/comm.png'> Обсудить [".mysql_result(mysql_query("SELECT COUNT(*) FROM `diary_komm` WHERE `id_diary` = '$post[id]'"),0)."]</a>n";
echo '<a href="/diary/view/?id='.$post['id'].'" id="likes'.$post['id'].'" onclick="like('.$post['id'].');return false;" class="user_link like '.$div.'right"><i class="i_like"></i><b id="count'.$post['id'].'">'.$post['like'].'</b></a>';

Это тебе как пример для размышления)
----
Отредактировано
Striptacit Музыка 23 Фев в 0:36
DenSBK , Спасибо поковыряю
Войдите под своим ником, чтобы писать в темах

Генерация: 0.058 сек
Statok.net