Ajax/jQuery question: Setting up script to run at timed interval

TechBoyJK · 11-28-2012, 01:14 PM

Hi Guys,

I'm trying to build an ajax/jquery function that will run every ten seconds, and update a value if the ajax/getJson returns a value greater than the initial declared value. This is for a page view counter I am building.

1. When the page first loads, a JS var 'hitCount' will be declared, and it will be set to the value retrieved at the time of request.

2. Every ten seconds, I want a script to run, that will make a getJson request, check and see if the JSON value is greater than the current 'hitCount' value, and if so, update the hitCount value.

3. If the hitCount value was updated, the script will then update the displayed variable to the current value.

I'm still getting used to writing in JS, so I'm not sure if my syntax is correct. I think I'm pretty close though. Can someone look over this and tell me what to correct?

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>
<head>
	<title>Untitled</title>
	
<script> var hitCount = 1 </script>

<script>
$(document).ready(function(){

	setInterval("

		$.getJSON("http://myurl.com/test.cfc?method=dnsHitCount&dnsID=108,function(hitCount){	
			if (hitCount.HitCount > hitCount){
				var hitCount = hitCount.hitCount;
				window.alert("hitCount has updated");
		/*NOT SURE HOW TO MODIFY THE DIV'S OUTPUT TO REFLECT NEW VALUE */
				
			});
		});

	",10000);
});
</script>
	
</head>

<body>

The current hit count is 

<div id="dnsGraph">
  <script language="javascript">
     document.write (hitCount); //prints the value of x
  </script>
</div>

</body>
</html>

Markbnj · 11-28-2012, 02:34 PM

First thing I notice is that you've extended the double quotes in the call to .getJson to cover the function definition. The quotes should only encompass the url. Also, while javascript and jquery are tolerant of either quote form, I try to keep to single quotes in javascript. I guess it's your call.

Second, the way your output div is set up the current value is just going to get written to the end of the DOM. You probably want to have a named place to hold the value, i.e.

<div id="hitCount"></div>

Then whenever you want to update it you can just do: $('#hitCount').innerHtml = hitCount;

TechBoyJK · 11-28-2012, 03:02 PM

Thanks Mark. Over the years you've made countless, but meaningful and useful comments to my posts and I really appreciate it. I'll try and digest what you posted and make it work.

TechBoyJK · 11-28-2012, 03:10 PM

Quote:

Originally Posted by Markbnj

Second, the way your output div is set up the current value is just going to get written to the end of the DOM. You probably want to have a named place to hold the value, i.e.

<div id="hitCount"></div>

Then whenever you want to update it you can just do: $('#hitCount').innerHtml = hitCount;

Currently I have

<div id="dnsGraph"><script language="javascript">
document.write (hitCount); //prints the value of x
</script>
</div>

Would it be better just to have the div container blank, and when I set the hitCount variable initially, have a 2nd line that appends that value to the div container?

<script>
var hitCount = 1
$('#hitCount').innerHtml = hitCount;
</script>

<div id="dnsGraph"></div>

Dratickon · 11-28-2012, 08:08 PM

One issue I'll bring to your attention:

Code:

if (hitCount.HitCount > hitCount){
    var hitCount = hitCount.hitCount;

I don't know if you're using Adobe ColdFusion or one of the other CFML options, but be careful with JSON and the Adobe version. The Adobe version will convert all the key names to uppercase depending on how you set up the serialization (i.e. HITCOUNT if you use dot notation). Regardless, remember that JS is case-sensitive.

Also, you'll need to move the part that updates the div to somewhere within the timer function or else your JS variable will update, but the html within the div will remain the same. You could stick it right in the getJSON success callback if you wanted.

Lastly, are you always going to start the hit counter at 1, or are you going to be pulling the initial value from somewhere? If the former, you can just stick "1" in the div and not worry about variables. If you're going with the other option, I'd assume you'd want to stick the CFML variable from the DB query into the div so it appears from the start.

Markbnj · 11-28-2012, 08:19 PM

Your second example is on the right track. The initial count would usually be written into the document by the server, then you'd have a body of script that runs either on document.ready or when the script block is loaded that sets up the timer. When the timer fires you write the new count into the div as in your example.

sourceninja · 11-30-2012, 04:31 PM

Personally, I'd encapsulate your .getJSON call into it's own function (or even part of it's own object) so that your interval call just calls the function.

You may need to call that same .getJSON later after all and the code will look cleaner to the eye.

GregGreen · 12-01-2012, 01:24 AM

It's too late for my sleepy eyes to look at code, but do you really want to query your server every 10 seconds? If it's just some school project, then whatever, but if it's a live production site, it seems like A LOT of overhead unless you truly need to do it every ten seconds...

Leros · 12-01-2012, 03:28 PM

Quote:

Originally Posted by GregGreen

It's too late for my sleepy eyes to look at code, but do you really want to query your server every 10 seconds? If it's just some school project, then whatever, but if it's a live production site, it seems like A LOT of overhead unless you truly need to do it every ten seconds...

This is my feeling as well. Somebody just idling on your site will be sending 360 requests to your server every hour.