Commits

Alexander Dahl  committed 981297b Draft

intermediate state

  • Participants
  • Parent commits 9b42631

Comments (0)

Files changed (2)

File page329.html

+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
+    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" lang="de" xml:lang="de">
+<head>
+    <title>2011 Race Finishers</title>
+    <link href="styles/page295.css" rel="stylesheet" type="text/css" />
+</head>
+<body>
+    <h2>2011 Race Finishers!</h2>
+
+    <div id="main">
+        <ul class="idTabs">
+            <li><a href="#male">Male Finishers</a></li>
+            <li><a href="#female">Female Finishers</a></li>
+            <li><a href="#all">All Finishers</a></li>
+            <li><a href="#new">Add New Finisher</a></li>
+        </ul>
+        <div id="male">
+            <h4>Male Finishers</h4>
+            <ul id="finishers_m"></ul>
+        </div>
+        <div id="female">
+            <h4>Female Finishers</h4>
+            <ul id="finishers_f"></ul>
+        </div>
+        <div id="all">
+            <h4>All Finishers</h4>
+            <ul id="finishers_all"></ul>
+        </div>
+        <div id="new">
+            <h4>Add New Finisher</h4>
+            <form id="addRunner" name="addRunner" action="service.php" method="POST">
+                First Name: <input type="text" name="txtFirstName" id="txtFirstName" /> <br />
+                Last Name: <input type="text" name="txtLastName" id="txtLastName" /> <br />
+                Gender: <select id="ddlGender" name="ddlGender">
+                    <option value="">--Please Select--</option>
+                    <option value="f">Female</option>
+                    <option value="m">Male</option>
+                </select><br/>
+                Finish Time: 
+                <input type="text" name="txtMinutes" id="txtMinutes" size="10" maxlength="2" />(Minutes)
+                <input type="text" name="txtSeconds" id="txtSeconds" size="10" maxlength="2" />(Seconds)
+                <br/><br/>
+                <button type="submit" name="btnSave" id="btnSave">Add Runner</button>
+                <input type="hidden" name="action" value="addRunner" id="action" />
+            </form>
+        </div>
+    </div>
+
+    <h4>Congratulations to all our finishers!</h4>
+    <button id="btnStart">Start Page Updates</button>
+    <button id="btnStop">Stop Page Updates</button>
+    <p id="freq"></p>
+    <p>Last Updated: <em id="updatedTime"></em></p>
+
+    <script src="scripts/jquery-1.6.4.min.js" type="text/javascript"></script>
+    <script src="scripts/page334.js" type="text/javascript"></script>
+    <script src="scripts/jquery.idTabs.min.js" type="text/javascript"></script>
+</body>
+</html>

File scripts/page334.js

+var FREQ = 10000;
+var repeat = true;
+
+function clearInputs() {
+    §('#addRunner:input').val('');
+}
+
+function getTime() {
+    var a_p = "";
+    var d = new Date();
+    var curr_hour = d.getHours();
+
+    (curr_hour < 12) ? a_p = "AM" : a_p = "PM";
+    (curr_hour == 0) ? curr_hour = 12 : curr_hour = curr_hour;
+    (curr_hour > 12) ? curr_hour = curr_hour - 12 : curr_hour = curr_hour;
+
+    var curr_min = d.getMinutes().toString();
+    var curr_sec = d.getSeconds().toString();
+
+    if (curr_min.length == 1) { curr_min = "0" + curr_min; }
+    if (curr_sec.length == 1) { curr_sec = "0" + curr_sec; }
+
+    $('#updatedTime').html(curr_hour + ":" + curr_min + ":" + curr_sec + " " + a_p );
+}
+
+function getTimeAjax() {
+    $('#updatedTime').load( "time.php" );
+}
+
+function getXMLRacers() {
+    $.ajax({
+        url:        "page295/finishers.xml",
+        cache:      false,
+        dataType:   "xml",
+        success:    function(xml){
+            $('#finishers_m').empty();
+            $('#finishers_f').empty();
+            $('#finishers_all').empty();
+
+            $(xml).find("runner").each(function(){
+                var info = '<li>Name: ' + $(this).find("fname").text() +
+                    ' ' + $(this).find("lname").text() + '. Time: ' +
+                    $(this).find("time").text() + '</li>';
+                if ( $(this).find("gender").text() == "m" ) {
+                    $('#finishers_m').append(info);
+                } else if ( $(this).find("gender").text() == "f" ) {
+                    $('#finishers_f').append(info);
+                } else { }
+                $('#finishers_all').append(info);
+            });
+
+            getTimeAjax();
+        }
+    });
+}
+
+function showFrequency() {
+    $("#freq").html( "Page refreshes every " + FREQ/1000 + " second(s)." );
+}
+
+function startAJAXcalls() {
+    if ( repeat ) {
+        setTimeout( function() {
+                getXMLRacers();
+                startAJAXcalls();
+            },
+            FREQ
+        );
+    }
+}
+
+jQuery(document).ready(function(){
+
+    $('#addRunner').submit(function(){
+        return false;
+    });
+
+    $('#btnSave').click(function(){
+        var data = $("#addRunner :input").serializeArray();
+        $.post($("#addRunner").attr('action'), data, function(json){
+            if ( json.status == "fail" ) {
+                alert( json.message );
+            }
+            if ( json.status == "success" ) {
+                alert( json.message );
+                clearInputs();
+            }
+        }, "json" );
+    });
+
+    $('#btnStart').click(function(){
+        repeat = true;
+        startAJAXcalls();
+        showFrequency();
+    });
+
+    $('#btnStop').click(function(){
+        repeat = false;
+        $('#freq').html( "Updates paused." );
+    });
+
+    showFrequency();
+    getXMLRacers();
+    startAJAXcalls();
+});