Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 30.07.2011, 22:36
Новичок на форуме
Отправить личное сообщение для KonstRuctor Посмотреть профиль Найти все сообщения от KonstRuctor
 
Регистрация: 30.11.2009
Сообщений: 4

Редактируем контент в модальном окне
Привет всем!
Для админки разработал алгоритм редактирования данных. Иногда удобно править данные в модальном окне, а не городить для этого отдельную страницу. Просьба сильно не пинать, я только учусь :-)
Итак, приступим. Нам потребуются 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, все будет немного проще
Буду рад критике. Спасибо!
Ответить с цитированием
  #2 (permalink)  
Старый 30.07.2011, 22:46
sinistral
Посмотреть профиль Найти все сообщения от melky
 
Регистрация: 28.03.2011
Сообщений: 5,418

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

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

а , да. и перенесите в соотв. раздел
Ответить с цитированием
  #3 (permalink)  
Старый 31.07.2011, 22:55
Новичок на форуме
Отправить личное сообщение для KonstRuctor Посмотреть профиль Найти все сообщения от KonstRuctor
 
Регистрация: 30.11.2009
Сообщений: 4

Пожалуйста, объясните новичку, что я сделал не так.
Выложил готовый "сабж" для обсуждения, у меня нет вопросов. Однако хотелось бы послушать возможные рекомендации к архитектуре, решению проблемы и коду. Ядро программы -- javascrip, сайт называется javascript.ru, раздел "форум", подраздел "готовые решения". Где моя ошибка? Как обычно поступают?
Ответить с цитированием
  #4 (permalink)  
Старый 01.08.2011, 09:35
Аватар для Gozar
Отправить личное сообщение для Gozar Посмотреть профиль Найти все сообщения от Gozar
 
Регистрация: 07.06.2007
Сообщений: 7,504

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

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

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

И зачем экранировать кавычки если можно использовать связку [' "] одинарная двойные. cp1251 в топку!
__________________
Последний раз редактировалось Gozar, Сегодня в 24:14.
Ответить с цитированием
  #5 (permalink)  
Старый 01.08.2011, 12:42
Новичок на форуме
Отправить личное сообщение для KonstRuctor Посмотреть профиль Найти все сообщения от KonstRuctor
 
Регистрация: 30.11.2009
Сообщений: 4

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


Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
[mootools] Ссылка в модальном окне = закрытие модального окна и и переход по ссылке koshmos Библиотеки/Тулкиты/Фреймворки 6 22.01.2012 14:20
в модальном окне не работает скрипт проверки формы necroms jQuery 1 11.03.2011 14:14
Данные в модальном окне lukingnu jQuery 3 03.08.2010 20:21
Ссылка в модальном окне lukingnu jQuery 1 26.07.2010 14:57
Авторизация в модальном окне с помощью jQuery A.N.R.I jQuery 17 01.03.2010 18:26