Ломаем мозг

s0rr0w · April 15, 2009

Есть следующая задача...

Поисковая форма, в которой есть несколько блоков с всевозможными инпутами, селектами и прочим.

Если пользователь заполняет хоть что-то в одном из инпутов любого блока, то нужно автоматически дизейблить все оставшиеся блоки. Возврат в начальное состояние всех форм блока энейблит блоки.

Есть кнопка "очистить", которая очищает все инпуты, и энейблит все блоки.

Кнопка "отправить" отправляет данные только того блока, который активный в данный момент времени.

Кто каким образом решал бы?

Nekromancer · April 15, 2009

я ещё учуся JS.. но если логически подумать, то надо в цикл for засунуть переключатель switch и ему выставить условия.. ну естественно не только его, сейчас попробую что-то сделать

Edited April 15, 2009 by Nekromancer

Иван Шумов · April 15, 2009

пара строчек на jQuery. сейчас я уже сильно доверяю этому фреймворку - быстро зараза работает XPath хорошая штука

s0rr0w · April 15, 2009

пара строчек на jQuery. сейчас я уже сильно доверяю этому фреймворку - быстро зараза работает XPath хорошая штука

Пара строчек в студию.

Советую внимательно прочитать ТЗ.

Edited April 15, 2009 by s0rr0w

Иван Шумов · April 15, 2009

@s0rr0w

Все делать было влом, но самое сложное сделал сам понимаешь - сижу на работе

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<script type="text/javascript" language="javascript" src="jquery.js"></script>
</head>
<body>
<div id="e1" class="formelm">
<input type="text"><br>
<select>
<option>1111</option>
<option>2222</option>
</select>
</div>

<div id="e2" class="formelm">
<input type="text"><br>
<select>
<option>1111</option>
<option>2222</option>
</select>
</div>

<div id="e3" class="formelm">
<input type="text"><br>
<select>
<option>1111</option>
<option>2222</option>
</select>
</div>


<script language="javascript">
var disable = false;
 $(document).ready(function() {
 $("div.formelm input").keydown(function(){
 	if(disable == false)
 	{
		$("div:not(#"+$(this).parent("div.formelm").attr("id")+") input").attr("disabled", true);
		$("div select").attr("disabled", true);
		disable = true;
	}

	})		   
 });


</script>
</body>
</html>

s0rr0w · April 15, 2009

Эээ... а как быть, если будет на странице две формы?

И, ты считаешь, что ID для блоков - удачная затея?

Иван Шумов · April 15, 2009

Эээ... а как быть, если будет на странице две формы?
И, ты считаешь, что ID для блоков - удачная затея?

ну блин - я этот скрипт 5 минут писал - мне еще зафигачить по форме в каждый из блоков? а id потому что влом было другой определитель придумывать

Если внимательно прочитаешь скрипт то он выполняет как я написал сложную часть - дальше уже модификации и шлифовка, а шлифовать тупо влом - механика ведь налицо, никто же не просил написать готовый скрипт

s0rr0w · April 15, 2009

Что за народ...

Реализуй готовое решение, мы ведь никуда не спешим. А потом посмотри, останется ли от твоего нынешнего решения хоть что-то.

Nekromancer · April 15, 2009

s0rr0w, ммм.. а ты это через SC реализовал?

Edited April 15, 2009 by Nekromancer

Иван Шумов · April 15, 2009

Что за народ...
Реализуй готовое решение, мы ведь никуда не спешим. А потом посмотри, останется ли от твоего нынешнего решения хоть что-то.

s0rr0w, сколько раз тебе объяснять - вот смотри - сидит человек на работе - отвлекся немного - увидел интересную задачку.. набросал механику и ву-а-ля! А ему говорят - доделай.. не спеши) а я вот сегодня пообщаюсь с заказчиками .. устану.. вечером прийду домой.. посмотрю фильмец.. поужинаю, пообщаюсь в асе и пойду спать. О твоей задачке я забуду.. а почему? а потому что задача больше неинтересна, а кто захочет - пускай решает дольше

s0rr0w · April 15, 2009

s0rr0w, сколько раз тебе объяснять - вот смотри - сидит человек на работе - отвлекся немного - увидел интересную задачку.. набросал механику и ву-а-ля! А ему говорят - доделай.. не спеши) а я вот сегодня пообщаюсь с заказчиками .. устану.. вечером прийду домой.. посмотрю фильмец.. поужинаю, пообщаюсь в асе и пойду спать. О твоей задачке я забуду.. а почему? а потому что задача больше неинтересна, а кто захочет - пускай решает дольше

Ты и на работе так работаешь? Пока интересно, колбашу, а как только интерес пропал - закинул нафиг?

Зачем вообще выкладывать недоделки?

Dobo · May 18, 2009

Есть следующая задача...
Поисковая форма, в которой есть несколько блоков с всевозможными инпутами, селектами и прочим.
Если пользователь заполняет хоть что-то в одном из инпутов любого блока, то нужно автоматически дизейблить все оставшиеся блоки. Возврат в начальное состояние всех форм блока энейблит блоки.
Есть кнопка "очистить", которая очищает все инпуты, и энейблит все блоки.
Кнопка "отправить" отправляет данные только того блока, который активный в данный момент времени.
Кто каким образом решал бы?

Думаю тут должна помочь вот этот пример и статья:

http://www.ibm.com/developerworks/ru/libra....html#resourses

Это чтото из области Ajax + Java

Во всяком случае, та же проблема стоит и втом примере . . .

И точно знаю что ответ на ваш вопрос знает тот автор: Бретт МакЛафлин (Brett McLaughlin)

:blink:

s0rr0w · May 18, 2009

Думаю тут должна помочь вот этот пример и статья:
http://www.ibm.com/developerworks/ru/libra....html#resourses
Это чтото из области Ajax + Java
Во всяком случае, та же проблема стоит и втом примере . . .
И точно знаю что ответ на ваш вопрос знает тот автор: Бретт МакЛафлин (Brett McLaughlin)

Спасибо, но в моей задаче несколько иное требуется реализовать.

Чуть позже выложу решение на SC.

s0rr0w, ммм.. а ты это через SC реализовал?

Именно. Причем могу написать код, который вообще не содержит идентификаторов. Структура HTML служит опорной структурой, которая формирует поведение модуля.

Nekromancer · May 19, 2009

Хочется увидеть код :blink:

s0rr0w · May 22, 2009

Итак, как и обещал, мое решение.

Чтобы не мудрствовать лукаво, в качестве носителя блоков выберем TBODY у таблицы.

Итак, начальная форма у нас получится вот такая:


	<h1>Поиск по параметрам:</h1>

	<div class="moduleBlock">

		<div class="formContent">
			<table>
				<tbody>
					<tr>
						<th>Фамилия:</th>
						<td><span class="inputBox"><input type="text"></span></td>
						<th>Имя:</th>
						<td><span class="inputBox"><input type="text"></span></td>
						<th>Отчество:</th>
						<td><span class="inputBox"><input type="text"></span></td>
					</tr>
				</tbody>
				<tbody>
					<tr>
						<th>E-main:</th>
						<td><span class="inputBox"><input type="text"></span></td>
					</tr>
				</tbody>
				<tbody>
					<tr>
						<th>ICQ:</th>
						<td><span class="inputBox"><input type="text"></span></td>
						<th>GTALK:</th>
						<td><span class="inputBox"><input type="text"></span></td>
					</tr>
				</tbody>
			</table>
		</div>
		<div class="actionBlock">
			<a href="#">очистить</a>
			<a href="#">отправить</a>
		</div>

	</div>

Мы обернули весь рабочий код модуля специальным блоком, чтобы иметь общую родительскую ноду и для формы и для управляющих элементов.

Зачем нужен <span class="inputBox"></span> я расскажу позже.

Самое первое, что мы реализовываем, это механизм очистки формы. Так как обработчик для очистки формы был написан для прошлого примера, мы его используем повторно.

Добавляем каждому полю ввода атрибут SC="sc_clear_form:clear", а на ссылку пишем простой код

GSC_setValAndLaunch( 'clear', true, $getParentByClassName( this, 'moduleBlock' ) );

Установить значение состояния clear в true и запустить обход дерева начиная с ноды, которая имеет класс moduleBlock, тобишь с нашего родительского контейнера для модуля.

Что получаем:


	<h1>Поиск по параметрам:</h1>

	<div class="moduleBlock">

		<div class="formContent">
			<table>
				<tbody>
					<tr>
						<th>Фамилия:</th>
						<td><span class="inputBox"><input type="text" SC="sc_clear_form:clear"></span></td>
						<th>Имя:</th>
						<td><span class="inputBox"><input type="text" SC="sc_clear_form:clear"></span></td>
						<th>Отчество:</th>
						<td><span class="inputBox"><input type="text" SC="sc_clear_form:clear"></span></td>
					</tr>
				</tbody>
				<tbody>
					<tr>
						<th>E-main:</th>
						<td><span class="inputBox"><input type="text" SC="sc_clear_form:clear"></span></td>
					</tr>
				</tbody>
				<tbody>
					<tr>
						<th>ICQ:</th>
						<td><span class="inputBox"><input type="text" SC="sc_clear_form:clear"></span></td>
						<th>GTALK:</th>
						<td><span class="inputBox"><input type="text" SC="sc_clear_form:clear"></span></td>
					</tr>
				</tbody>
			</table>
		</div>
		<div class="actionBlock">
			<a href="#" onclick="GSC_setValAndLaunch( 'clear', true, $getParentByClassName( this, 'moduleBlock' ) ); return false;">очистить</a>
			<a href="#">отправить</a>
		</div>

	</div>

Очистка формы работает. Идем дальше. Нам теперь нужно добавить элементам формы обработчик, который при onchange выполнял следующую операцию: проходил по всем элементам формы и спрашивал, все ли элементы пустые. Если хоть один элемент заполнен, то нужно задизейблить все остальные блоки.

Добавляем функцию


	<h1>Поиск по параметрам:</h1>

	<div class="moduleBlock">

		<div class="formContent">
			<table>
				<tbody SC="sc_remove_class:clear:disabled|sc_remove_class_by_id:dis:name:disabled">
					<tr>
						<th>Фамилия:</th>
						<td><span class="inputBox"><input type="text" SC="sc_clear_form:clear|sc_have_def_val:is_def" onchange="disableBlock( this, 'name')"></span></td>
						<th>Имя:</th>
						<td><span class="inputBox"><input type="text" SC="sc_clear_form:clear|sc_have_def_val:is_def" onchange="disableBlock( this, 'name')"></span></td>
						<th>Отчество:</th>
						<td><span class="inputBox"><input type="text" SC="sc_clear_form:clear|sc_have_def_val:is_def" onchange="disableBlock( this, 'name')"></span></td>
					</tr>
				</tbody>
				<tbody SC="sc_remove_class:clear:disabled|sc_remove_class_by_id:dis:email:disabled">
					<tr>
						<th>E-main:</th>
						<td><span class="inputBox"><input type="text" SC="sc_clear_form:clear|sc_have_def_val:is_def" onchange="disableBlock( this, 'email')"></span></td>
					</tr>
				</tbody>
				<tbody SC="sc_remove_class:clear:disabled|sc_remove_class_by_id:dis:mess:disabled">
					<tr>
						<th>ICQ:</th>
						<td><span class="inputBox"><input type="text" SC="sc_clear_form:clear|sc_have_def_val:is_def" onchange="disableBlock( this, 'mess')"></span></td>
						<th>GTALK:</th>
						<td><span class="inputBox"><input type="text" SC="sc_clear_form:clear|sc_have_def_val:is_def" onchange="disableBlock( this, 'mess')"></span></td>
					</tr>
				</tbody>
			</table>
		</div>
		<div class="actionBlock">
			<a href="#" onclick="GSC_setValAndLaunch( 'clear', true, $getParentByClassName( this, 'moduleBlock' ) ); return false;">очистить</a>
			<a href="#">отправить</a>
		</div>

	</div>

Осталось последнее, отправка данных только из нужного блока.

У нас с прошлого примера остался замечательный обработчик sc_collect, но нам нужно его применить только для той TBODY, которая активна на данный момент. Обойдем эту ситуацию следующим образом. Создадим обработчик

var sc_get_node = function ( controller, node, scData, execOptions ) {
	try {
		if ( !$matchClassName( node, scData.args[0] ) ) controller.states[ scData.state ] = node;
	} catch ( e ) { }
}

Если у ноды есть класс, который передан в параметре scData.args[0], то мы состоянию присваиваем данную ноду.

Добавляем функцию кнопке "отправить"

	var blockSubmit = function ( node ) {
		try {
			// Находим контейнер модуля по имени класса.
			var container = $getParentByClassName( node, "moduleBlock" );

			// Запускаем обход дерева. Ограничиваем обход только TBODY
			GSC_setValAndLaunch( "collect", null, container, { propagation: "TBODY"} ); 

			var collectResult = GSC_getVal( "collect" );

			if ( collectResult == null ) {
				// нельзя отправлять пустую форму
			}
			else
			{
				// collectResult будет равняться ноде, которая на данный момент не имеет класса disabled
				var tmpData = {};
				GSC_launch( collectResult, "collect", { formData: tmpData } );
				// console.debug(tmpData);
			}

		} catch ( e ) { } 
	};

Если у кого есть firebug, тот может раскомментировать строку // console.debug(tmpData); и посмотреть, что все работает как надо.

Итак, что у нас есть?

* У нас есть "хитрый" дизейбл форм через CSS (ноу-хау!)

* Можно построить логику, при которой будут дисейблиться только часть элементов формы в блоке.

* Добавление новых элементов делается путем простого копи-паста.

* Нет ни единого идентификатора, и можно делать более одного модуля на странице без потери функциональности всего модуля.

* Написано всего два новых контроллера и две JS-функции, остальное использовано повторно.

Исходник качаем тут: http://forum.htmlbook.ru/index.php?act=att...=post&id=63

Edited May 22, 2009 by s0rr0w

Sign In

Ломаем мозг

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Обсуждения

Important Information