Javascript-форум (https://javascript.ru/forum/)
-   Ваши сайты и скрипты (https://javascript.ru/forum/project/)
-   -   Редактируем контент в модальном окне (https://javascript.ru/forum/project/19276-redaktiruem-kontent-v-modalnom-okne.html)

KonstRuctor 30.07.2011 23:36

Редактируем контент в модальном окне
 
Привет всем!
Для админки разработал алгоритм редактирования данных. Иногда удобно править данные в модальном окне, а не городить для этого отдельную страницу. Просьба сильно не пинать, я только учусь :-)
Итак, приступим. Нам потребуются 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, все будет немного проще ;)
Буду рад критике. Спасибо!

melky 30.07.2011 23:46

в этот раздел выкладываются готовые сабжи, которые показываются остальным.

если у вас проблема, то локализуйте её, потому что лень прочитывать страницу кода

а , да. и перенесите в соотв. раздел

KonstRuctor 31.07.2011 23:55

Пожалуйста, объясните новичку, что я сделал не так.
Выложил готовый "сабж" для обсуждения, у меня нет вопросов. Однако хотелось бы послушать возможные рекомендации к архитектуре, решению проблемы и коду. Ядро программы -- javascrip, сайт называется javascript.ru, раздел "форум", подраздел "готовые решения". Где моя ошибка? Как обычно поступают?

Gozar 01.08.2011 10:35

KonstRuctor,
Я как-то тоже не очень понял, что ты хочешь? Показать что ты умеешь писать на jquery + плагины и php?

В чем вообще профит?

Лично мне лень смотреть что это за плагин такой, а смысл того, что ты сделал заключается не в редактировании, а отправке с помощью ajax на сервер данных, т.к. я не вижу тут ни строчки где бы редактирование было бы описано. Нужно правильно называть темы.

И зачем экранировать кавычки если можно использовать связку [' "] одинарная двойные. cp1251 в топку!

KonstRuctor 01.08.2011 13:42

Хочу научиться правильной технике
 
Не умею я писать, а только учусь. Поэтому и показал алгоритм....
Хочу критику скрипта. Конструктивную, а не имхо про кодировку и топку.
Я выбрал кодировку и с ней работаю, что здесь обсуждать?
(«Помогите найти драйвер для видеокарты под win7! Да забей ты и поставь Linux»)
Хорошо, посоветуйте пожалуйста книжку, в которой бы рассказывалось про подобную технику, я очень хочу поучиться правильному редактированию данных.


Часовой пояс GMT +3, время: 01:00.