| | Интересуюсь вопросом создания форм с помощью SoftTime FrameWork, которые, при этом, также управляются JavaScript.
В принципе, решение я нашел. Хотелось бы им поделиться и услышать мнения о том насколько оно удачное/неудачное. Особенно интересуют мнения создателей фреймворка ;)
Что требуется получить: форму, в которой, допустим, при выборе одного из значений из SELECT-списка динамически без перезагрузки появляются другие элементы или просто какой-либо текст.
Вот пример: http://test.irbis09.jino.ru/dmn/
Логин: test
Пароль: test
При использовании SoftTime FrameWork валидация формы происходит после ее отправки, т.е. страница перезагружается. При этом, если форма валидацию не прошла, то вывести ее требуется с теми же элементами/текстом, который был динамически добален JavaScript.
Если валидация пройдена, то формируем SQL-запрос и обновляем информации в базе и пользователь переадресовывается на нужную страницу.
Я решил поступить так.
Создал 3 файла:
testadd.php - основной файл, который осуществляет генерацию формы, ее вывод и добаление информации в базу.
testadd.js - файл, который содержит JavaScript, с помощью которого в форме можно динамически производить изменения.
ajax.testadd.php - файл, принимающий запросы с помощью AJAX (и не только;) ) и возвращающий строку, которую нужно добавить в форму.
Сгенерировать форму, вывести ее, динамически ее изменить с помощью JavaScript не сложно.
Также несложно обработать данные из формы, если она прошла валидацию, и поместить нужную информацию в БД.
Сложность состоит в том, как повторно вывести форму вместе с тем динамическим контентом, который был добавлен JavaScript, если форма не прошла валидацию.
Мое решение:
Файл ajax.testadd.php выдает контент как при AJAX-запросе, так и при обращении из файла testadd.php. Это позволяет добавить контент динамически с помощью JavaScript при необходимости, а также вывести этот же контент при повторной загрузки, если форма не прошла валидацию.
Фрагмент файла testadd.php в котором создается форма:
<?php
$text_val = include("ajax.testadd.php");
$name = new field_text("name", "Название", TRUE, $_REQUEST['name']);
$fruit = new field_select("fruit", "Фрукт", array("Выберите фрукт", "Апельсин", "Яблоко"), $_REQUEST['fruit']);
$text = new field_paragraph($text_val);
$form = new form(array("name" => $name,
"fruit" => $fruit,
"text" => $text),
"Добавить",
"form");
..................
echo "<script language='javascript' src='testadd.js'></script>";
?>
|
Файл ajax.testadd.php
<?php
$fruits = array("", "Апельсин растет в тропиках", "Яблоко растет в каждом саду");
if($_REQUEST['manage'] == "on")
{
header("Content-type: text/html; charset=windows-1251");
echo $fruits[$_REQUEST['fruit']];
}
else
{
return $fruits[$_REQUEST['fruit']];
}
?>
|
Файл testadd.js (чтобы сработала подсветка обрамлю начало и конец кода тегами <?php ?>. На самом деле testadd.js - это обычный подключаемый файл JavaScript)
<?php
$(document).ready(function() {
// Реакция на выпадающий список с фруктами
$('select[name=fruit]').change(function () {
var url = 'ajax.testadd.php?fruit=' + $(this).val() + '&manage=on';
url = encodeURI(url);
$('td[colspan=2]').load(url);
});//end of change()
});//end of ready()
?>
|
При первой загрузке файла testadd.php в переменную $text_val попадет пустая строка, т.к. в этот момент у нас элемент $_REQUEST['fruit'] не иницаилизирован и файл ajax.testadd.php возвращает элемент массива $fruits с нулевым индексом (при обращении из скрипта addtest.php в файле ajax.testadd.php отрабатывает блок else).
Допустим пользователь выбрал элемент "Апельсин", скрипт ajax.testadd.php вернет строку "Апельсин растет в тропиках" (при обращении к скрипту ajax.testadd.php по AJAX отрабатывает блок if - это осуществляется за счет передаче скрипту переменной manage) и эта строка будет вставлена в форму - в строку таблицы, которой соответствует элемент field_paragraph ($('td[colspan=2]') конечно, не лучший идентификатор, нужно расширить SoftTime FrameWork, чтобы можно было создавать в форме элементы с ID селекторами)
Предположим, что посетитель не заполнил обязательное поле "name", т.е форма не пройдет валидацию и нам придется ее вывести повторно. При повторной загрузки скрипта testadd.php в элементе $_REQUEST['fruit'] будет находится число 1, которое соответсвует апельсину как в SELECT-списке, так и в массиве $fruits в скрипте ajax.testadd.php. Это позволяет нам вывести в строке таблицы, которой соответстует элемент field_paragraph, строку, соответствующую апельсину. Эту строку вернет скрипт ajax.testadd.php.
Таким образом, если форма не прошла валидацию, то при повторном выводе она примет тот же вид, который у нее был до того, как пользователь ее отправил. Это произойдет благодаря тому, что скрипт ajax.testadd.php позволяет получить данные как через AJAX, так и из самого скрипта testadd.php.
Обработка формы после успешной валидации, на мой взляд, большого труда не вызывает, даже если у нее будут добавлены новые элементы динамически. | |
