Вход

Просмотр полной версии : вывести результат 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.

Alex_63
30.05.2016, 18:46
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>