Monday, 3 September 2012

Paralympic Medal Table

G'day:
This is just a quick one.  You'll've noticed I've put a medal table for the Paralympics up over on the right there.  During the Olympics I had a coupla tables there, which I have now retired and posted the final state of the table along with the code, here.

During the Olympics, I was maintaining those tables by hand: I had to run a script, generate the mark-up, edit the blog widget and paste the mark-up in, and update the timestamp.  Tedious.

Now that I have access to a CF server, I've updated the Paralympic table to run automatically.



What I've done is this:

In the widget on my blog template, I've got this code:

<script src="http://code.jquery.com/jquery-1.7.2.min.js" type="text/javascript"> </script>
<script src="http://adamcameroncoldfusion.cfmldeveloper.com/paralympicmedals/paralympicmedals.js" type="text/javascript"> </script>
<p>[text snipped]</p>
<p>[text snipped]</p>
<div id="medals">
</div>
<p>[text snipped]</p>

Over on cfmldeveloper, I've got paralympicmedals.js:

$(document).ready(
    function(){
        $.ajax({
            url            : "http://adamcameroncoldfusion.cfmldeveloper.com/paralympicmedals/paralympicMedals.cfm",
            dataType    : "jsonp",
            data        : {handler:"displayIt"},
            success        : function(data, textStatus, jqXHR){
            },
            error        : function(jqXHR, textStatus, errorThrown){
                console.log(jqXHR);
                console.log(textStatus);
                console.log(errorThrown);
            },
            complete    : function(jqXHR, textStatus){
            }
        });
    
        displayIt = function(data){
            $("#medals").html(data.table);
        };
    }
);

And paralympicMedals.cfm is the same as the previous code I used to generate the tables for the Olympic medal tables (at the link I mentioned above), except I'm wrapping it in this:

<cfsetting showdebugoutput="false">
<cfsilent>
<cfsavecontent variable="table">
<cfcache action="cache" stripwhitespace="true" timeout="#createTimespan(0,1,0,0)#">
    <!---orgininal code here --->
</cfcache>
</cfsavecontent>
<cfset jsResponse = '#URL.callback#(#URL.handler#({table:"#jsStringFormat(table)#"}));'>
</cfsilent><cfcontent reset="true" type="application/json"><cfoutput>#jsResponse#</cfoutput>

So basically the blog page calls some JS on my remote CF instance, which makes an AJAX request to a CFM file which generates some HTML, wraps it up as JSONP, sends it back to the JS, which sends it back to the blog page, and sticks it in the "medals" <div>.

I'm perhaps easily amused, but I quite like being able to do that :-)

Ooh! And I'm off to see some wheelchair rugby tomorrow evening.  That should be cool!

Time for some dinner.

--
Adam
at