Javascript-форум (https://javascript.ru/forum/)
-   Элементы интерфейса (https://javascript.ru/forum/dom-window/)
-   -   вывод информации в всплывающем окне (https://javascript.ru/forum/dom-window/67510-vyvod-informacii-v-vsplyvayushhem-okne.html)

la-la land 21.02.2017 16:55

вывод информации в всплывающем окне
 
Код выводит картинку, пол, имя, фамилию каждого человека из json файла на др сайте через get ajax. Надо сделать при клике на блок с персонажем вывод подробной информации, которая хранится там же, а именно, город штат, картинку побольше. строки 22-28 клик и вывод есть, а связать с инфой ajax запроса не знаю как. наставьте на путь истинный)
window.onload = function() {
	var output = document.body;
	var ajaxhttp = new XMLHttpRequest();
	var url = "https://api.randomuser.me/1.0/?results=50&nat=gb,us&inc=gender,name,location,email,phone,picture";
	
	function createItem(picSrc, title, first, last) {
		var div = document.createElement('div');
		div.innerHTML = '<div class="user-block"><div class="user-block-img"><img src="' + picSrc + '" /></div><ul class="user-block-list"><li>' + title + '</li><li>' + first + '</li><li>' + last + '</li></ul></div>';
		return div;		
	}
	
	ajaxhttp.open("GET", url, true);
	ajaxhttp.setRequestHeader("content-type", "application/json");
	ajaxhttp.onreadystatechange = function() {
		if (ajaxhttp.readyState == 4 && ajaxhttp.status == 200) {
			var jcontent = JSON.parse(ajaxhttp.responseText);
			var listWrapper = document.createElement('div');			
			jcontent.results.forEach(function (userJSON) {
				listWrapper.appendChild(createItem(userJSON.picture.medium, userJSON.name.title, userJSON.name.first, userJSON.name.last));
			});
			document.body.appendChild(listWrapper);
			var userBlocks = document.getElementsByClassName('user-block');
				for (var i = 0; i < userBlocks.length; i++) {
				userBlocks[i].onclick = function()
				{
				alert ('hello');	
				}
			}
		}
	}
	ajaxhttp.send(null);
}

рони 21.02.2017 21:19

la-la land,
проще в строке 20 надо ставить клик , а цикл 22-28 убрать

la-la land 22.02.2017 10:06

Rise,
для работы для вида сделал пока alert, или что туда зарядить? нужно при клике на каждый блок с инфой выводить всплывающее окно, что по идее и происходит, просто вывод нужен какой-то посерьёзнее чем alert, либо реализовать клик по блокам как-то иначе
для наглядности, временно запилил сюда pilinni.ru

la-la land 22.02.2017 10:12

рони,
как ещё можно реализовать клик по блокам?
и вообще вывод всплывающего с изорбражением из ajax запроса с привязкой к блоку? т.e. более подробную информацию по пользователю

рони 22.02.2017 10:20

la-la land,
а про сортировку вам в задании ничего не говорили?

la-la land 22.02.2017 10:44

рони,
есть такое задание:D

рони 22.02.2017 10:55

la-la land,
в прошлый раз это было решено так - через делегирование - в контейнер помещался блок user__content содержаший мини и макси инфо -- клик по контейнеру открывал блок макси если клик был по мини.

рони 22.02.2017 10:57

la-la land,
можно решить иначе блок макси формировать только по запросу (клику по мини) используя индекс .

рони 22.02.2017 11:04

la-la land,

la-la land 22.02.2017 11:58

ооо, дельная мысль про мини макси, рони, спасибо!
вот только визуально я и так представляю что должно получиться)
а вот какие операторы функции методы использовать пока не догоняю, скажите лучше что почитать?


Часовой пояс GMT +3, время: 13:31.