Динамическая подгрузка данных по событию. Как реализовать?

KimIV · Сообщение **KimIV** » 09.02.2016 11:47

Делаю форму регистрации. Там выбор стран и выбор регионов. Хочу, чтобы список регионов наполнялся после выбора страны.

В качестве идеального ответа на мой вопрос вижу ссылку на реально работающее расширение, в котором реализовано динамическое наполнение второго <select> после выбора одного из <option> в первом <select>.

Спасибо!

Сообщение **Sheer** » 09.02.2016 14:40

Поиск в гугле: связанные списки

KimIV · Сообщение **KimIV** » 09.02.2016 14:43

Sheer, в яндексе я нашёл и уже делаю... но хотелось бы пример в виде расширения. Тут же не голые php и JS, а всё с какими-то своими обвёртками.

Отправлено спустя 1 минуту 24 секунды:
Я имею в виду, что может уже всё написано и классы соответствующие есть...

LavIgor · Сообщение **LavIgor** » 09.02.2016 17:27

KimIV, быстрый ответ QuickReply Reloaded основан на подгрузке данных через Ajax и может являться примером для старта.

KimIV · Сообщение **KimIV** » 09.02.2016 17:39

LavIgor, спасибо! Как раз его и смотрю. И ещё спасибки которое раздаёт. Там тоже AJAX применяется.

KEMnEP · Сообщение **KEMnEP** » 09.02.2016 21:50

Даже в videobbredy есть кросдоменная подгрузка данных методом гет, но это так к слову. А вообще первое что выдал гугл http://webersoft.ru/select-ajax-mysql/ и имхо подробней некуда.

KimIV · Сообщение **KimIV** » 10.02.2016 6:27

KEMnEP писал(а): А вообще первое что выдал гугл

Там тоже пример приведён в виде отдельного php-файла. И он не работает, когда серверную сторону начинаешь заворачивать в класс. В частности вот этот код print json_encode($result); возвращает "Cannon modify header information - headers already sent by (здесь указание на контроллер, в котором вышеуказанный код)"

Алг · Сообщение **Алг** » 10.02.2016 9:04

QuickLanguage с выбранной опцией перевода постов. Под каждым постом генерируется комбо с одним селектом(язык по умолчанию). Нажатие на комбо( первое) инициирует эджекс-запрос, который возвращает список возможных для перевода языков и заполняет все комбобоксы

KEMnEP · Сообщение **KEMnEP** » 10.02.2016 9:53

KimIV,

Код: Выделить всё

<script type="text/javascript">
/*! Chained 1.0.0 - MIT license - Copyright 2010-2014 Mika Tuupola */
!function(a,b){"use strict";a.fn.chained=function(c){return this.each(function(){function d(){var d=!0,g=a("option:selected",e).val();a(e).html(f.html());var h="";a(c).each(function(){var c=a("option:selected",this).val();c&&(h.length>0&&(h+=b.Zepto?"\\\\":"\\"),h+=c)});var i;i=a.isArray(c)?a(c[0]).first():a(c).first();var j=a("option:selected",i).val();a("option",e).each(function(){a(this).hasClass(h)&&a(this).val()===g?(a(this).prop("selected",!0),d=!1):a(this).hasClass(h)||a(this).hasClass(j)||""===a(this).val()||a(this).remove()}),1===a("option",e).size()&&""===a(e).val()?a(e).prop("disabled",!0):a(e).prop("disabled",!1),d&&a(e).trigger("change")}var e=this,f=a(e).clone();a(c).each(function(){a(this).bind("change",function(){d()}),a("option:selected",this).length||a("option",this).first().attr("selected","selected"),d()})})},a.fn.chainedTo=a.fn.chained,a.fn.chained.defaults={}}(window.jQuery||window.Zepto,window,document);
</script>

+ Не надо нечего сторонего, не пхп не базы данных, чистый джиквери плагин.
Здесь по русски http://awesome-design.com/stati/javascr ... ectes.html (кривая русификация, файл скрипта взять из оригинала, или из кода приведённого мной выше)
Оригинал http://www.appelsiini.net/projects/chained
упд, проверенно, работает

Отправлено спустя 8 минут 45 секунд:
готовый пример из коробки

Код: Выделить всё

<html>
<head>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript">
/*! Chained 1.0.0 - MIT license - Copyright 2010-2014 Mika Tuupola */
!function(a,b){"use strict";a.fn.chained=function(c){return this.each(function(){function d(){var d=!0,g=a("option:selected",e).val();a(e).html(f.html());var h="";a(c).each(function(){var c=a("option:selected",this).val();c&&(h.length>0&&(h+=b.Zepto?"\\\\":"\\"),h+=c)});var i;i=a.isArray(c)?a(c[0]).first():a(c).first();var j=a("option:selected",i).val();a("option",e).each(function(){a(this).hasClass(h)&&a(this).val()===g?(a(this).prop("selected",!0),d=!1):a(this).hasClass(h)||a(this).hasClass(j)||""===a(this).val()||a(this).remove()}),1===a("option",e).size()&&""===a(e).val()?a(e).prop("disabled",!0):a(e).prop("disabled",!1),d&&a(e).trigger("change")}var e=this,f=a(e).clone();a(c).each(function(){a(this).bind("change",function(){d()}),a("option:selected",this).length||a("option",this).first().attr("selected","selected"),d()})})},a.fn.chainedTo=a.fn.chained,a.fn.chained.defaults={}}(window.jQuery||window.Zepto,window,document);
</script>
</head>
<body>
<select id="categories">
  <option value="">Какие статьи мы можем Вам предложить?</option>
  <option value="php-snippets" class="programming">PHP snippets</option>
  <option value="php-oop" class="programming">PHP ООП</option>
  <option value="php-work-with-images" class="programming">PHP и изображения</option>
</select>
<select id="articles">
  <option value="">Статьи</option>
  <option value="what-is-snippets" class="php-snippets">PHP - что такое snippets?</option>
  <option value="snippets-web-sites" class="php-snippets">PHP snippets - ресурсы?</option>
  <option value="php5-whats-new" class="php-oop">PHP 5 - что нового?</option>
  <option value="php-code-templates" class="php-oop">PHP - шаблоны проектрирования</option>
  <option value="php-uploading-images" class="php-work-with-images">PHP - загружаем изображения</option>
  <option value="php-images-and-watermarks" class="php-work-with-images">PHP - размещаем watermark</option>
</select>
<script type="text/javascript">
jQuery(document).ready(function(){
	jQuery("#articles").chained("#categories");
});
</script>
</body>
</html>

KimIV · Сообщение **KimIV** » 10.02.2016 12:47

Ещё вопрос возник такого рода. Почему-то интернет изобилует примерами на основе XMLHTTP-объекта. Например, вот типовая функция его создания:

Код: Выделить всё

function getXmlHttp() {
	var xmlhttp;
	try {
		xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");
	} catch (e) {
		try {
			xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
		} catch (E) {
			xmlhttp = false;
		}
	}
	if (!xmlhttp && typeof XMLHttpRequest!='undefined') {
		xmlhttp = new XMLHttpRequest();
	}
	return xmlhttp;
}

А в расширениях для phpBB3.1 применяется конструкция вида:

Код: Выделить всё

$.ajax({
	type: "POST",
	url: url,
	data: { ........... },
	success: function (data) { ........... },
	error: function ( .............) {
		alert(...........);
	}
});

Чем плох объект XMLHTTP? С совместимостью с браузерами проблема? На мобильных не будет работать или что ещё?

LavIgor · Сообщение **LavIgor** » 10.02.2016 12:56

KimIV писал(а): Чем плох объект XMLHTTP?

Тем, что он устарел.
Эта функция, скорее всего, просто раньше появилась.

Алг · Сообщение **Алг** » 10.02.2016 13:40

KimIV писал(а): Чем плох объект XMLHTTP

объект называется XMLHttpRequest и он не устарел. Поддерживается всеми современными браузерами и ИЕ, начиная с 10-й версии. Просто Вы привели два разных метода:
1. на чистом джаваскипт с использованием этого объекта или ActiveXObject для ИЕ старых версий
2. с использованием jquery.ajax , а он внутри себя пользуется теми же объектами

KimIV · Сообщение **KimIV** » 10.02.2016 13:46

Алг писал(а): 2. с использованием jquery.ajax , а он внутри себя пользуется теми же объектами

После ответа LavIgor, у меня как раз такая мысль и возникла. Изучаю внутренности jQuery...

KEMnEP, а смысл снаружи тянуть jQuery? <script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script> Тем более в полной версии (с пробелами и всеми читабельными форматами). В phpBB уже подключена ужатая библиотека 1.11.0

Отправлено спустя 3 минуты 41 секунду:

Алг писал(а): а он внутри себя пользуется теми же объектами

Истинно так. jQuery - это всего лишь обёртка для XMLHttpRequest

KEMnEP · Сообщение **KEMnEP** » 10.02.2016 14:04

KimIV писал(а): а смысл снаружи тянуть jQuery? <script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>

Естественно это был технологический пример штмл файла. а не полностью готовое решение встройки в phpbb. Странно что Вас теги <html><head> не смутили)))

KimIV · Сообщение **KimIV** » 10.02.2016 14:52

KEMnEP писал(а): Странно что Вас теги <html><head> не смутили)))

Меня ничё не смущает, даже полный бред, потому как полный ноль в предмете и только-только пытаюсь разобраться

phpBB Guru - Официальная русская поддержка форума phpBB3

Динамическая подгрузка данных по событию. Как реализовать?

Динамическая подгрузка данных по событию. Как реализовать?

Re: Динамическая подгрузка данных по событию. Как реализовать?

Re: Динамическая подгрузка данных по событию. Как реализовать?

Re: Динамическая подгрузка данных по событию. Как реализовать?

Re: Динамическая подгрузка данных по событию. Как реализовать?

Re: Динамическая подгрузка данных по событию. Как реализовать?

Re: Динамическая подгрузка данных по событию. Как реализовать?

Re: Динамическая подгрузка данных по событию. Как реализовать?

Re: Динамическая подгрузка данных по событию. Как реализовать?

Re: Динамическая подгрузка данных по событию. Как реализовать?

Re: Динамическая подгрузка данных по событию. Как реализовать?

Re: Динамическая подгрузка данных по событию. Как реализовать?

Re: Динамическая подгрузка данных по событию. Как реализовать?

Re: Динамическая подгрузка данных по событию. Как реализовать?

Re: Динамическая подгрузка данных по событию. Как реализовать?