Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 09.09.2016, 10:50
Новичок на форуме
Отправить личное сообщение для Albionix Посмотреть профиль Найти все сообщения от Albionix
 
Регистрация: 09.09.2016
Сообщений: 9

Подключение js к динамически созданным input
Здравствуйте...Прошу помощи в решении следующей проблемы:

Есть страничка с полями ввода город, улица, дом Сделана кнопка добвления полей, например адрес 2, 3, ....

<script>
	$(function() {
		$("#add").click(function () {
		$("<div class='param'><div class='box'><input type='text' name='city' placeholder='Город'></div><div class='box'> <input type='text' name='street' placeholder='Улица'></div> <div class='box'><input type='text' name='building' placeholder='Дом'> </div><div class='box last-child'><input type='text' name='pod' placeholder='Подъезд'></div><div class='box'></div></div><div class='spacer'><br></div>" ).insertBefore("#form_status_added"); 
		})
	 });
	</script>


При создании страницы подключаются скрипты и css "Кладр в облаке" и jquery

<link href="jquery.kladr.min.css" rel="stylesheet">
script src="js/lib/jquery-1.11.1.min.js" type="text/javascript"></script>
<script src="jquery.kladr.min.js" type="text/javascript"></script>
<script src="js/form_with_map.js" type="text/javascript"></script>
<link href="css/form_with_map.css" rel="stylesheet">


У элементов размещенных в коде до этого статически
<div class="param" >
				<div class="box">
					<input type="text" name="city" placeholder="Город">
				</div>
				<div class="box">
					<input type="text" name="street" placeholder="Улица">
				</div>
				<div class="box">
					<input type="text" name="building" placeholder="Дом" >
				</div>
				<div class="box last-child">
					<input type="text" name="pod" placeholder="Подъезд" >
				</div>
			</div>

все работает нормально, автозаполнение срабатывает. А вот у добавленных скриптом нет. Вопрос как подключить его к динамически созданным формам.

На всякий случай ссылку привожу на ГитХаб (https://github.com/garakh/kladrapi-jsclient), там описание проекта и примеры есть, но как их использовать не знаю, недавно начал ...Заранее спасибо!
Ответить с цитированием
  #2 (permalink)  
Старый 09.09.2016, 14:52
Профессор
Отправить личное сообщение для laimas Посмотреть профиль Найти все сообщения от laimas
 
Регистрация: 14.01.2015
Сообщений: 12,989

.insertBefore("#form_status_added").find('input').trigger('событие');
Ответить с цитированием
  #3 (permalink)  
Старый 09.09.2016, 16:27
Новичок на форуме
Отправить личное сообщение для Albionix Посмотреть профиль Найти все сообщения от Albionix
 
Регистрация: 09.09.2016
Сообщений: 9

Сообщение от laimas Посмотреть сообщение
.insertBefore("#form_status_added").find('input').trigger('событие');
Если ен трудно, попрошу пояснить код ) И с примером, что в событии писать?
Ответить с цитированием
  #4 (permalink)  
Старый 09.09.2016, 16:46
Профессор
Отправить личное сообщение для laimas Посмотреть профиль Найти все сообщения от laimas
 
Регистрация: 14.01.2015
Сообщений: 12,989

Я думал в курсе.

Найдите в коде установку обработчиков запросов к КЛАДР на имеющиеся на странице поля ввода. Пусть это будет keyup, тогда ваш код должен быть такой:

$("<div class='param'><div class='box'><input type='text' name='city' placeholder='Город'></div><div class='box'> <input type='text' name='street' placeholder='Улица'></div> <div class='box'><input type='text' name='building' placeholder='Дом'> </div><div class='box last-child'><input type='text' name='pod' placeholder='Подъезд'></div><div class='box'></div></div><div class='spacer'><br></div>" ).insertBefore("#form_status_added").find('input').trigger('keyup');


Метод trigger запускает ранее установленный обработчик. Но я и элементы указал произвольно - find('input'), то есть все вставляемые поля, а это может быть не так, поэтому в качестве селектора здесь нужно не 'input', а только те, которые требуется. В курсе как это делать?
Ответить с цитированием
  #5 (permalink)  
Старый 09.09.2016, 17:53
Новичок на форуме
Отправить личное сообщение для Albionix Посмотреть профиль Найти все сообщения от Albionix
 
Регистрация: 09.09.2016
Сообщений: 9

Сообщение от laimas Посмотреть сообщение
Я думал в курсе.

Найдите в коде установку обработчиков запросов к КЛАДР на имеющиеся на странице поля ввода. Пусть это будет keyup, тогда ваш код должен быть такой:

$("<div class='param'><div class='box'><input type='text' name='city' placeholder='Город'></div><div class='box'> <input type='text' name='street' placeholder='Улица'></div> <div class='box'><input type='text' name='building' placeholder='Дом'> </div><div class='box last-child'><input type='text' name='pod' placeholder='Подъезд'></div><div class='box'></div></div><div class='spacer'><br></div>" ).insertBefore("#form_status_added").find('input').trigger('keyup');


Метод trigger запускает ранее установленный обработчик. Но я и элементы указал произвольно - find('input'), то есть все вставляемые поля, а это может быть не так, поэтому в качестве селектора здесь нужно не 'input', а только те, которые требуется. В курсе как это делать?
Да, спасибо. Теперь понятно. Скажите а будет ли проблемой то, что поля создаются с оинаковыми name и без id?
Ответить с цитированием
  #6 (permalink)  
Старый 09.09.2016, 18:02
Новичок на форуме
Отправить личное сообщение для Albionix Посмотреть профиль Найти все сообщения от Albionix
 
Регистрация: 09.09.2016
Сообщений: 9

Из первого вытекает второе: вставляю по клику на radio город в нужный адрес. То есть если 3 адреса:

<div class="korpus">
				<input name="city_id" type="radio" id="vkl12" value="6600001500000"><label id="2" for="vkl12">Новоуральск</label>
				<input name="city_id" type="radio" id="vkl22" value="6600002300000"><label id="2" for="vkl22"> Н. Тагил</label>
				<input name="city_id" type="radio" id="vkl32" value="6600000100000"><label id="2" for="vkl32"> Екатеринбург</label>
			
			</div>
				<div class="box">
					<input type="text" name="city2" id="c2" placeholder="Город">
					<script>$('[name="city2"]').kladr({type: $.kladr.type.city});</script>
				</div>

У каждого последующего в имени и id номер больше на 1...

Код такой:
<script>$('label').click(function () {
	var $city = $('[name="city'+this.id+'"]');

	$city.kladr({
		type: $.kladr.type.city
	});

	$('[name="city_id"]').change(function () {
		var id = $(this).val();

		// Устанавливаем значение поля ввода по id
		$city.kladr('controller').setValueById(id);
	});
})</script>;


Поведение такое: нажимаем на радио1 заполняется например екатеринбург в адресе 1, нажимаем радио 2 в 1 и 2 адресе заполняется например новоуральск, нажимаем на радио 3 - например тагил, все три адреса становятся тагил. заием по клику на любой радио меняются все три поля. Если после загрузки страницы начать не с первого адреса а со второго. то есть 2. затем 3, то одновременно меняются только 2 и 3 , а 1 остается пустым пока не нажмешь на радио 1. Прошу прощения если сумбурно объяснил.
Ответить с цитированием
  #7 (permalink)  
Старый 09.09.2016, 18:16
Профессор
Отправить личное сообщение для laimas Посмотреть профиль Найти все сообщения от laimas
 
Регистрация: 14.01.2015
Сообщений: 12,989

будет ли проблемой то, что поля создаются с оинаковыми name

Если поля добавляются в форму, которая затем будут отправлена на сервер, то да, проблемой будет прием данных - сервер получит значения не всех полей city, street и т.д., а только значения этих последних полей.
Чтобы получить значения всех полей именовать их нужно как элементы вложенного массива: city[], street[] и т.д. В этом случае на сервере будут получены массивы city => [значение поля 1, значение поля 2, и т.д.]. Аналогично и других полей.

ID, если они только нужны, должны быть различны.
Ответить с цитированием
  #8 (permalink)  
Старый 09.09.2016, 18:22
Профессор
Отправить личное сообщение для laimas Посмотреть профиль Найти все сообщения от laimas
 
Регистрация: 14.01.2015
Сообщений: 12,989

Сообщение от Albionix
Поведение такое: нажимаем на радио1 заполняется например екатеринбург в адресе 1, нажимаем радио 2 в 1 и 2 адресе заполняется например новоуральск, нажимаем на радио 3 - например тагил, все три адреса становятся тагил. заием по клику на любой радио меняются все три поля. Если после загрузки страницы начать не с первого адреса а со второго. то есть 2. затем 3, то одновременно меняются только 2 и 3 , а 1 остается пустым пока не нажмешь на радио 1. Прошу прощения если сумбурно объяснил.

Ничего не понял.

label id="2" - id должен быть уникален. И вообще не увлекайтесь ими, если они не нужны, не используйте их вообще, этот атрибут не обязателен у тега.
Ответить с цитированием
  #9 (permalink)  
Старый 09.09.2016, 22:37
Новичок на форуме
Отправить личное сообщение для Albionix Посмотреть профиль Найти все сообщения от Albionix
 
Регистрация: 09.09.2016
Сообщений: 9

Попробую объяснить... Представьте есть три поля ввода над каждым из них по 3 кнопки с названиями городов. Екатеринбург нижний Тагил и Новоуральск. 3 кнопки и поле ввода лежат в диве. При нажатии на одну из них, в соответствующем инпуте должно появиться название города (это я упрощаю...там не название). Так вот нажимаем на кнопку в первом блоке...выполняется код приведенный выше онклик. Значение заполняется в первом инпуте. Нажимаем на кнопку 2 блока. И вот тут заполняются выбранным значением второй и первый инпуты. Соответственно если затем нажать на кнопку 3 блока то выбранным значением заполнятся все 3 поля ввода. А мне бы чтобы они независимотработали. Вариант с .one. Не помог. Надеюсь на Вашу помощь. Заранее спасибо
Ответить с цитированием
  #10 (permalink)  
Старый 10.09.2016, 04:13
Профессор
Отправить личное сообщение для laimas Посмотреть профиль Найти все сообщения от laimas
 
Регистрация: 14.01.2015
Сообщений: 12,989

Сообщение от Albionix
Представьте есть три поля ввода над каждым из них по 3 кнопки с названиями городов.
Представил, но... Такие же кнопки добавляются и полям, добавляемым в форму динамически, кодом ранее показанном?
Ответить с цитированием
Ответ



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

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


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Подключение файлов js Владимир Новицкий Общие вопросы Javascript 4 19.02.2011 09:32
Вопрос про подключение js prog90 Общие вопросы Javascript 4 03.01.2011 18:48
подключение js Basonsan Javascript под браузер 13 08.11.2009 21:07
input и JS Лимонадный Джо Events/DOM/Window 5 13.06.2008 04:05
подключение стороннего js скрипта friend Общие вопросы Javascript 2 24.05.2008 19:51