Обработчик кнопки Like на jQuery. Как можно передать id публикации из php в javascript код?

Question

[Wolfak]

Добрый день. Решил сделать на своем проекте кнопку аналог лайкам вконтакте для публикаций сайта, но сталкнулся с такой проблемой. Как можно передать id публикации из php в javascript код?
Или же как отследить id публикации, которую лайкнул пользователь, чтобы сделать запрос(+1 лайк) в базу данных и обновить счетчик лайков у данной публикации?
Имеется код на PHP с запросом количества лайков к каждой новости, осталось сделать саму кнопку "ставлю лайк". Спасибо.

Comments

[Wolfak]

Я понимаю как можно передать id новости в HTML код. Меня интересует как это значение можно взять из кнопки на которую нажал пользователь и использовать в javascript коде.

[Wolfak]

Как изменить значение числа в DIV блоке не обновляя страницу, а сразу же после нажатия на кнопку "мне нравится"? Спасибо за помощь.

Answer 1

[Николай Васильчук]

Вот пример с jQuery:

<button data-id="1" class="like">Like post 1</button>
<button data-id="2" class="like">Like post 2</button>
<button data-id="3" class="like">Like post 3</button>

var sendLikeRequest = function(id) {
    // Send request to server
};
$(document).on('click', '.like', function(e) {
    e.preventDefault();
    sendLikeRequest($(this).data('id'));
})

Comments

[aen]

Чуть чуть я опоздал :)

[Wolfak]

Благодарю. Очень помогли)

[Wolfak]

Не подскажите, а как можно реализовать обновление счетчика после нажатия на кнопку? Ну в смысле количество нажатий +1.

[Mykola Dzedzinskyi]

@Wolfak очень просто , по такой схеме :

var likesElem = $('здесь селектор счетчика').html(); //как то так
var likesCnt = parseInt(likesElem);
likesCnt++;
likesElem.html(likesCnt);

Answer 2

[Артур Смирнов]

Думаю, id публикации нужно передавать не в javascript, а в верстку. К примеру, можно корневому элементу публикации добавить атрибут data-pub-id=1, где 1 - id публикации. Далее, при нажатии кнопки Like искать корневой элемент лайкнутой публикации и читать атрибут `data-pub-id`.

Comments

[Wolfak]

Как организовать чтение этого id публикации? в этом и проблема.

[Vit]

@Wolfak в обработчике по клику: $(this).attr('data-pub')

Answer 3

[aen]

Кнопка
<button class="superbutton" data-id="0"></button>
Вместо 0 поставьте свой id.

Обработчик

$('.superbutton').on('click', function(e) {
     e.preventDefault();
     var id = $(this).data('id');
    $.post(path/to/action, { id: id }).done(function() {
         //код обработчика удачной отправки
    });
});

path/to/action - урл, куда надо отправить id

Answer 4

[frees2]

Примеры.

<span onclick="ytplayer.loadVideoById(\''.$videoId.'\', 0);history.pushState(null, null, \''.$videoId.'\');return false">

Можно внутри ссылки прописать, то есть и ссылка и значение будет передаваться.

------

<input  type="radio" name=",live5" value=",live5" onclick="openbox('box1');" >

Comments

[aen]

Что?

[frees2]

какую функцию (функции) передать афтар не уточнил, но в лайках лучше сообщить вместо null можно прописать прямо в строку браузера ( спасибо, что лайкнули, чмоке вас, и номер лайка) это к примеру, можно лайки поставить в заголовки - чтобы самого лайка не было

[Mykola Dzedzinskyi]

где button? зачем так усложнять?))

Answer 5

[Evgeniy Golovin]

Можно просто
<a href="#" rel="1">
где rel = и есть ваш ID

Answer 6

[Wolfak]

Я понимаю как можно передать id новости в HTML код. Меня интересует как это значение можно взять из кнопки на которую нажал пользователь и использовать в javascript коде.

Comments

[Mykola Dzedzinskyi]

между элементом кнопки и публикацией должна существовать зависимость , в простейшем случае - если кнопка размещена внутри элемента публикации, тогда, используя функцию $(this).parent('.publication') находите публикацию в которой нужно изменить значение лайков

Answer 7

[Wolfak]

Как изменить значение числа в DIV блоке не обновляя страницу, а сразу же после нажатия на кнопку "мне нравится"? Спасибо за помощь.

Сейчас пытаюсь реализовать вот так

<script type="text/javascript">
var sendLikeRequest = function(id) {
    $.ajax({
    type: "POST",  
    url: "http://blabla/engine/functions/rating.php",  
    data: "text=" + id,
    success: function(html){
	if(html > 0) {
	// Сюда возвращается результат, поставил ли пользователь лайк или убрал его
	}
	}
})
};
$(document).on('click', '.like', function(e) {
    e.preventDefault();
    sendLikeRequest($(this).data('id'));
});
</script>

Comments

[Николай Васильчук]

var counter = $('.like-counter'); // Элемент в котором хранится число
counter.text(counter.text + (html > 0 ? 1 : -1));

А вообще, возвращайте с сервера текущее значение, чтобы не было проблем.

[Wolfak]

@Anonym не правильно поставил вопрос. Простите. Как изменить значение числа в DIV блоке не обновляя страницу, а сразу же после нажатия на кнопку "мне нравится"? Спасибо за помощь.

[Николай Васильчук]

Я вам код и привел

[Wolfak]

@Anonym огромное спасибо. Разобрался)