Привет! Строю алгоритм изменения-удаления данных. Удобно делать небольшие формы в модальном окне, чтобы не создавать кучу отдельных файлов для редактирования каждого элемента сайта.
Опишу сперва мой алгоритм, потом задам пару вопросов, что у меня не выходит.
Итак, нам потребуется jquery и плагин thickbox для создания модальных окон.
Верстка основной страницы modal.php такая:
| Код |
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />
<title>Модальное окно</title>
<script type="text/javascript" src="/inc/jquery-latest.js"></script>
<script type="text/javascript" src="/inc/thickbox-compressed.js"></script>
<link type="text/css" href="/inc/thickbox.css" rel="stylesheet" />
</head>
<body>
<h1>Пробапера</h1>
<?php
if ( isset ( $_GET["message"] ) && $_GET["message"] == "ok" )
echo "<div id=\"success\">
<script type=\"text/javascript\" src=\"/inc/timeout.js\"></script>
Спасибо! Данные заполнены успешно!</div>\n";
?>
<p><a href="/ajax.php?height=400&width=600&modal=true&action=test" class="thickbox">Заполнить форму</a></p>
</body>
</html>
|
Далее верстка формы, которая появляется в окне, файл ajax.php
| Код |
<?php
if ( isset ($_GET["action"] ) && $_GET["action"] == "test" )
{
echo "<h1>Заполните простую форму</h1>
<div id=\"err\"></div>
<form id=\"myid\">
<label>Имя</label><input type=\"text\" name=\"myname\" /><br />
<input type=\"submit\" value=\"OK\" />
</form>
<input type=\"submit\" onclick=\"tb_remove()\" value=\" Отмена \">
<script type=\"text/javascript\" src=\"/inc/valid.js\"></script>";
}
?>
|
Далее скрипт валидации и отправки формы valid.js
| Код |
$(document).ready(function() {
$("#myid").submit(function()
{
var str = $(this).serialize();
$.ajax({
type: "POST",
url: "valid.php",
data: str,
success: function(msg)
{
$("#err").ajaxComplete(function(event, request, settings)
{
if ( msg == 'OK')
{
msg = '';
var url = "modal.php?message=ok";
$(location).attr('href',url);
}
else
{
$(this).html(msg);
}
});
}
});
return false;
});
});
|
И скрипт, который отвечает за проверку и, в дальнейшем, за вставку данных в базу valid.php
| Код |
<?php
header('Content-type: text/html; charset=windows-1251');
$post = (!empty($_POST)) ? true : false;
if( $post )
{
$error = '';
if ( empty($_POST["myname"] ) ) // тут можно подобным образом проверять все что угодно
$error .= "Вы не указали Ваше имя";
elseif ( strlen($_POST["myname"]) < 2 ) // я проверил просто для примера
$error .= "Ваше имя слишком короткое. Вы китаец?";
elseif (strlen($_POST["myname"] ) > 50 )
$error .= "Ваше имя слишком длинное";
if ( empty ( $error ) )
{
// тут будут вставляться данные в базу
echo "OK";
}
else echo "<div class=\"err\">ОШИБКА! ".$error."</div>";
}
?>
|
И совсем коротенький скриптик, который убирает сообщение со страницы верстки timeout.js
| Код |
setTimeout(function() { $('#success').fadeOut('fast'); }, 3000); // <-- здесь можно указать время
|
Вопросы, их три.
1) Как использовать скрипт valid.js универсально? Сейчас в нем жестко прописан редирект на определенную страницу. А если я его буду вызывать с разных мест сайта, мне придется плодить данный скрипт для каждой страницы! только чтобы менять место редиректа.
2) Всплывающее окно, которое выскакивает на странице верстки после удачного редактирования данных тут же красиво убирается. Но если нажать F5, оно выскакивает снова. Этот момент не особо страшный, так как это админка, и админ не дурак жать F5, но с точки зрения красоты работы это ведь есть плохо?
3) Как в этом самом окне показывать разные надписи согласно ситуации? На одной странице можно, к примеру, и удалять и редактировать данные. Чтобы вместо "Все нормально" говорить "Удалено успешно". Сейчас надпись жестко приписана в теле страницы.
Спасибо! |
)
файрбаг, консоль ошибок не закрываю вообще. к тому же еще хромовские инструменты открыты...