VPF::Функция по времени выполняемая

Serious2008

Дата 26.1.2012, 19:38 (ссылка)

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

Загрузка ...

Опытный

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

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

Здравствуйте. Помогите реализовать или дайте ссылок куда читать уже надоело гуглить.
Мне нужно чтобы во время начала отправки формы вылазило маленькое окошко или что-то подобное, с одной надписью. И это окошко либо 1.5 минуты весело, либо уже после успешной отправки формы(форма может отправить не успешно и вернуть 504) убрать это окошко. В коде я пометил месте где надо вызывать и где надо прерывать. Но я блин не могу понять во первых как это окошко выводить. А во вторых как его выводить на время.

Код


$(document).ready(function(){
  var options = { 
    target: "#output",
    beforeSubmit: showRequest,
    success: showResponse 
  };
  $('#myForm').submit(function() { 
    $(this).ajaxSubmit(options); 
//Начинаем вызывать по времени
    return false;
  }); 

});

// вызов перед передачей данных
function showRequest(formData, jqForm, options) { 

    var queryString = $.param(formData); 
 return true;
} 
 
// вызов после получения ответа 
function showResponse(responseText, statusText)  { 

//вот тут прерывать

}

Krotlev

Дата 26.1.2012, 22:15 (ссылка)

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

Загрузка ...

Новичок

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

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

Код


$(document).ready(function(){
    var options = {
        target: "#output",
        beforeSubmit: showRequest,
        success: showResponse
    };
    $('#myForm').submit(function() {
        $(this).ajaxSubmit(options);
        //Начинаем вызывать по времени
        loadingTimeout = setTimeout(stopLoading, 90 * 1000); // 1.5 минуты
        return false;
    });
});

// вызов перед передачей данных
function showRequest(formData, jqForm, options) {
    var queryString = $.param(formData);
    // отображаем диалог загрузки
    startLoading();
    return true;
}

// вызов после получения ответа
function showResponse(responseText, statusText)  {
    //вот тут прерывать
    stopLoading();
}

var loadingTimeout;

function startLoading() {
    loadingTimeout = null;
    $('#loadingBox').show();
}
function stopLoading() {
    loadingTimeout = null;
    $('#loadingBox').hide();
}

Код


    <style type="text/css">
        #LoadingBox {
            visibility: hidden;
            position: fixed; float: left; top: 50px; left: 100px;
            border: solid 1px Silver; background: #f5f5f5; padding: 5px;
        }
    </style>
<div id="LoadingBox">
    <!-- http://www.drogbaster.it/gif_webmaster.htm -->
    <img src="http://www.drogbaster.it/loading/loading2.gif">
    Loading...
</div>

Serious2008

Дата 27.1.2012, 01:18 (ссылка)

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

Загрузка ...

Опытный

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

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

Krotlev,
что-то не появляется ничего.

Fynivx

Дата 27.1.2012, 05:46 (ссылка)

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

Загрузка ...

Шустрый

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

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

Не потому ли, что функция передачи всегда возвращает false?
---
А еще loadingTimeout, имхо, не там объявлен, и почему в startLoading он = null - я вообще хз.

Это сообщение отредактировал(а) Fynivx - 27.1.2012, 05:49

ksnk

Дата 27.1.2012, 07:12 (ссылка)

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

Загрузка ...

прохожий

Профиль
Группа: Комодератор
Сообщений: 6855
Регистрация: 13.4.2007
Где: СПб

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

Цитата(Krotlev @ 26.1.2012, 22:15

)

ajaxSubmit

Что за функция такая?

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

Человеку свойственно ошибаться, программисту свойственно ошибаться профессионально ! user posted image

$дмитрий

Дата 27.1.2012, 16:25 (ссылка)

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

Загрузка ...

Эксперт

Профиль
Группа: Завсегдатай
Сообщений: 1037
Регистрация: 19.6.2004

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

ksnk, из этого плагина

ksnk

Дата 27.1.2012, 16:51 (ссылка)

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

Загрузка ...

прохожий

Профиль
Группа: Комодератор
Сообщений: 6855
Регистрация: 13.4.2007
Где: СПб

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

$дмитрий, Да я не про то, что можно погуглить названия функций и нарыть самый подходящий, а про

Цитата(Serious2008 @ 27.1.2012, 01:18

)

Krotlev,
что-то не появляется ничего.

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

Человеку свойственно ошибаться, программисту свойственно ошибаться профессионально ! user posted image

Serious2008

Дата 27.1.2012, 18:05 (ссылка)

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

Загрузка ...

Опытный

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

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

ksnk,
аяксСубмит всё нормально делает свою работу. Тут проблема именно в появляющемся сообщении

ksnk

Дата 27.1.2012, 19:14 (ссылка)

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

Загрузка ...

прохожий

Профиль
Группа: Комодератор
Сообщений: 6855
Регистрация: 13.4.2007
Где: СПб

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

Serious2008, А! Она была в первом посте, sorry, не увидел smile

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

Человеку свойственно ошибаться, программисту свойственно ошибаться профессионально ! user posted image

Serious2008

Дата 27.1.2012, 19:45 (ссылка)

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

Загрузка ...

Опытный

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

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

All
Подскажите пожалуйста как ту функцию поправить. А то я в яваскриптах вообще ноль.

Цитата

А еще loadingTimeout, имхо, не там объявлен, и почему в startLoading он = null - я вообще хз.

вообще вот не о чём, не там, а где его нужно объявить если не секрет. Как я понимаю нужно не null а 90 * 1000 повесить?

Krotlev

Дата 28.1.2012, 13:39 (ссылка)

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

Загрузка ...

Новичок

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

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

Смысл:
1. Элемент, отображающий загрузку.

Код


<div id="loadingBox">
    <!-- http://www.drogbaster.it/gif_webmaster.htm -->
    <img src="http://www.drogbaster.it/loading/loading2.gif">
    Loading...
</div>

2. Чтобы он отображался независимо поверх исходного содержания страницы его нужно зафиксировать (обычно добавляются дополнительные эффекты - центрирование, затенение страницы).

Например, так

Код


    <style type="text/css">
        #loadingBox {
            visibility: hidden;
            position: fixed; float: left; top: 50px; left: 100px;
            border: solid 1px Silver; background: #f5f5f5; padding: 5px;
            z-index: 100;
        }
    </style>

3. Код отображающий и скрывающий этот элемент

Код


var loadingTimeout;

function startLoading() {
    clearTimeout(loadingTimeout);
    loadingTimeout = null;
    $('#loadingBox').show();
}
function stopLoading() {
    clearTimeout(loadingTimeout);
    loadingTimeout = null;
    $('#loadingBox').hide();
}

Здесь можно заметить странную переменную loadingTimeout, которая очищается в этих функциях.
Смысл setTimeout лучше погуглить, из первых ссылок по этой теме мне показалась симпатичной http://alljs.ru/articles/timeout/overview

4. Перед началом загрузки выполняет отображение элемента в п.1

Код


    startLoading();

5. После завершения загрузки, закрывает элемент п.1.

Код


    stopLoading();

6. Если нужно, чтобы после полторы минуты отсутствия загрузки, окошко принудительно закрыть, то нужно поставить таймер

Код


    loadingTimeout = setTimeout(stopLoading, 90 * 1000);

Что здесь происходить:
    * создается таймер setTimeout
    * который через полторы минуты (90 секунд)
    * запустить функцию stopLoading
    * этим таймером можно управлять (останавливать), зная возвращенное значение loadingTimeout, что и делается в п.3

Это сообщение отредактировал(а) Krotlev - 28.1.2012, 13:40

Serious2008

Дата 28.1.2012, 22:50 (ссылка)

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

Загрузка ...

Опытный

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

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

Код


$(document).ready(function(){
    var options = {
        target: "#output<?=$links['id_link'] ?>",
        beforeSubmit: showRequest,
        success: showResponse
    };
    $('#myForm<?=$links['id_link'] ?>').submit(function() {
        $(this).ajaxSubmit(options);
        //Начинаем вызывать по времени
        loadingTimeout = setTimeout(stopLoading, 90 * 1000); // 1.5 минуты
        startLoading();
        return false;
    });
});
// вызов перед передачей данных
function showRequest(formData, jqForm, options) {
    var queryString = $.param(formData);
    // отображаем диалог загрузки
    startLoading();
    return true;
}
// вызов после получения ответа
function showResponse(responseText, statusText)  {
    //вот тут прерывать
    stopLoading();
}

var loadingTimeout;
function startLoading() {
    clearTimeout(loadingTimeout);
    loadingTimeout = null;
    $('#loadingBox').show();
}
function stopLoading() {
    clearTimeout(loadingTimeout);
    loadingTimeout = null;
    $('#loadingBox').hide();
}

Я уже даже вот так сделал. Всё равно не работает, субмит функция всё нормально, этот див не появляется

Fynivx

Дата 3.2.2012, 03:19 (ссылка)

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

Загрузка ...

Шустрый

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

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

Знать, выразился я не осторожно...
Не знаю, каким образом это происходит в jquery, но браузер даже не отправляет запрос, если onsubmit возвращает false...

А про null я говорил потому, что таймаут при этом уничтожаться совсем не обязан.

А visibility и display использовать не пробовали?

Это сообщение отредактировал(а) Fynivx - 3.2.2012, 03:20

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