Recent twitter entries...

Steve Sanderson tutorial on Knockout.js

Posted by Brad | Posted in Recommendations | Posted on 25-07-2011

ko logo 245x71 Steve Sanderson tutorial on Knockout.jsThe part of the guathon presentation I went to a couple of months ago in Leicester square that went right over my head was one by Steve Sanderson on a JavaScript framework called Knockout, it’s obviously a presentation he has delivered many times as I have seen from one of the mix recorded presentations you can check it out and see how much you can absorb at the initial speed.

I emailed Steve to get the presentation slides afterwards which he kindly sent over, however he just took time out one weekend to publish a really nice tutorial section at learn.knockoutjs.com if you want to get your head around a framework that can observably bind text and form elements to update in real time on the client without AJAX then have a look at the tutorials which make far more sense than the super fast presentation!.

I need to update my AutoHotKey library now to get some of these useful snippets in there (text expanders are a bit lazy but so much more efficient than remembering everything and repetitive typing)

Continue Reading

The JQuery Datepicker

Posted by Brad | Posted in Coding | Posted on 13-06-2011 

<!DOCTYPE html>
<html>
<head>
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
 
<script type="text/javascript">
$(document).ready(function () {
$("#datepicker").datepicker();
});
</script>
<title>JQuery Datepicker example</title>
</head>
<body>
 
<input type="text" id="datepicker" />
 
</body>
</html>

See how the JQuery Datepicker looks below, the example uses code from the google CDN so is quick to load for your visitors no matter where they are in the world.

Continue Reading

Using JQuery AJAX and ASP to set the innerHTML of a textarea

Posted by Brad | Posted in Coding | Posted on 10-06-2011

First create your page on the server that can take a parameter to get some form of data and return matches found, in this case I just want to get a body of text from a database. Note that you want to prevent caching of the response in the browser above the include that supplies the connection string in this classic ASP server side script.

<%@LANGUAGE="VBSCRIPT" CODEPAGE="65001"%>
<%
pStr = "private, no-cache, must-revalidate"
Response.ExpiresAbsolute = #2000-01-01#
Response.AddHeader "pragma", "no-cache"
Response.AddHeader "cache-control", pStr
%>
<!--#include file="../Connections/yourConnection.asp" -->
<%
Dim ID
ID = Request("ID")
 
Set cmd = Server.CreateObject ("ADODB.Command")
cmd.ActiveConnection = ConnString
cmd.CommandText = "SELECT TOP 1 Message FROM dbo.Table WHERE ID = " & ID
Set rs = cmd.Execute
If rs.eof = false Then
Response.Write(rs("Message"))
End If
 
Set rs = nothing
%>

Below you find the client webpage containing the code required to change the innertext of a textarea to the response returned by the page above. You don’t need to worry about uploading the JQuery API to your server as it’s hosted on Google’s CDN to make it load nice and snappy geographically.

<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>AJAX post with parameters</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript" language="JavaScript">
 
$(document).ready(function(){
$("#getMessage").click(function(){
 
$.ajax({
type: "POST",
url: "../AJAX/FilenameOfAboveScript.asp",
data: "caseid=<% =Request("ID") %>",
success: function(msg){
$("#message").val(msg);
//alert(msg);
}
});
 
});
});
 
</script>
</head>
 
<body>
<form action="" method="post" name="form1">
<input name="id" id="id" type="hidden" value="<% =Request("ID") %>" />
<p><input name="getMessage" id="getMessage" type="button" value="get message" /></p>
<p><textarea name="message" id="message" cols="30" rows="20"></textarea></p>
</form>
</body>
</html>

Continue Reading