auto refresh div every x seconds and stop to successsful load

Question

I need to create a div that will auto refresh every 10 seconds, and stop when it successfully loads. I created this jQuery script:

<script type="text/javascript">
$(document).ready(function(){
   var j = jQuery.noConflict();
    j(document).ready(function()
    {
        j(".refresh").everyTime(1000,function(i){
            j.ajax({
              url: "pin.php",
              cache: false,
              success: function(html){
                j(".refresh").html(html);
              }
            })
        })
    });
   j('.refresh');
});
</script>

It works but the refresh continues every 10 seconds. I need it to stop if pin.php returns a numeric output.

How can I edit it to stop refresh if pin.php returns a numeric output?

Answer 1

From the documentation over at http://www.jquery-plugins.info/jquery-timers-00013992.htm , the function you need is probably stopTime . Although I haven't tested it, the following in your success should work:

success: function(html) {
        if (j.isNumeric(html)) {
            j(".refresh").stopTime();
        } else {
            j(".refresh").html(html);
        }
    }

Answer 2

You said, "I need it to stop if pin.php returns a numeric output". if .refresh html contain number than it stop to call ajax call otherwise it make call.

if(isNaN(j(".refresh").html()){

    //put your ajax call in this block

}

Answer 3

You can modify your code something like this:

 var temp =   setInterval(1000,function(i){
            j.ajax({
              url: "pin.php",
              cache: false,
              success: function(html){
               if(isNaN(html))
                j(".refresh").html(html);
              }else{temp.clearInterval();}
            })
    })

Answer 4

Try it with an interval like this, it fires till the loaded call is done then it stops the interval and ajaxcal

$(document).ready(function(){
var j = jQuery.noConflict();
jRefresh();
var jRefresh = setInterval(function(){
        ajaxCall()
}, 1000);

function ajaxCall() {
    j.ajax({
        url: "pin.php",
        cache: false,
        success: function(html){
            if (j.isNumeric(html)) {
                    myStopFunction();
            }
        }
    })
}

function myStopFunction() {
        clearInterval(jRefresh);
}
});

Answer 5

first of all you do not need to call $(document).ready() twice. To aviod conflicts you can write code like this :

jQuery(document).ready(function($){
  // Your code here
});

Note the $ parameter

Second, I guess it is unuseful to use everytime ( looks like is a plugin and is not a good idea to load a lot of code since you have good alternatives for your needs ) when you can simply call setInterval ;

According to your needs and following what i said above, the code should looks like :

jQuery(document).ready(function($){

  var interval_time = 10000;
  var interval = null;

  var $wrapper = $('.refresh');

  interval = setInterval(function(){
    $.ajax({
      url : 'pin.php',
      cache : false,
      success : function( html ){
        if( $.isNumeric( html ) ){
          clearInterval( interval );
        }

        $wrapper.html( html );
      }
    })
  }, interval_time);


});