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