Question

I’ve an Auto Refresh Button in my page. When I click Auto Refresh ON the page should reload, while the Auto Refresh OFF is selected the should not reload. Is this Possible?

Here is my Auto Refresh button Functionality:

$('#refresh').click(function(){
   if($('#refresh').attr('class') == 'refresh-off'){
      $('#refresh').addClass('refresh-on');
   }
    else{
      $('#refresh').removeClass('refresh-on');
   }
   });
});

Answer 1

Try setting a timer, then checking the class of #refresh. If set, then refresh the page.

This fiddle shows it working on a 10 second interval.

var int=self.setInterval(function(){refreshPage()},10000);

$(document).ready(function() {

  var hashTag = window.location.href.split('#');
  if (hashTag[1] == 'reload') {
     $('#refresh').addClass('refresh-on').html('Refresh On');  
  }

  $('#refresh').on('click', function() { 
    $(this).toggleClass('refresh-on'); 
    if ($(this).hasClass('refresh-on'))
      $(this).html('Refresh On');
    else 
      $(this).html('Refresh Off');
  });

});

function refreshPage() {
  if ($('#refresh').hasClass('refresh-on')) {
    location.hash = 'reload';
    window.location.reload();
  } else
      location.hash = '';
}