Форум программистов [Powered by Invision Power Board]

Версия для печати темы
Нажмите сюда для просмотра этой темы в оригинальном формате

Форум программистов > JavaScript: для новичков > Функция по времени выполняемая

Автор: Serious2008 26.1.2012, 19:38

Здравствуйте. Помогите реализовать или дайте ссылок куда читать уже надоело гуглить.
Мне нужно чтобы во время начала отправки формы вылазило маленькое окошко или что-то подобное, с одной надписью. И это окошко либо 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

Код


$(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

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

Автор: Fynivx 27.1.2012, 05:46

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

Автор: ksnk 27.1.2012, 07:12

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

)

ajaxSubmit

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

Автор: $дмитрий 27.1.2012, 16:25

ksnk, из этого http://jquery.malsup.com/form/

Автор: ksnk 27.1.2012, 16:51

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

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

)

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

Автор: Serious2008 27.1.2012, 18:05

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

Автор: ksnk 27.1.2012, 19:14

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

Автор: Serious2008 27.1.2012, 19:45

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

Цитата

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

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

Автор: Krotlev 28.1.2012, 13:39

Смысл:
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

Автор: Serious2008 28.1.2012, 22:50

Код


$(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

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

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

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