Просмотр полной версии : вывести результат AJAX в div с динамическим ид
voron121
30.05.2016, 11:39
Доброго времени суток.
Пытаюсь реализовать систему рейтинга для статей на сайте. Статьи выводятся в цикле, и для каждой статьи есть своя кнопка "лайк". Делаю все это чудо на связке AJAX+PHP. Т.к статьи выводятся в цикле то что бы не городить дубли одного и того же скрипта на кнопку посадил onClik с вызовом функции, которая должна будет обработать запрос и присвоить рейтинг. Вот сам код:
$(".urlparam").click(function () {
var id = $(this).data('id');
$.ajax({
type: "POST",
url: "/like.php", // Обработчик
data: "id="+id,// Отправляем id
dataType: "html",
cache: false,
success: function(data) {
// Проверяем что ответил нам обработчик, если false значит пользователь уже голосовал. И выводим сообщение.
if (data == 'false')
{
alert('Вы уже голосовали!');
}
else
{
$(".likeborder").html(data); // Если пользователь не голосовал, то помещаем в параграф общее кол-во голосов.
}
}
});
});
переменную id в начале кода получаем из кнопки (передаем ид материала, к которому голосуем). После всех манипуляций скрипт в блоке с классом .likeborder выводит результат. Сам скрипт работает но есесн когда в цикле выводим записи то голосуем за запись номер 1 а рейтинг обновляется у всех потому что у всех у них есть блок с классом .likeborder.
Я думал реализовать данную проблему таким образом : в цикле к каждому классу присвоить ид статьи а в скрипте так же переопределить блок, в котором будет обновляться рейтинг. Но при попытке внести изменения в скрипт :
Было $(".likeborder").html(data); стало $(".likeborder"+id).html(data);
Скрипт не выводит новый рейтинг в блоке с классом likeborder"+id
Дела. alert(); - пишет что ид undefined. На сколько я понимаю ид так и не передался в аякс и не переопределил класс в котором будет выводится результат работы.
Вопрос - как мне передать ид записи и переопределить класс в котором будет выведен результат?
Прошу прощение за быдло-код - я не знаток к сожалению в JS , только начинаю изучать многое.
Dilettante_Pro
30.05.2016, 12:13
voron121,
Покажите пример html с парой статей
voron121
30.05.2016, 12:25
<div class="blog" itemscope="" itemtype="https://schema.org/Blog">
<h2> <span class="subheading-category">Россия</span>
</h2>
<div class="items-row cols-3 row-0 row-fluid clearfix">
<div class="span4">
<div class="item column-1" itemprop="blogPost" itemscope="" itemtype="https://schema.org/BlogPosting">
<iframe height="150" src="//www.youtube.com/embed/G7j7hQPMXOA?rel=0" frameborder="0" allowfullscreen=""></iframe>
<span class="likeborder442">Like-</span>
<a href="#" class="urlparam" data-num="442" data-text="text">Like</a>
<dl class="article-info muted">
<dt class="article-info-term">
Подробности </dt>
<dd class="createdby" itemprop="author" itemscope="" itemtype="https://schema.org/Person">
Автор: <a href="/component/contact/contact/13.html" itemprop="url"><span itemprop="name">Андрей</span></a> </dd>
<dd class="published">
<span class="icon-calendar"></span>
<time datetime="2016-05-24T14:08:13+00:00" itemprop="datePublished">
Опубликовано: 24 мая 2016 </time>
</dd>
</dl>
</div>
<!-- end item -->
</div><!-- end span -->
<div class="span4">
<div class="item column-2" itemprop="blogPost" itemscope="" itemtype="https://schema.org/BlogPosting">
<iframe height="150" src="//www.youtube.com/embed/JmK5oI56dZ4?rel=0" frameborder="0" allowfullscreen=""></iframe>
<span class="likeborder446">Like-</span>
<a href="#" class="urlparam" data-num="446" data-text="text">Like</a>
<dl class="article-info muted">
<dt class="article-info-term">
Подробности </dt>
<dd class="createdby" itemprop="author" itemscope="" itemtype="https://schema.org/Person">
Автор: <a href="/component/contact/contact/17.html" itemprop="url"><span itemprop="name">Vadim Voron</span></a> </dd>
<dd class="published">
<span class="icon-calendar"></span>
<time datetime="2016-05-26T09:49:01+00:00" itemprop="datePublished">
Опубликовано: 26 мая 2016 </time>
</dd>
</dl>
</div>
<!-- end item -->
</div><!-- end span -->
<div class="span4">
<div class="item column-3" itemprop="blogPost" itemscope="" itemtype="https://schema.org/BlogPosting">
<iframe height="150" src="//www.youtube.com/embed/1WhIvHN3Qcg?rel=0" frameborder="0" allowfullscreen=""></iframe>
<span class="likeborder448">Like-</span>
<a href="#" class="urlparam" data-num="448" data-text="text">Like</a>
<dl class="article-info muted">
<dt class="article-info-term">
Подробности </dt>
<dd class="createdby" itemprop="author" itemscope="" itemtype="https://schema.org/Person">
Автор: <a href="/component/contact/contact/19.html" itemprop="url"><span itemprop="name">test6</span></a> </dd>
<dd class="published">
<span class="icon-calendar"></span>
<time datetime="2016-05-27T18:00:54+00:00" itemprop="datePublished">
Опубликовано: 27 мая 2016 </time>
</dd>
</dl>
</div>
<!-- end item -->
</div><!-- end span -->
</div><!-- end row -->
<div class="items-row cols-3 row-1 row-fluid clearfix">
<div class="span4">
<div class="item column-1" itemprop="blogPost" itemscope="" itemtype="https://schema.org/BlogPosting">
<iframe height="150" src="//www.youtube.com/embed/hWYvJ6nHeGM?rel=0" frameborder="0" allowfullscreen=""></iframe>
<span class="likeborder444">Like-</span>
<a href="#" class="urlparam" data-num="444" data-text="text">Like</a>
<dl class="article-info muted">
<dt class="article-info-term">
Подробности </dt>
<dd class="createdby" itemprop="author" itemscope="" itemtype="https://schema.org/Person">
Автор: <a href="/component/contact/contact/15.html" itemprop="url"><span itemprop="name">Тестовый пользователь 2 </span></a> </dd>
<dd class="published">
<span class="icon-calendar"></span>
<time datetime="2016-05-24T14:14:33+00:00" itemprop="datePublished">
Опубликовано: 24 мая 2016 </time>
</dd>
</dl>
</div>
<!-- end item -->
</div><!-- end span -->
<div class="span4">
<div class="item column-2" itemprop="blogPost" itemscope="" itemtype="https://schema.org/BlogPosting">
<iframe height="150" src="//www.youtube.com/embed/JmK5oI56dZ4?rel=0" frameborder="0" allowfullscreen=""></iframe>
<span class="likeborder447">Like-</span>
<a href="#" class="urlparam" data-num="447" data-text="text">Like</a>
<dl class="article-info muted">
<dt class="article-info-term">
Подробности </dt>
<dd class="createdby" itemprop="author" itemscope="" itemtype="https://schema.org/Person">
Автор: <a href="/component/contact/contact/18.html" itemprop="url"><span itemprop="name">Test5</span></a> </dd>
<dd class="published">
<span class="icon-calendar"></span>
<time datetime="2016-05-27T17:40:45+00:00" itemprop="datePublished">
Опубликовано: 27 мая 2016 </time>
</dd>
</dl>
</div>
<!-- end item -->
</div><!-- end span -->
</div><!-- end row -->
</div>
voron121
30.05.2016, 12:26
вместо текста статей у меня выводится видео с youtube
DynkanMaclaud
30.05.2016, 12:53
voron121,
оформите нормально ваш HTML код...или вы считаете что ЭТО читабельно?
voron121
30.05.2016, 13:27
<span class="likeborder1">Like-</span>
<a href="#" class="urlparam" data-num="1" data-text="text">Like</a>
<span class="likeborder2">Like-</span>
<a href="#" class="urlparam" data-num="2" data-text="text">Like</a>
<span class="likeborder3">Like-</span>
<a href="#" class="urlparam" data-num="3" data-text="text">Like</a>
....
по сути это весь HTML который участвует в работе скрипта (остальное не имеет значения)
атрибут из ссылки идет в переменную id самого скрипта . И я пытаюсь получив id в скрипте присвоить вывод информации в див с классом likeborder + id.
voron121,
Где у Вас у .urlparam атрибут data-id ?
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ru" lang="ru" dir="ltr">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf8" />
<title>Untitled</title>
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script type="text/javascript">
$(".urlparam").on("click",function () {
var id = $(this).data('num');
$.ajax({
type: "POST",
url: "/like.php",
data: {id:id},
dataType: "html",
cache: false,
success: function(data) {
if (data == 'false') {
alert('Вы уже голосовали!');
} else {
$(".likeborder"+id).html(data);
}
}
});
});
</script>
</head>
<body>
<span class="likeborder1">Like-</span>
<a href="#" class="urlparam" data-num="1" data-text="text">Like</a>
<span class="likeborder2">Like-</span>
<a href="#" class="urlparam" data-num="2" data-text="text">Like</a>
<span class="likeborder3">Like-</span>
<a href="#" class="urlparam" data-num="3" data-text="text">Like</a>
</body>
vBulletin® v3.6.7, Copyright ©2000-2025, Jelsoft Enterprises Ltd. Перевод: zCarot