Простая загрузка, подсчет и обработка формы - PullRequest
Новая
       54

Простая загрузка, подсчет и обработка формы

0 голосов
/ 08 августа 2011

Мне нужна помощь с сценарием, который я разрабатываю.У меня есть несколько рекламных объявлений.
Когда пользователь нажимает на рекламу, открывается новая страница.

На этой новой странице будет div для сообщений о состоянии, а под div - большой iframe.

Я хочу это так:
1. В окне сообщения о состоянии, он должен сказать «Загрузка содержимого iFrame ...» (до тех пор, пока URL-адрес iFrame не будет полностью загружен)
2. Он должен вести обратный отсчет от X секунд / полосы загрузки.
3. Когда он достигнет нуля,должна запуститься форма и вывести данные в состоянии div.

Может кто-нибудь помочь мне получить это?Все это должно быть сделано с помощью jQuery и без каких-либо перезагрузок.

У меня есть этот дальний: 

   var countDownTimer = null;
    var seconds = <?php echo $exposure[$r['exposure']]; ?>;

    function setCountDownTimer(){
      if(countDownTimer)
        clearTimeout(countDownTimer);

      countDownTimer = setTimeout(updateCountdown, 1000);
    };

    function updateCountdown() {
          countDownTimer = null;
          seconds--;

          if (seconds > 0) {
             $("#countdown").text("You must view this advertisement for " + seconds + " seconds.");
             //$('#progressbar').progressbar({ value: Math.round((seconds/10)*100) });
             setCountDownTimer();
          } else {
             submitForm();
          }
     }

// on document load:
$(function() {

   $("#progressbar").progressbar({ value: 0 });

   // set "waiting" message:
   $("#loadingStatus").html("Waiting for your advertisements to load...");

   // on iframe load:

   $('#iFrame').load(function() {

       $("#loadingStatus").html($("#isDone").html());

       //Attached click event to the link inside iframe to restart the timer
       var iframe = $('#iFrame');
       iframe.contents().find("linkSelector").click(function(){  
         window.top.setCountDownTimer();  
       });

   });

   setCountDownTimer();
});



function submitForm() {
                $("#countdown").empty().html('<img src="..ify/dream/images/loading.gif" />');
                $.post(
                    'index.php?i=v&p=k&key=DSF79SADFHSA7D9FGSAD097FSAD7F9779ASDFGS9', 
                    $('form').serialize(),
                    function (data) {
                        proccessData(data);
                    }
                ); 

}  

function proccessData (data) {
            $('#statusF').hide().html('');

            if(data=='success'){
                $('form').fadeOut();
                $('#countdown').addClass('noti-success').html('Advertisement validated!').slideDown();
                redirect("?i=l");  
            }
            else {
                $('#countdown').addClass('noti-error').html(data).fadeIn();
            }
        }

Проблема с кодом выше, заключается в том, что когдапользователь, например, щелкает в iframe, таймер сообщений о состоянии испортится.Итак: /

1 Ответ

0 голосов
/ 08 августа 2011

Вам необходимо использовать метод jQuery.ajax (или одно из его производных). Используя jQuery.ajax, вы можете отправлять любые данные, которые вам нужны, на сервер, чтобы «запустить форму» (как вы упоминали), и когда вы вернете html, вы можете сохранить ее в переменной. Затем вы можете использовать свой объект таймера, чтобы установить html для div на новое содержимое по истечении времени ожидания.

...