Slyweb
На разработку сайта! Скидки 50%!

Вопрос по реализации формы в простейшем модальном окне

Вы можете задавать любые вопросы по jQuery.

Вопрос по реализации формы в простейшем модальном окне

Сообщение battrack » 21 апр 2012, 23:02

В странице имеется скрытый div-элемент с содержимым. Данный элемент и будет модальным окном. При клике на странице на определенную кнопку, данный div становится видимым, т.е. модальное окно отображается. Допустим в этом div-е (окне) есть форма – поле ввода (text) и кнопка (submit). Задача простая: необходимо чтобы после ввода текста и нажатия кнопки, введенные данные уходили на сервер (например серверный скрипт записывал бы текст в базу данных). Короче говоря, не важно что будет происходить на сервере. Важно то, что если на сервере происходит какая либо ошибка (например, формат введенных данных неправильный), то сервер должен вернуть код ошибки и ошибка должна быть выведена в том же модальном окне.
На сервере обработкой данных занимается php-скрипт (впрочем это тоже не так важно).

Грубо говоря, я могу создать модальное окно, вывести в него какие-нибудь данные, ссылки и пр. И, например, по ссылке «закрыть» закрыть это модальное окно. Но вот как по нажатию на кнопку не закрыть окно а отправить данные на сервер, получить ответ и вывести его в окне – не знаю. А в идеале, если ошибки на сервере не произошло, то закрыть окно.
Данная ситуация актуальна, например, для случая авторизации. Скажем пользователь ввел в окно логин и пароль, запрос ушел на сервер (окно в это время еще отображается), сервер обработал данные и вернул результат: либо авторизация прошла и все ок, либо авторизация не прошла (например в базе нет пользователя с таким именем). В зависимости от результата в окно либо должно вывестись сообщение об ошибке («пользователя с таким именем не существует»), либо окно должно закрыться (если ошибки нет).
Правильно ли я понимаю логику: после ввода данных и нажатия кнопки, данные спомощью ajax-запроса уходят на сервер, серверный скрипт обрабатывает данные и посылает обратно ответ. Ответ анализируется и если ошибка, то выводим ее в окно, если ошибки нет, то вызываем функцию закрытия окна?
Я умышленно пока не пытаюсь разбираться с множеством готовых виджетов модальных окон (например Dialog UI), а пытаюсь создать свое простейшее окно, чтобы разобраться с темой.
battrack
 
Сообщения: 8
Зарегистрирован: 08 фев 2012, 12:03

Re: Вопрос по реализации формы в простейшем модальном окне

Сообщение admin » 23 апр 2012, 15:25

Используйте jQuery UI Dialog, так как создать модальное окно не просто. В jQuery UI Dialog всё уже сделано, окно можно перетаскивать, сжимать (изменять размеры). При этом всё что в диалоговом окне Вы поместите - html форма, текст, картинки, - будет открываться именно в окне. Другой вопрос, когда Вы будете отправлять данные из модального окна. Например есть кнопка с классом "newpostonwall'", при нажатии мы открываем диалог :

Код: Выделить всё
$('.newpostonwall').live('click',function(e){
      
      $( "#dialog-ajax-wall" ).dialog({
      height: 600,
      width: 650,
      modal: true,
         
      });      
});



Допустим этот код будут обрабатывать данные для отправки на сервер и обратно, в диалоговом окне должны быть кнопка, элемент при нажатии на который будут происходить отправка запроса на сервер:

Код: Выделить всё

$('.ingroups').click(function(e){
         

         e.preventDefault();
         
         var data = $(this).closest('form').serialize();

         $.ajax({
              url: "assets/components/doodles/connectors/connector.php?action=web/moderatorgroups",
              data: {data:data},
              type: "POST",
              dataType:'json',
              success: function(data){
   
                $( "#dialog .text" ).text(data.message);

                $('.loader').fadeOut();
                        $( "#dialog" ).dialog({
                        height: 200,
                        width: 250,
                        modal: true,
                        buttons: {
                           ok: function() {
                              $( this ).dialog( "close" );
                           }
                        }
                  
               });

               }
            
               });
      });   


Если сервер вернёт результат, то сработает функция:

Код: Выделить всё

 success: function(data){

....

}


В данном примере данные будут возвращаться с сервера в формате json, - data.message. Для отправки данных в формате json в php сущетсвует много функций, наиболее популярная json_encode(). В неё нужно передать php массив. Элементы массива будут преобразованы в json объект, котрый и будет использоваться для вывода сообщения в браузере, например через data.message.
admin
Администратор
 
Сообщения: 165
Зарегистрирован: 15 авг 2009, 20:02



Вернуться в Вопросы по jQuery

Кто сейчас на конференции

Сейчас этот форум просматривают: нет зарегистрированных пользователей и гости: 2

cron