Как избежать повторной загрузки контента Jquery + Ajax + JSON

от автора

Предисловие

Совсем недавно разрабатывал интернет сервис каталога с подгружаемым контентом.
Задача состояла в том, что каталог должен быть с древовидной структурой, в каждой категории должны быть под категории и при клике на него, товар должен только разворачиваться и подгружаться Ajax’ом, для того что бы товар динамически подгружался дабы сократить объемы загрузки страницы. Для работы Front — End’а доступны были по ТЗ только таковы инструменты Java Script, JQuery, Ajax, JSON и конечно же HTML + CSS.

Разработка

1) Сперва, я создал дерево в HTML и придал ему стилей CSS — создать дерево самому или найти в сети не так уж проблематично.
2) Создание самого механизма.

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script> ...  <script> 	$(document).ready(function() { 		$('.article').click(function(){ 			var articleView = $(this).parent('.Node').find('.article'); 			var viewArticle = $(this).parent('.Node').find('.articleBlock'); 			var url = $(this).attr('data'); 			$.getJSON(url, function(data){ 				$.each(data, function(i, field){ 					var productCount = viewArticle.append('<div class="articleBlocPrice">'+field.price+' руб.</div><div class="articleBlockDote"></div><div class="articleBlockName">'+field.name+'</div><div style="clear:both"></div>'); 				}); 			}); 		}); 	}); 	</script> 

Все стало подгружаться, все заработало, можно было сказать Ура! Но…, при повторном клике подкатегории товар дублировался опять же и лпять же.

3) Доработка механизма

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script> ...  <script> 	<script> 	$(document).ready(function() { 		$('.article').click(function(){ 			var articleView = $(this).parent('.Node').find('.article'); 			var viewArticle = $(this).parent('.Node').find('.articleBlock'); 			var url = $(this).attr('data'); 			$.getJSON(url, function(data){ 				$.each(data, function(i, field){ 					var productCount = viewArticle.append('<div class="articleBlocPrice">'+field.price+' руб.</div><div class="articleBlockDote"></div><div class="articleBlockName">'+field.name+'</div><div style="clear:both"></div>'); 						if ( articleView.attr("data") == productCount ) { 							articleView.removeAttr("data") 							} else { 							articleView.attr("data", productCount); 						} 				}); 			}); 		}); 	}); 	</script> 

Все заработало!
Выкладываю исходник (черновой вариант, не поправлены стили ), рабочий.
Пример

ссылка на оригинал статьи http://habrahabr.ru/post/175631/


Комментарии

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *