Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 30.05.2016, 11:39
Новичок на форуме
Отправить личное сообщение для voron121 Посмотреть профиль Найти все сообщения от voron121
 
Регистрация: 09.11.2013
Сообщений: 6

вывести результат AJAX в div с динамическим ид
Доброго времени суток.

Пытаюсь реализовать систему рейтинга для статей на сайте. Статьи выводятся в цикле, и для каждой статьи есть своя кнопка "лайк". Делаю все это чудо на связке 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 , только начинаю изучать многое.
Ответить с цитированием
  #2 (permalink)  
Старый 30.05.2016, 12:13
Профессор
Отправить личное сообщение для Dilettante_Pro Посмотреть профиль Найти все сообщения от Dilettante_Pro
 
Регистрация: 27.11.2015
Сообщений: 2,899

voron121,
Покажите пример html с парой статей
Ответить с цитированием
  #3 (permalink)  
Старый 30.05.2016, 12:25
Новичок на форуме
Отправить личное сообщение для voron121 Посмотреть профиль Найти все сообщения от voron121
 
Регистрация: 09.11.2013
Сообщений: 6

<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>
Ответить с цитированием
  #4 (permalink)  
Старый 30.05.2016, 12:26
Новичок на форуме
Отправить личное сообщение для voron121 Посмотреть профиль Найти все сообщения от voron121
 
Регистрация: 09.11.2013
Сообщений: 6

вместо текста статей у меня выводится видео с youtube
Ответить с цитированием
  #5 (permalink)  
Старый 30.05.2016, 12:53
Аватар для DynkanMaclaud
Профессор
Отправить личное сообщение для DynkanMaclaud Посмотреть профиль Найти все сообщения от DynkanMaclaud
 
Регистрация: 08.08.2014
Сообщений: 261

voron121,
оформите нормально ваш HTML код...или вы считаете что ЭТО читабельно?
Ответить с цитированием
  #6 (permalink)  
Старый 30.05.2016, 13:27
Новичок на форуме
Отправить личное сообщение для voron121 Посмотреть профиль Найти все сообщения от voron121
 
Регистрация: 09.11.2013
Сообщений: 6

<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.
Ответить с цитированием
  #7 (permalink)  
Старый 30.05.2016, 18:46
Аспирант
Отправить личное сообщение для Alex_63 Посмотреть профиль Найти все сообщения от Alex_63
 
Регистрация: 22.08.2015
Сообщений: 71

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>
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
сохранить результат ajax в переменную Raz0r jQuery 3 14.08.2014 16:27
Почему результат Ajax запроса - Исходный код страницы pro_xaoc AJAX и COMET 4 23.11.2011 10:03
Не получается обработать результат AJAX Delovoy AJAX и COMET 3 25.03.2011 16:39
Подскажите, пжлст, как вывести в тот же документ результат ф-ции? LexXxeL Элементы интерфейса 4 13.05.2009 13:26
Неверный результат в AJAX с получением HTML Raynor AJAX и COMET 3 17.12.2008 18:38