ロード、カウント、プロセスの簡単なフォーム

Question

私が開発しているスクリプトで助けが必要です。私はいくつかの広告を持っています。
ユーザーが広告をクリックすると、新しいページが開きます。

この新しいページには、ステータスメッセージのdivがあり、その下に大きなiframeがあります。

私はこのようにそれをしたい：ステータスメッセージボックスで
1.、それは「iFrameののコンテンツの読み込み...」と言うべきです（のiFrameのURLが完全にロードされるまでは）
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内にクリックしたときに、ステータスメッセージタイマ意志台無し。したがって：/

Answer 1

jQuery.ajaxメソッド（またはその派生クラスの1つ）を使用する必要があります。 jQuery.ajaxを使用すると、サーバーに必要なデータを「フォームを実行する」ように送信することができます（前述のとおり）。また、HTMLを取得すると、変数に保存できます。タイムアウトが切れると、タイマーオブジェクトを使用してdivのhtmlを新しいコンテンツに設定できます。