How to call a Javascript function in timer Tick event

Question

_{Wednesday, July 20, 2011 12:09 PM}

Hello.

I have a timer control in which I am trying to call a javascript function in OnTick event. But I am getting an error.

Javascript is not a member of ASP.frm_RouteDetails_aspx

My code:

<asp:Timer runat="server" ID="UpdateTimer" Interval="5000" onTick = "javascript:initiate_geolocation()" />
                                       <asp:UpdatePanel runat="server" ID="TimedPanel" UpdateMode="Conditional">
                                           <Triggers>
                                               <asp:AsyncPostBackTrigger ControlID="UpdateTimer" EventName="onTick" />
                                           </Triggers>
                                           <ContentTemplate><table><tr><td>
                                             <asp:TextBox ID="txtLat" runat="server" visible ="true" name = "txtLatitude"></asp:TextBox>
                                             </td><td> <asp:TextBox ID="txtLong" runat="server" visible ="true" name = "txtLongitude" ></asp:TextBox>
                                          </td></tr></table> </ContentTemplate>
                                       </asp:UpdatePanel>

and my javascript function:

function initiate_geolocation() {
             navigator.geolocation.getCurrentPosition(handle_geolocation_query);
             return false;
         }

        function handle_geolocation_query(position){
        enableHighAccuracy: true

             alert('Lat: ' + position.coords.latitude + ' ' +
                   'Lon: ' + position.coords.longitude);

                  var lat = '<%= FindControl("txtLatitude").ClientID %>';
                   var lon = '<%= FindControl("txtLongitude").ClientID %>';
                document.getElementById(lon).value = position.coords.longitude;
                  document.getElementById(lat).value = position.coords.latitude;
         }

Am I missing something?

Appreciate the Help!!!

Thanks

All replies (16)

_{Wednesday, July 20, 2011 2:56 PM ✅Answered}

Could you please provide me the example so that I can refer ?

Actually the example was in the link I provided but I cooked up a working example for you:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script type="text/javascript">
        function initiate_geolocation() {
            alert('hello');
        }

        window.load = setInterval('initiate_geolocation()', 2000);
        
    </script>
</head>
<body>
    
</body>
</html>

Grz, Kris.

_{Wednesday, July 20, 2011 12:34 PM}

You really should look how to implement this completely in the client, is not a good idea to cause a postback every 5 seconds for every user of your application, you could use JavaScript timers, call a WebService using ASP.NET AJAX or jQuery if necessary, and use JavaScript and the DOM to show the new data to the user, all of this will create a much better user experience and a much faster application that uses less server resources.

_{Wednesday, July 20, 2011 12:46 PM}

Thanks for the reply.

I just mentioned it as 5 seconds for testing. Eventually it will change to every 2 minutes or so. And it will not cause a post back , since i included the update panel. Correct me if I am wrong.

Thanks

_{Wednesday, July 20, 2011 2:14 PM}

I've never heard of the Timer control, but if I had to guess, I'd say that the OnTick event is meant for some form of a server-side call, perhaps as part of the AJAX Toolkit. Either way, it doesn't seem as though it can reference a javascript function, atleast not through the "javascript:" prefix like that. Not really sure what you are trying to do, but if you just want to run something every N seconds, this Timer control seems to be overkill. Just use javascript's setTimeout.

http://www.w3schools.com/js/js_timing.asp

_{Wednesday, July 20, 2011 2:19 PM}

Hi,

onTick = "javascript:initiate_geolocation()"

This needs to be a server side method in your page. Learn more about it here.

What you're likely after is the setTimeout or setInterval function in javascript itself: http://www.elated.com/articles/javascript-timers-with-settimeout-and-setinterval/.

Grz, Kris.

_{Wednesday, July 20, 2011 2:35 PM}

Hi,

onTick = "javascript:initiate_geolocation()"

This needs to be a server side method in your page. Learn more about it here.

What you're likely after is the setTimeout or setInterval function in javascript itself: http://www.elated.com/articles/javascript-timers-with-settimeout-and-setinterval/.

Grz, Kris.

Thanks for the reply.

If I give server side method like Timer_Tick in OnTick ,Should I call the javascipt function from code behind( Timer_Tick event). In that case, Can I add the attributes for the timer in Page_Load(Server Side)

I am asking this because I need to execute a javascript function in the timer tick event like say for every 1 or 2 min, the javascript function should be executed and I should get the geocodes

Thanks

_{Wednesday, July 20, 2011 2:47 PM}

If I give server side method like Timer_Tick in OnTick ,Should I call the javascipt function from code behind( Timer_Tick event).

Why make a round trip to the server unnecessarily?

I am asking this because I need to execute a javascript function in the timer tick event like say for every 1 or 2 min, the javascript function should be executed and I should get the geocodes

Instead of a timer control, I would suggest you use JS's setInterval method - calls javascript code repeatedly over the specified time interval.

_{Wednesday, July 20, 2011 2:48 PM}

I am asking this because I need to execute a javascript function in the timer tick event like say for every 1 or 2 min, the javascript function should be executed and I should get the geocodes

I think in this case it's better to stay away from the updatepanel/timer control combination and simply go for setInterval or setTimeout to call the javascript function every 2 minutes.

Grz, Kris.

_{Wednesday, July 20, 2011 2:49 PM}

Could you please provide me the example so that I can refer ?

Thanks

_{Wednesday, July 20, 2011 2:52 PM}

Refer to my first post:

http://www.w3schools.com/js/js_timing.asp

_{Wednesday, July 20, 2011 2:54 PM}

Here, this example uses the setInterval method to display a simple clock. Notice how the code is executed repeatedly after the specified time interval, until you click on stop.

_{Wednesday, July 20, 2011 2:55 PM}

setInterval(function () {
    initiate_geolocation();
}, 60000);
// Will execute the function EVERY 1 minute (60 seconds * 1000 milliseconds)

setTimeout(function () {
    initiate_geolocation();
}, 60000);
// After 1 minute, the function will execute ONCE

_{Wednesday, July 20, 2011 3:01 PM}

The UpdatePanel only hides the postback from the user, the page still goes through the whole page life cycle, if you want to avoid postbacks you should call WebServices instead.

_{Wednesday, July 20, 2011 3:18 PM}

When I used that SetTimeOut, I got rid of that error but i have a problem(couldn't get the geocodes) , May be I am doing something wrong...

here is the Javascript

And this is my button definition

I couldn't get anything....

Thanks

_{Wednesday, July 20, 2011 3:29 PM}

Change your button to:

<telerik:RadButton ID="btnShow" runat="server" Text="Show" onClientClick="timerset();return false;"></telerik:RadButton>

_{Wednesday, July 20, 2011 4:06 PM}

Appreciate the help

Got it working with setInterval

Thank you all..

Last updated on 2011-07-20

Share via

How to call a Javascript function in timer Tick event

Question

All replies (16)

Additional resources