Turnings AJAX Periodical Update on and off

I am building a page to refresh data using AJAX, i've found a few different ways to do it, but was looking for a better way to turn refresh on and off with the Prototype JS and AJAX. I found a way to do it with a simple link and a different form of refresh, but I'm looking to do it with a nice button that shows what option is currently selected and having it built in with the current refresh script.

I know the button would probably be CSS based, but all the ones I found online didn't turn out right. Most the examples I've found seem cumbersome and normally when I ask on here someone has a short, solid solution that works really well across all browsers.

Thanks
function startTimer()
{
   
new Ajax.PeriodicalUpdater('', 'page.htm', {
     method: 'get'
     , frequency: 5
     , decay: 2
     , onSuccess:function(t){
        $('datetime').innerHTML=t.responseText;
    }
   }); 
 
}

Open in new window

CodeFlashAsked:
Who is Participating?

[Product update] Infrastructure Analysis Tool is now available with Business Accounts.Learn More

x
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

remorinaCommented:
Hi CodeFlash,
If you just needed a button that can toggle like on and off, that's easy with css and some JavaScript.

I've attached the example below which has a button like the ones on EE :) you can always use the same image concept to use your own image as a css background

The button image and css is using a method called sprites, which it has both the on and off states and a JavaScript will simply change the background location to show the on or off.

The JavaScript included is a toggler that will check for the button state and toggle it, either on or off, you can add your functions you want to run when it's turned on under the on condition, I've added a comment for you to make it easy to locate.


Cheers
Refresh-Button.zip
0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
CodeFlashAuthor Commented:
Sorry for being such a novice, but before I called my function startTimer() in the Body tag onLoad. I've tried moving things around and still havent been able to make it work since I assume it can't turn my function on onLoad when it's inside the other script?

Attached is the normal code with your javascript in it, if you have any insight that would be great, thanks remorina




<html>
<head>
<title>My Website</title>
<style type="text/css">
a.refresh {background:url(btn_BG.png) no-repeat;width:113px; height:27px;display:block;text-decoration:none;}
a.off {background-position:bottom;}
a.on {background-position:top;}
</style>

   <script type="text/javascript" 
   src="prototype.js">
   </script>
   
   

    <script type="text/ecmascript">
        function toggleBtn(el) {
            if (el.className == "refresh off") {
                el.className= "refresh on";
                
				
function startTimer()
{
   
new Ajax.PeriodicalUpdater('', 'page.htm', {
     method: 'get'
     , frequency: 2
     , decay: 1
     , onSuccess:function(t){
        $('datetime').innerHTML=t.responseText;
    }
   }); 
 
}
				
	
            }
            else {
                el.className= "refresh off"; 
            }
        }
    </script>

</head>

<body onLoad="startTimer();">

<a href="#" class="refresh on" onclick="toggleBtn(this);">&nbsp;</a>


<table width="750" align="center">

<tr>
<td align="center" width="750" valign="top">
 
  <div id="datetime">
  
  
  
  
  </div>


</td>

</tr>
</table>
  

</body>

</html>

Open in new window

0
CodeFlashAuthor Commented:
Ok, so I got it to partially do what I want by calling the button toggle onload in the body tag. I still can't get it to start in refresh on with it actually refreshing the data, I have to turn it off and then back on again to make the refresh data script work.

I also added a script into the refresh off because I'd still like the data to sit there and just set the refresh time to a long time so it doesnt actually refresh.



<html>
<head>
<title>My Website</title>
<style type="text/css">
a.refresh {background:url(btn_BG.png) no-repeat;width:113px; height:27px;display:block;text-decoration:none;}
a.off {background-position:bottom;}
a.on {background-position:top;}
</style>

   <script type="text/javascript" 
   src="prototype.js">
   </script>
   
   

    <script type="text/ecmascript">
        function toggleBtn(el) {
            if (el.className == "refresh off") {
                el.className= "refresh on";
                
				

   
new Ajax.PeriodicalUpdater('', 'page.htm', {
     method: 'get'
     , frequency: 2
     , decay: 1
     , onSuccess:function(t){
        $('datetime').innerHTML=t.responseText;
    }
   }); 
 

				
	
            }
            else {
                el.className= "refresh off"; 
				
				
	new Ajax.PeriodicalUpdater('', 'page.htm', {
     method: 'get'
     , frequency: 9999999
     , decay: 1
     , onSuccess:function(t){
        $('datetime').innerHTML=t.responseText;
    }
   }); 
				
				
            }
        }
    </script>

</head>

<body onLoad="toggleBtn(on);">

<a href="#" class="refresh on" onclick="toggleBtn(this);">&nbsp;</a>


<table width="750" align="center">

<tr>
<td align="center" width="750" valign="top">
 
  <div id="datetime">
  
  
  
  
  </div>


</td>

</tr>
</table>
  

</body>

</html>

Open in new window

0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
AJAX

From novice to tech pro — start learning today.