Advanced MeetPro Customization: Automatic Live Updates

You can do a lot to change the look of your live results with just css and basic HTML. If this is what you want you can just sue the upload to web feature and use the Direct Athletics servers. If you want to get really deep into customizing MeetPro, you need to have control over the web host. I use GoDaddy because it’s cheap to have multiple domains hosted on one shared server, but there are many very affordable options available. If you are at a college or university your web development staff should be able to help you get up and running.

One of the first heavy lifting customizations I did was to make the results automatically show up when they were available. Out of the box you need to refresh the page to see any new updates.
The dead simple, but not so elegant way is to add the following code to the index.html template.

<meta http-equiv="refresh" content="60" >

This will cause the whole page to refresh every 30 seconds. This is fine if you haven’t done a lot of customization, but I wanted to refresh just the results and not the whole page.

I created an index.php that was identical to the index.html that MeetPro generates. On my webserver .php is displayed before .html as an index. So now when you go to live.willamettetrack.com/ you get the index.php and not the index.html

I edited my index.html template to contain only the following.

[$results_links]
[$scores]
[$heat_sheet_links]
[$performance_list_links]

In the index.php file I replaced the results links with an empty div.

<div id="results-box"></div>

We need jquery to do some of the heavy lifting so I added the code below to the head of index.php

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>

At the bottom of the page I added a simple jquery function to load the div with the contents from index.htm.

//Initial Results Load
$(document).ready(function(){
$('#results-box').load('index.html');
});

This will populate the results when the page loads, but to get the results to auto refresh I added a little more jquery. A timer that reloads the div with the contents from index.htm.

// Set Results Interval, 60000 = 60 seconds
var r_refresh = setInterval(refreshresults, 60000);
function refreshresults() {
$('#results-box').load('index.html');
}

Because we stripped all of the html out of the index.html template, we can refresh index.php by just updating the results, which is the only thing in index.htm. Now every 60 seconds the contents from index.html replaces what ever is in the results-box div.

With this modification a user can have the page open and as results become available, they will automatically appear without the need for a page refresh. Because of how we did this, if you have lots of images or maybe a twitter widget, that content wont have to be reloaded ever time.

In my next post I will dig a little deeper and explain how I can make a change to my template and not have to use MeetPro to update all the files.

Advanced MeetPro Customization: Automatic Live Updates
Tagged on:             
Highslide for Wordpress Plugin