Редактируем контент в модальном окне
Привет всем!
Для админки разработал алгоритм редактирования данных. Иногда удобно править данные в модальном окне, а не городить для этого отдельную страницу. Просьба сильно не пинать, я только учусь :-) Итак, приступим. Нам потребуются 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, все будет немного проще ;) Буду рад критике. Спасибо! |
в этот раздел выкладываются готовые сабжи, которые показываются остальным.
если у вас проблема, то локализуйте её, потому что лень прочитывать страницу кода а , да. и перенесите в соотв. раздел |
Пожалуйста, объясните новичку, что я сделал не так.
Выложил готовый "сабж" для обсуждения, у меня нет вопросов. Однако хотелось бы послушать возможные рекомендации к архитектуре, решению проблемы и коду. Ядро программы -- javascrip, сайт называется javascript.ru, раздел "форум", подраздел "готовые решения". Где моя ошибка? Как обычно поступают? |
KonstRuctor,
Я как-то тоже не очень понял, что ты хочешь? Показать что ты умеешь писать на jquery + плагины и php? В чем вообще профит? Лично мне лень смотреть что это за плагин такой, а смысл того, что ты сделал заключается не в редактировании, а отправке с помощью ajax на сервер данных, т.к. я не вижу тут ни строчки где бы редактирование было бы описано. Нужно правильно называть темы. И зачем экранировать кавычки если можно использовать связку [' "] одинарная двойные. cp1251 в топку! |
Хочу научиться правильной технике
Не умею я писать, а только учусь. Поэтому и показал алгоритм....
Хочу критику скрипта. Конструктивную, а не имхо про кодировку и топку. Я выбрал кодировку и с ней работаю, что здесь обсуждать? («Помогите найти драйвер для видеокарты под win7! Да забей ты и поставь Linux») Хорошо, посоветуйте пожалуйста книжку, в которой бы рассказывалось про подобную технику, я очень хочу поучиться правильному редактированию данных. |
| Часовой пояс GMT +3, время: 08:46. |