Mercurial > hg > chronicle
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>