Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 21.02.2017, 16:55
Новичок на форуме
Отправить личное сообщение для la-la land Посмотреть профиль Найти все сообщения от la-la land
 
Регистрация: 21.02.2017
Сообщений: 6

вывод информации в всплывающем окне
Код выводит картинку, пол, имя, фамилию каждого человека из 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);
}

Последний раз редактировалось la-la land, 21.02.2017 в 17:19.
Ответить с цитированием
  #2 (permalink)  
Старый 21.02.2017, 21:19
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,120

la-la land,
проще в строке 20 надо ставить клик , а цикл 22-28 убрать
Ответить с цитированием
  #3 (permalink)  
Старый 22.02.2017, 10:06
Новичок на форуме
Отправить личное сообщение для la-la land Посмотреть профиль Найти все сообщения от la-la land
 
Регистрация: 21.02.2017
Сообщений: 6

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

Последний раз редактировалось la-la land, 22.02.2017 в 10:11.
Ответить с цитированием
  #4 (permalink)  
Старый 22.02.2017, 10:12
Новичок на форуме
Отправить личное сообщение для la-la land Посмотреть профиль Найти все сообщения от la-la land
 
Регистрация: 21.02.2017
Сообщений: 6

рони,
как ещё можно реализовать клик по блокам?
и вообще вывод всплывающего с изорбражением из ajax запроса с привязкой к блоку? т.e. более подробную информацию по пользователю
Ответить с цитированием
  #5 (permalink)  
Старый 22.02.2017, 10:20
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,120

la-la land,
а про сортировку вам в задании ничего не говорили?
Ответить с цитированием
  #6 (permalink)  
Старый 22.02.2017, 10:44
Новичок на форуме
Отправить личное сообщение для la-la land Посмотреть профиль Найти все сообщения от la-la land
 
Регистрация: 21.02.2017
Сообщений: 6

рони,
есть такое задание
Ответить с цитированием
  #7 (permalink)  
Старый 22.02.2017, 10:55
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,120

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

Последний раз редактировалось рони, 22.02.2017 в 10:58.
Ответить с цитированием
  #8 (permalink)  
Старый 22.02.2017, 10:57
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,120

la-la land,
можно решить иначе блок макси формировать только по запросу (клику по мини) используя индекс .
Ответить с цитированием
  #9 (permalink)  
Старый 22.02.2017, 11:04
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,120

la-la land,
Ответить с цитированием
  #10 (permalink)  
Старый 22.02.2017, 11:58
Новичок на форуме
Отправить личное сообщение для la-la land Посмотреть профиль Найти все сообщения от la-la land
 
Регистрация: 21.02.2017
Сообщений: 6

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



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

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


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Вывод контента в модалном окне, чтобы к нему можно было обратиться по ссылке decadent42 jQuery 3 11.04.2016 15:12
Галереи во всплывающем окне olaf-a Элементы интерфейса 31 24.06.2013 09:59
вывод данных в новом окне MasterHrust Javascript под браузер 9 27.09.2011 14:32
В всплывающем окне opener равен undefined alerion Events/DOM/Window 0 24.03.2010 21:32
открыть файл во всплывающем окне zerg Общие вопросы Javascript 3 07.03.2009 22:00