tutorials:zencartmods:daily_ajax.html
Differences
This shows you the differences between two versions of the page.
| Both sides previous revision Previous revision Next revision | Previous revision | ||
|
tutorials:zencartmods:daily_ajax.html [2011/06/22 15:49] daigo |
tutorials:zencartmods:daily_ajax.html [2016/01/28 18:05] (current) |
||
|---|---|---|---|
| Line 1: | Line 1: | ||
| ==== AJAXify your Daily stats ==== | ==== AJAXify your Daily stats ==== | ||
| + | |||
| + | {{:tutorials:zencartmods:dailystats.gif|}} | ||
| Last week, we created a [[daily_stats.html| daily stats]] page. If you're like us, then you compulsively click refresh on this page way too often! So lets AJAX-ify this page so that it updates automatically every time someone makes an order. | Last week, we created a [[daily_stats.html| daily stats]] page. If you're like us, then you compulsively click refresh on this page way too often! So lets AJAX-ify this page so that it updates automatically every time someone makes an order. | ||
| Line 11: | Line 13: | ||
| If you're hosting it on your own server, then add into the **<head>** section of daily_stats.php | If you're hosting it on your own server, then add into the **<head>** section of daily_stats.php | ||
| - | <code> | + | <code html> |
| <script src="https://you.path/to.jquery.js"></script> | <script src="https://you.path/to.jquery.js"></script> | ||
| </code> | </code> | ||
| or if you're using a CDN (this one is Google) then use | or if you're using a CDN (this one is Google) then use | ||
| - | <code> | + | <code html> |
| <script type="text/javascript" src="https://www.google.com/jsapi?key=YOUR_API_KEY"></script> | <script type="text/javascript" src="https://www.google.com/jsapi?key=YOUR_API_KEY"></script> | ||
| <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script> | <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script> | ||
| Line 27: | Line 29: | ||
| At the top of **daily_stats.php**, add this code AFTER the **require('includes/application_top.php');** | At the top of **daily_stats.php**, add this code AFTER the **require('includes/application_top.php');** | ||
| - | <code> | + | <code php> |
| $action = $_POST['action']; | $action = $_POST['action']; | ||
| Line 53: | Line 55: | ||
| This will make daily_stats.php echo out 2 different JSON files, depending on post data. 'latest' will be used for polling (we can poll the server every 5, 10, 15 seconds or so) and 'stats' will be triggered by new information in the polling event. | This will make daily_stats.php echo out 2 different JSON files, depending on post data. 'latest' will be used for polling (we can poll the server every 5, 10, 15 seconds or so) and 'stats' will be triggered by new information in the polling event. | ||
| + | |||
| + | There's and **exit()** after it returns the data so that if we jsut want the JSON data, it wont continue rendering the page or anything. | ||
| === Client Side Javascript === | === Client Side Javascript === | ||
| Line 58: | Line 62: | ||
| This part depends heavily on what you're daily_stats.php page looks like, but you should be able to take this structure and apply it to any sort of style. | This part depends heavily on what you're daily_stats.php page looks like, but you should be able to take this structure and apply it to any sort of style. | ||
| - | Put a script tag inside the head ta and make it look like this. | + | Put a script tag inside the **head** section and make it look like this. |
| <code javascript> | <code javascript> | ||
| Line 73: | Line 77: | ||
| $.post(DAILY_JAX, "action=latest", function(json_latest){ | $.post(DAILY_JAX, "action=latest", function(json_latest){ | ||
| if(json_latest.orders_id != last_order_id){ | if(json_latest.orders_id != last_order_id){ | ||
| - | if(last_order_id == 0){ | ||
| - | last_order_id = json_latest.orders_id; | ||
| - | }else{ | ||
| last_order_id = json_latest.orders_id; | last_order_id = json_latest.orders_id; | ||
| $.post(DAILY_JAX, "action=stats", function(json_stats){ | $.post(DAILY_JAX, "action=stats", function(json_stats){ | ||
| Line 84: | Line 85: | ||
| | | ||
| }, 'json'); | }, 'json'); | ||
| - | } | ||
| } | } | ||
| setTimeout(function() { check_for_new_order(); }, 15000); // This will wait x amount of time before calling itself again (in this case 15 seconds) | setTimeout(function() { check_for_new_order(); }, 15000); // This will wait x amount of time before calling itself again (in this case 15 seconds) | ||
| Line 94: | Line 94: | ||
| </code> | </code> | ||
| + | As you can tell most of the meaty stuff here is the [[http://docs.jquery.com/Post|$.post()]] function from jQuery. the first call to post uses "action=latest" which should give it back the order id of the last order. If this is different from the order_id that javascript already has, it will post using "action=stats". Either way, after executing it will call itself again in 15 seconds. | ||
| + | |||
| + | If you used our daily_stats.php script from before, then here is a working example using that page, all AJAX-ed up. Make sure to point this file to a real copy of jquery.js. | ||
| + | |||
| + | |||
| + | {{:tutorials:zencartmods:daily_stats_ajax.php.zip|}} | ||
/home/ladyada/public_html/wiki/data/attic/tutorials/zencartmods/daily_ajax.html.1308757741.txt.gz · Last modified: 2016/01/28 18:05 (external edit)
Page Tools
Except where otherwise noted, content on this wiki is licensed under the following license: CC Attribution-Share Alike 4.0 International
