Jump to content

Ломаем мозг


s0rr0w
 Share

Recommended Posts

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

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

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

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

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

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

Link to comment
Share on other sites

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

Edited by Nekromancer
Link to comment
Share on other sites

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

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

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

Edited by s0rr0w
Link to comment
Share on other sites

@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>

Link to comment
Share on other sites

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

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

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

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

Link to comment
Share on other sites

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

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

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

Link to comment
Share on other sites

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

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

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

Link to comment
Share on other sites

  • 1 month later...
Есть следующая задача...

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

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

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

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

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

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

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

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

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

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

:blink:

Link to comment
Share on other sites

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

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

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

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

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

:blink:

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

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

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

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

Link to comment
Share on other sites

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

Чтобы не мудрствовать лукаво, в качестве носителя блоков выберем 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 by s0rr0w
Link to comment
Share on other sites

Guest
This topic is now closed to further replies.
 Share

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue. See more about our Guidelines and Privacy Policy