VPF::Форма с модальным окном - Форум программистов

KonstRuctor

Дата 26.7.2011, 13:04 (ссылка)

(нет голосов)

Загрузка ...

Бывалый

Профиль
Группа: Участник
Сообщений: 245
Регистрация: 31.3.2006
Где: Россия, Санкт-Пет ербург

Репутация: нет
Всего: нет

Привет! Строю алгоритм изменения-удаления данных. Удобно делать небольшие формы в модальном окне, чтобы не создавать кучу отдельных файлов для редактирования каждого элемента сайта.
Опишу сперва мой алгоритм, потом задам пару вопросов, что у меня не выходит.
Итак, нам потребуется jquery и плагин thickbox для создания модальных окон.
Верстка основной страницы modal.php такая:

Код


<!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 
if ( isset ( $_GET["message"] ) && $_GET["message"] == "ok" ) 
echo "<div id=\"success\">
<script type=\"text/javascript\" src=\"/inc/timeout.js\"></script>
Спасибо! Данные заполнены успешно!</div>\n"; 
?>
<p><a href="/ajax.php?height=400&width=600&modal=true&action=test" class="thickbox">Заполнить форму</a></p>
</body>
</html>

Далее верстка формы, которая появляется в окне, файл 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\" />    
    </form>
    <input type=\"submit\" onclick=\"tb_remove()\" value=\"  Отмена  \">
    <script type=\"text/javascript\" src=\"/inc/valid.js\"></script>";
}
?>

Далее скрипт валидации и отправки формы valid.js

Код


$(document).ready(function() {
$("#myid").submit(function()
{
    var str = $(this).serialize();
        $.ajax({
        type: "POST",
        url: "valid.php",
        data: str,
        success: function(msg)
        {
            $("#err").ajaxComplete(function(event, request, settings)
            {
                if ( msg == 'OK')
                {
                    msg = '';
                    var url = "modal.php?message=ok";    
                    $(location).attr('href',url);
                }
                else
                {
                    $(this).html(msg);
                }
                
            });
        }
    });
    return false;
});
});

И скрипт, который отвечает за проверку и, в дальнейшем, за вставку данных в базу valid.php

Код


<?php
header('Content-type: text/html; charset=windows-1251');
$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 ) )
    {
             // тут будут вставляться данные в базу
             echo "OK";
        }
    else echo "<div class=\"err\">ОШИБКА! ".$error."</div>";
}
?>

И совсем коротенький скриптик, который убирает сообщение со страницы верстки timeout.js

Код


setTimeout(function() { $('#success').fadeOut('fast'); }, 3000); // <-- здесь можно указать время

Вопросы, их три.
1) Как использовать скрипт valid.js универсально? Сейчас в нем жестко прописан редирект на определенную страницу. А если я его буду вызывать с разных мест сайта, мне придется плодить данный скрипт для каждой страницы! только чтобы менять место редиректа.
2) Всплывающее окно, которое выскакивает на странице верстки после удачного редактирования данных тут же красиво убирается. Но если нажать F5, оно выскакивает снова. Этот момент не особо страшный, так как это админка, и админ не дурак жать F5, но с точки зрения красоты работы это ведь есть плохо?
3) Как в этом самом окне показывать разные надписи согласно ситуации? На одной странице можно, к примеру, и удалять и редактировать данные. Чтобы вместо "Все нормально" говорить "Удалено успешно". Сейчас надпись жестко приписана в теле страницы.
Спасибо!

CruorVult

Дата 26.7.2011, 15:17 (ссылка)

(нет голосов)

Загрузка ...

Опытный

Профиль
Группа: Участник
Сообщений: 868
Регистрация: 24.9.2008
Где: г.Киев, Украина

Репутация: 3
Всего: 28

Цитата(KonstRuctor @ 26.7.2011, 13:04

)

1) Как использовать скрипт valid.js универсально? Сейчас в нем жестко прописан редирект на определенную страницу. А если я его буду вызывать с разных мест сайта, мне придется плодить данный скрипт для каждой страницы! только чтобы менять место редиректа.

Цитата(KonstRuctor @ 26.7.2011, 13:04

)

3) Как в этом самом окне показывать разные надписи согласно ситуации? На одной странице можно, к примеру, и удалять и редактировать данные. Чтобы вместо "Все нормально" говорить "Удалено успешно". Сейчас надпись жестко приписана в теле страницы.

А вы что не слышали про функции? и передачи им параметров??

Цитата(KonstRuctor @ 26.7.2011, 13:04

)

Но если нажать F5, оно выскакивает снова

нужно правильно продумать метод редактирования, чтобы после обновления страницы данные не отправлялись вновь.

KonstRuctor

Дата 26.7.2011, 15:32 (ссылка)

(нет голосов)

Загрузка ...

Бывалый

Я учусь, поэтому и задал вопрос... Признаюсь, в ответе ничего не понял...

Я понимаю, что нужно подумать над тем, чтобы по кнопке F5 данные не отправлялись вновь.
В моем алгоритме по кнопке F5 происходит обновление страницы с параметрами GET: modal.php?message=ok
И раз пришло это самое "ok", снова показывается div и так по кругу до посинения.

Расскажите пожалуйста про функцию и передачу параметров.
У меня есть функция success: function(msg)... которая вызывается при удачном выполнении ajax.
То есть мне нужно внутри этой функции вызвать еще одну функцию.... и в ней вызвать редирект?
Не понимаю.

CruorVult

Дата 26.7.2011, 16:11 (ссылка)

(нет голосов)

Загрузка ...

Опытный

Профиль
Группа: Участник
Сообщений: 868
Регистрация: 24.9.2008
Где: г.Киев, Украина

Репутация: 3
Всего: 28

Цитата(KonstRuctor @ 26.7.2011, 15:32

)

Расскажите пожалуйста про функцию и передачу параметров.

Нужно делать не через анонимную ф-ю:

Код


function ajaxQuery(redirectUrl)
    {
        var str = $(this).serialize();
            $.ajax({
            type: "POST",
            url: "valid.php",
            data: str,
            success: function(msg)
            {
                $("#err").ajaxComplete(function(event, request, settings)
                {
                    if ( msg == 'OK')
                    {
                        msg = '';
                           
                        $(location).attr('href',redirectUrl);
                    }
                    else
                    {
                        $(this).html(msg);
                    }
                    
                });
            }
        });
    }

Код


$("#myid").submit(function() {ajaxQuery("modal.php?message=ok"; return false}));

KonstRuctor

Дата 27.7.2011, 12:13 (ссылка)

(нет голосов)

Загрузка ...

Бывалый

Хм. Что-то не так. Не работает.
Что я делал:
1) исправил свой скрипт valid.js
2) добавил новый скрипт с одной строчкой

Код


$("#myid").submit(function() {ajaxQuery("modal.php?message=ok"; return false}));

3. Подключил оба скрипта.
Не работает валидация, не работает перенаправление.

CruorVult

Дата 27.7.2011, 14:26 (ссылка)

(нет голосов)

Загрузка ...

Опытный

Профиль
Группа: Участник
Сообщений: 868
Регистрация: 24.9.2008
Где: г.Киев, Украина

Репутация: 3
Всего: 28

Код


$("#myid").submit(function() {ajaxQuery("modal.php?message=ok"); return false}));

скобку забыл

+ учитесь ЖС отлаживать ctrl+shift+O

Это сообщение отредактировал(а) CruorVult - 27.7.2011, 14:28

KonstRuctor

Дата 27.7.2011, 14:29 (ссылка)

(нет голосов)

Загрузка ...

Бывалый

файрбаг, консоль ошибок не закрываю вообще. к тому же еще хромовские инструменты открыты...
Так инструментами еще пользоваться надо уметь smile

Сейчас домучиваю, пока не выходит ничего

Добавлено через 13 минут и 46 секунд
Получилось решить мой вопрос (1) -- универсальность скрипта valid.js
Решение такое:
1) модифицируем скрипт valid.js

Код


$(document).ready(function() {
$("#myid").submit(function()
{
    var str = $(this).serialize();
    var message = $("#my_message").val(); // новая переменная
        $.ajax({
        type: "POST",
        url: "valid.php",
        data: str,
        success: function(msg)
        {
            $("#err").ajaxComplete(function(event, request, settings)
            {
                if ( msg == 'OK')
                {
                    msg = '';
                    var url = message + ".php?message=ok";    // новая строка
                    $(location).attr('href',url);
............................ далее без изменений

2) модифицируем форму, которая появляется в модальном окне (ajax.php)

Код


if ( isset ($_GET["action"] ) && $_GET["action"] == "test" )
.....................................................
<input type=\"submit\" value=\"OK\" />
<input id=\"my_message\" type=\"hidden\" value=\"modal\" />    // вставляем вот эту строчку
// так как для редактирования каждого элемента сайта создается своя форма,
// это является вроде как решением
....................................................

Таким образом при успешном заполнении формы (ошибок нет) программа берет имя файла для перенаправления,
в данном случае -- modal.

Что осталось не сделанным? В случае использования пагинатора не получится передать номер страницы, на которую надо перенаправить админа. Допустим, админ редактирует новости и оказался на 3 странице в перечне новостей. Жмет кнопку "edit", редактирует заголовок новости в модальном окне. В случае успеха он должен попасть куда-то сюда:
news.php?page=3
а попадет опять в начало и вынужден будет (проклиная программиста) листать пагинатором

KonstRuctor

Дата 27.7.2011, 20:44 (ссылка)

(нет голосов)

Загрузка ...

Бывалый

Проблему с нажатием кнопки F5 попробовал решить с помощью cookies.
Вот мое решение:
1) Правим файл valid.php. Если валидация прошла успешно, ставим куку:

Код


if ( empty ( $error ) )
    {
        setcookie("message","Данные успешно обработаны и занесены в базу данных", time() + 60);
        echo "OK";
    }
    else echo "<div class=\"err\">ОШИБКА! ".$error."</div>";

2) В файле 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
....................................
....................................
<div class="grid_6">
<h1>Пробапера</h1>
<?php echo $message; ?>
<p><a href="/ajax.php?height=400&width=600&modal=true&action=test" class="thickbox">Заполнить форму</a></p>

Таким образом обходится проблема нажатия кнопки F5, никакие параметры не передаются по GET, что и требовалось сделать.
Остается нерешенной проблема с пагинатором и передачей сложного пути редиректа.

0 Пользователей читают эту тему (0 Гостей и 0 Скрытых Пользователей)
0 Пользователей:
« Предыдущая тема \| JavaScript: для новичков \| Следующая тема »