VPF::Вывод сообщения, пока отправляется форма

Rusman

Дата 16.11.2010, 10:09 (ссылка)

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

Загрузка ...

Опытный

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

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

Здравствуйте!
Отправляю форму с помощью jquery. Форма у меня большая и скрипт может обрабатывать ее 30-40 секунд, а то и больше. У меня сообщение об обработке выходит только после окончания работы скрипта. Но мне нужно сообщать как то пользователю, что типа: данные обрабатываются. Например в какой нибудь DIV засунуть.
Как это сделать?

вот код:

Код


<script type="text/javascript">
        $(document).ready(function() { 
            $('#form1').ajaxForm(function() {
                alert("Действие успешно выполнено!");            
            });
        });
    </script>

Код


<form name="form1" id="form1" method="POST" action="ajax/products_list.php">
<!--тут много элементов формы-->
 <input type='submit' value='Выполнить' class=button>

Все спасибо!

Это сообщение отредактировал(а) Rusman - 16.11.2010, 10:10

gcc

Дата 16.11.2010, 10:51 (ссылка)

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

Загрузка ...

Агент алкомафии

Профиль
Группа: Участник
Сообщений: 2691
Регистрация: 25.4.2008
Где: %&й

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

можно во время отправки показать какое-то окно (Jquery UI или какое-то модальное окно) или какую-то надпись на странице, что отправка пошла, например возле кнопки написать что отправка пошла... когда все произошло успешно, то убрать эту надпить...

можно сделать такую визуальную прокрутку:

Display_Load(); показывает картинку
Hide_Load(); скрыть картинку

user posted image

Код


<style type="text/css">
     

#loading { 
width: 60%; 
position: absolute;
}

</style>

на счет CSS еще тут: http://forum.vingrad.ru/forum/topic-307351.html

ну и в самом ввеху перед формой:

Код


    <tr>
      <td align='center' colspan="3">      <div id="loading"></div>     </td>    
      </tr>

Код


        //Display Loading Image
    function Display_Load()
    {
        $("#loading").fadeIn(1900,0);
        $("#loading").html("<br><br><br><img src='/img/bigLoader.gif' />");
    };
    
    
    function Display_Load2()
    {
        $("#loading").fadeIn(5000,0);
        $("#loading").html("<br><br><br><img src='/img/bigLoader.gif' />");
    };
        
    
    
    //Hide Loading Image
    function Hide_Load()
    {
        $("#loading").fadeOut('slow');
    };
    
   

   

$("#button").live("click", function(){   
  
  
  

  
  $('*[class^=error_]').html("");   
   
   
$('#error_add').html("");
   
    Display_Load();
 

 
    if ( $('input.name_thread').val().length < 1 ) {
        
      $(".error_name_thread_error").html("<b>This field is required!</b>");
      $("input.name_thread").focus();
      Hide_Load(); 
      return false;
    }  
      

    if ( $('textarea#text').val().length > 40000 || $('textarea#text').val().length < 12 ) {
        
      $(".error_text_error").html("<b>Length of the text is not correct, the length should be a min 12, a max 40000!</b>");
      $(".error_text_error").focus();
      Hide_Load(); 
      return false;
    }
   
   

   
$.post('/groups/add_thread_data/<TMPL_VAR NAME="id_gr">', $('#form_id').serialize(), function(data) {
// then the code will be executed at the end of the query
// data - response, which returned to the server



    if (data.success_ok > 0) {
    

Hide_Load(); 

..........................................................
..........................................................

Это сообщение отредактировал(а) gcc - 16.11.2010, 11:08

--------------------

Perl FAQ
freelance
perl, jquery, js, php
perl, jquery

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