changeset 156:8b0c547cd015

Updated to show / hide progress as appropriate
author Steve Kemp <steve@steve.org.uk>
date Thu, 03 Jan 2008 22:13:57 +0000
parents 4d2f0d6866e5
children bef6c294a643
files themes/blog.steve.org.uk/ajax.js themes/blog.steve.org.uk/comment-form.inc themes/blog.steve.org.uk/progress.gif
diffstat 3 files changed, 106 insertions(+), 28 deletions(-) [+]
line wrap: on
line diff
--- a/themes/blog.steve.org.uk/ajax.js	Thu Jan 03 21:45:58 2008 +0000
+++ b/themes/blog.steve.org.uk/ajax.js	Thu Jan 03 22:13:57 2008 +0000
@@ -1,33 +1,82 @@
+// -*-mode: C++; style: K&R; c-basic-offset: 4 ; -*- */
+//
+//  Simple collection of Javascript for Ajax form submission.
+//
 
-function submitAjax() 
-{
-   var xhr;
-   try {  xhr = new ActiveXObject('Msxml2.XMLHTTP');   }
-   catch (e)
-   {
-        try {   xhr = new ActiveXObject('Microsoft.XMLHTTP');    }
-        catch (e2)
-        {
-          try {  xhr = new XMLHttpRequest();     }
-          catch (e3) {  xhr = false;   }
-        }
-     }
+
+
 
-    xhr.onreadystatechange  = function()
+//
+//  Get an XMLHTTPRequest object.
+//
+function getXMLHTTPRequest()
+{
+    req = false;
+    if(window.XMLHttpRequest) 
+    {
+        try 
+        {
+             req = new XMLHttpRequest();
+        } 
+        catch(e) 
+        {
+             req = false;
+        }
+    }
+    else if(window.ActiveXObject)
     {
-         if(xhr.readyState  == 4)
-         {
-              if(xhr.status  == 200)
-              {
-                  var o = document.getElementById( "output" );
-                  o.innerHTML = xhr.responseText;
-              }
-              else
-              {
-                  var o = document.getElementById( "output" );
-                  o.innerHTML = "Failed HTTP code " + xhr.status + " " +  xhr.responseText;
-              }
-         }
+        try
+        {
+            req = new ActiveXObject("Msxml2.XMLHTTP");
+        }
+        catch(e) 
+        {
+            try 
+            {
+                req = new ActiveXObject("Microsoft.XMLHTTP");
+            } 
+            catch(e) 
+            {
+                req = false;
+            }
+        }
+    }
+ 
+    return( req );
+}
+
+
+//
+//  Submit the comment.
+//
+function submitComment() 
+{
+    showProgress();
+
+    var xhr = getXMLHTTPRequest();
+    if(! xhr ) 
+    {
+        hideProgress();
+        return;
+    }
+
+    xhr.onreadystatechange = function()
+    {
+        if(xhr.readyState == 4)
+        {
+            if(xhr.status  == 200)
+            {
+                var o = document.getElementById( "output" );
+                o.innerHTML = xhr.responseText;
+            }
+            else
+            {
+                var o = document.getElementById( "output" );
+                o.innerHTML = "Failed HTTP code " + xhr.status + " " +  xhr.responseText;
+            }
+
+            hideProgress();
+        }
     };
 
     data = 'ajax=1';
@@ -38,7 +87,36 @@
     data = data + '&name=' + escape( document.forms[0].name.value );
     data = data + '&mail=' + escape( document.forms[0].mail.value );
     data = data + '&body=' + escape( document.forms[0].body.value );
+
+    //
+    //  Make the request
+    //
     xhr.open("POST", "/cgi-bin/comments.cgi", true);
     xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
     xhr.send(data);
 }
+
+
+//
+//  Show our progress marker.
+//
+function showProgress()
+{
+    var i = document.getElementById( "progress" );
+    if ( i ) 
+    {
+        i.style.display = 'block';
+    }
+}
+
+//
+//  Hide our progress marker.
+//
+function hideProgress() 
+{
+    var i = document.getElementById( "progress" );
+    if ( i ) 
+    {
+        i.style.display = 'none';
+    }
+}
--- a/themes/blog.steve.org.uk/comment-form.inc	Thu Jan 03 21:45:58 2008 +0000
+++ b/themes/blog.steve.org.uk/comment-form.inc	Thu Jan 03 22:13:57 2008 +0000
@@ -13,7 +13,7 @@
 <tr><td colspan="2">Your Comment<br />
 <textarea name="body" rows="10" cols="60">
 </textarea></td></tr>
-<tr><td></td><td align="right"><input type="submit" name="submit" value="Post Comment" onClick="submitAjax(); return false;"></td></tr>
+<tr><td></td><td align="right"><div id="progress" style="display:none;"><img src="progress.gif" alt="" width="36" height="36"></div><input type="submit" name="submit" value="Post Comment" onClick="submitComment(); return false;"></td></tr>
 </table>
 </form>
 <p>Your submission will be ignored if any field is left blank.  But your email address will not be displayed.</p>
Binary file themes/blog.steve.org.uk/progress.gif has changed