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

Discussion in 'Programming' started by TechBoyJK, Nov 28, 2012.

  1. TechBoyJK

    TechBoyJK Lifer

    Joined:
    Oct 17, 2002
    Messages:
    16,211
    Likes Received:
    1
    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>
    
     
  2. Markbnj

    Markbnj Elite Member <br>Moderator Emeritus
    Moderator

    Joined:
    Sep 16, 2005
    Messages:
    15,682
    Likes Received:
    3
    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;
     
  3. TechBoyJK

    TechBoyJK Lifer

    Joined:
    Oct 17, 2002
    Messages:
    16,211
    Likes Received:
    1
    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.
     
  4. TechBoyJK

    TechBoyJK Lifer

    Joined:
    Oct 17, 2002
    Messages:
    16,211
    Likes Received:
    1
    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>
     
  5. Dratickon

    Dratickon Junior Member

    Joined:
    May 13, 2012
    Messages:
    21
    Likes Received:
    0
    One issue I'll bring to your attention:
    Code:
    if (hitCount.[B]HitCount [/B]> hitCount){
        var hitCount = hitCount.[B]hitCount[/B];
    
    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.
     
  6. Markbnj

    Markbnj Elite Member <br>Moderator Emeritus
    Moderator

    Joined:
    Sep 16, 2005
    Messages:
    15,682
    Likes Received:
    3
    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.
     
  7. sourceninja

    sourceninja Diamond Member

    Joined:
    Mar 8, 2005
    Messages:
    8,576
    Likes Received:
    2
    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.
     
  8. GregGreen

    GregGreen Golden Member

    Joined:
    Dec 5, 2000
    Messages:
    1,663
    Likes Received:
    0
    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...
     
  9. Leros

    Leros Lifer

    Joined:
    Jul 11, 2004
    Messages:
    21,867
    Likes Received:
    0
    This is my feeling as well. Somebody just idling on your site will be sending 360 requests to your server every hour.