London C# ASP.NET MVC Developer Brad McAllister

The JQuery Datepicker

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

[codesyntax lang="html4strict"]

<!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>

[/codesyntax]

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.

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.

[codesyntax lang="asp" lines_start="1"]

<%@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
%>

[/codesyntax]

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.

[codesyntax lang="html4strict" lines_start="1"]

<!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>

[/codesyntax]

Found out how to dynamically create header text images!

Posted by Brad | Posted in Recommendations | Posted on 11-12-2009

If you are looking at the title tags on my blog from today you will notice they look utterly friggin’ beautiful. There is a javascript include called cufon that you upload a font to their site, select a couple of easy options, their site then generates a text file that converts your TTF fonts into a mumbo jumbo code their javascript understands.

Then the magic happens

Upload the generated file, the javascript framework file, and optionally a couple of extra customizations then wack code into your header and footer.

Add to header such as

<script src=”/js/cufon-yui.js” type=”text/javascript”></script>
<script src=”/js/bradfont3_700.font.js” type=”text/javascript”></script>

Add to footer such as

<script type=”text/javascript” src=”/js/cufon-config.js”></script>

Whats the point of all this?

Your regular text titles etc will be converted to super antialiased images on the fly in the browser for a super sleek custom font look, great for sites with a DB back end such as this wordpress blog!.

My cufon-config.js on day1 includes just this