Прикрутить к скрипту информацию о загрузке данных в виде loader.gif

Sergo_Sev · 17 Авг 2013

Есть скрипт который обращается к php файлу и подгружает данные в течении 10 секунд
Нужно прикрутить либо сообщение о загрузке данных либо изображение по типу loader.gif, что бы до вывода данных из скрипта было видно, что скрипт работает

Код:

<html>
<head>
    <script type="text/javascript" src="jquery-1.4.2.min.js"></script>
    <script type="text/javascript" src="jquery.validate.min.js"></script>
    <script type="text/javascript">
    $(document).ready(function(){
        $("#myform").validate({
            submitHandler: function(form) {
                // do other stuff for a valid form
                $.post('process.php', $("#myform").serialize(), function(data) {
                    $('#results').html(data);
                });
            }
        });
    });
    </script>
</head>
 
<body>
<form name="myform" id="myform" action="" method="POST" align="center">
<input type="text" name="11" value="1" style="width:25;">
 
</br></br>
<input type="submit" value="Вычислить">
</form>
<div id="results"><div>
</body>
</html>

Genk0 · 17 Авг 2013

Для просмотра ссылки Войди или Зарегистрируйся
Клеим не к body, а к #result

antiterror · 17 Авг 2013

На всякий случай отпишусь, что бы на будущее не задавали такие вопросы когда есть google.

У вас есть DIV где выводится информация, вот туда перед загрузкой ajax вам нужно загрузить нужную информацию или loader gif.

Выглядит это так:

HTML:

<script type="text/javascript">
    $(document).ready(function(){
        $("#myform").validate({
            submitHandler: function(form) {
 
 
                $('#results').html('<img src="path_to_loading_img/loader.gif" alt="Loading" />');
                или такой вариант
                $('#results').html("Идёт загрузка данных...");
 
 
                // do other stuff for a valid form
                $.post('process.php', $("#myform").serialize(), function(data) {
                    $('#results').html(data);
                });
            }
        });
    });
</script>

Где path_to_loading_img нужно указать путь к изображению.
Всё остальное не нужно даже трогать.
И всё, проблема с загрузкой решена.

Sergo_Sev · 17 Авг 2013

antiterror написал(а):
И всё, проблема с загрузкой решена.

Отлично, именно то что искал, просто погуглил по первым запросам, что пришли в голову и ничего подходящего не нашел
Хотя в этом варианте информация о загрузке не убирается

А вообще первый вариант прикрутил - вышло отлично

Прикрутить к скрипту информацию о загрузке данных в виде loader.gif

Sergo_Sev

Творец

Вложения

Genk0

Хранитель порядка

antiterror

xProgramming

Sergo_Sev

Творец