Привет всем!
Для админки разработал алгоритм редактирования данных. Иногда удобно править данные в модальном окне, а не городить для этого отдельную страницу. Просьба сильно не пинать, я только учусь :-)
Итак, приступим. Нам потребуются jquery и плагин thickbox (+его css). Кладем их в папку inc.
1) Страница верстки контента modal.php
<?php
if ( isset ( $_COOKIE["message"] ) )
{
$message = "<div id=\"success\">
<script type=\"text/javascript\" src=\"/inc/timeout.js\"></script>
Спасибо! ".$_COOKIE["message"]."</div>\n";
setcookie("message",'');
}
else $message = '';
?>
<!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 echo $message; ?>
<p>Строка с данными. <a href="/ajax.php?height=400&width=600&modal=true&action=test" class="thickbox">Изменить данные</a></p>
</body>
</html>
2) Верстка формы в модальном окне 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\" />
<input id=\"my_url\" type=\"hidden\" value=\"modal.php\" />
</form>
<input type=\"submit\" onclick=\"tb_remove()\" value=\" Отмена \">
<script type=\"text/javascript\" src=\"/inc/valid.js\"></script>";
}
?>
3) Скрипт валидации и отправки формы valid.js
$(document).ready(function() {
$("#myid").submit(function()
{
var str = $(this).serialize();
var my_url = $("#my_url").val();
$.ajax({
type: "POST",
url: "valid.php",
data: str,
success: function(msg)
{
$("#err").ajaxComplete(function(event, request, settings)
{
if ( msg == 'OK')
{
msg = '';
$(location).attr('href',my_url);
}
else
{
$(this).html(msg);
}
});
}
});
return false;
});
});
4) Скрипт проверки полей и работы с БД valid.php
<?php
$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 ) )
{
// обработка htmlspecialchars и т.п. и т.п.
// вставляем данные в базу тут
// устанавливаем куку
setcookie("message","Данные успешно обработаны и занесены в базу данных", time() + 60);
echo "OK";
}
else echo "<div class=\"err\">ОШИБКА! ".$error."</div>";
}
?>
5) Коротенький скриптик, который убирает сообщение на странице верстки timeout.js
setTimeout(function() { $('#success').fadeOut('fast'); }, 3000); // <-- time in milliseconds
Остается только разукрасить верстку css на свой вкус.
Чтобы работали русские буквы в модальном окне, правлю файл .htaccess: AddDefaultCharset windows-1251, так как я работаю с этой кодировкой. При вставке с базу этот момент тоже следует учитывать.
Если вы работаете с utf-8, все будет немного проще
Буду рад критике. Спасибо!
