Getting started with jQuery
Maybe you’re like me a month ago: you’ve heard great things about jQuery; you would love to get to know the basics; but you have better things to do than to aimlessly walk through tutorials. I was lucky enough to be working alongside a jQuery-savvy UI developer on a recent project these past few weeks, and I’ve managed to pick up a few tricks. So let’s see if you can know what I know by the end of this blog entry, and start littering your client-side scripts with dollar signs for your next project 
At the most fundamental level, jQuery is a great way to save on typing stuff like document.getElementById("uxFirstName").value. Pre-jQuery, we would write:
<p><input type="text" id="uxFirstName" name="uxFirstName" /></p>
<p><input type="button" id="uxClickMe" name="uxClickMe" value="Click me" onclick="uxClickMe_click()" /></p>
<script type="text/javascript">
//<![CDATA[
function uxClickMe_click() {
alert(document.getElementById("uxFirstName").value);
}
//]]>
</script>
With jQuery:
<p><input type="text" id="uxFirstName" name="uxFirstName" /></p>
<p><input type="button" id="uxClickMe" name="uxClickMe" value="Click me" /></p>
<script type="text/javascript">
//<![CDATA[
$(document).ready(function() {
$("#uxClickMe").bind("click", function() {
alert($("#uxFirstName").val());
});
});
//]]>
</script>
Important takeaways: You can place multiple $(document).ready(function() { ... }); anywhere within the document body. Using CSS notation, "#elementId" denotes the element id, and ".className" denotes the element class. (The latter is very useful for stuff we want to do on multiple elements.) What I like best is the .bind() method, this frees us from messing up elements with attributes such as onclick and onblur.
Okay, let’s move on to more interesting stuff. We want to be able to toggle a div to show and hide its contents with a “slide in/slide out” effect. The best example would be a shopping cart, but its HTML would be a bit too involved, so we’ll just use the example of a textarea for the user to key in optional remarks in a web form.
<a href="#" class="add-remarks">Additional remarks</a>
<div class="optional remarks">
<textarea id="uxRemarks" name="uxRemarks" cols="80" rows="5"></textarea>
</div>
<script type="text/javascript">
//<![CDATA[
$(document).ready(function() {
$("div.remarks").hide();
$(".add-remarks").bind("click", function(e) {
e.preventDefault();
$("div.remarks").toggle("slow");
});
});
//]]>
</script>
So, by default, the big textarea is hidden (line 8), and if the user wants to type in it, he clicks on the link, and the textarea slides into view (lines 9-12). Nice. Now we have an additional consideration: what if there is a postback due to some user action? Then whatever the user had typed in would be hidden upon page load. The solution would be to replace $("div.remarks").hide(); with the following:
$("div.optional").each(function() {
if ($(this).children().is("textarea")) {
var textarea = $(this).children("textarea");
// assume that there'll only be one textarea in div.optional
var text = textarea.val();
if (text == null || text.length == 0) {
$(this).hide();
}
}
});
So, for each div with class=”optional”, if it has a child element that is a textarea, and the textarea doesn’t contain any text, hide the div. Note: $(this) refers to $("div.optional"). So you can have many optional textareas, and each would be hidden only if it’s empty.
Well, that’s essentially all I know (for now) about jQuery, and I hope you found $(this) (heh) useful.
Integrating jQuery Autocomplete plugin with ASP.NET
I wanted to use the jQuery Autocomplete plugin:
$(document).ready(function() {
var url = "SomeData.aspx";
$("#myTextBox").autocomplete(url, {
minChars: 2
});
});
Where the url needs to return with one value on each line. I suppose an HTTP handler (.ashx) would be more suitable for this, rather than a web form, but I wanted to utilize the MVP framework already in place which had all the code needed to get the data from the DB. When I tried to get the .aspx to output just plain text without any HTML tags by removing the MasterPageFile attribute from the @Page directive, I got the following error:
Using themed css files requires a header control on the page. (e.g. <head runat=”server” />).
After mucking around a bit, I found that the following worked for me:
<%@ Page Language="C#" AutoEventWireup="true" Codebehind="SomeData.aspx.cs" Inherits="MyProject.SomeData" Theme="" %>
Not actually a YouTube video, but in a sense, better
Best to use headphones.
Impressions of Yangon
- For the menfolk, smart casual consists of short- or long-sleeved shirt, sarong (longyi, pronounced “long-jee”), and velvet-and-leather flip-flops. At any time, 60% to 70% of the male population can be seen in this attire, so this is the first thing a foreigner would notice.
- Public transportation is plentiful. There are your normal buses and taxis, and there are also mini pickup trucks with two rows of benches and a roof, usually packed to the max with people hanging on to the back.
- There is some congestion during peak hours, but in general, the roads are clear, making for smooth driving. And parking is easy to find – one can park right opposite, or at most, across the street from the store or residence.
- I would say more than 90% of the cars are right-hand drive, but people drive on the left.
- Foodstalls are everywhere; sidewalks of busy streets are lined with them. The tables and stools are smallish and low on the ground.
- Like KL, Indian Muslims are aplenty; halal food is no problem whatsoever. The fare is also familiar: naan, roti canai (called paratha), briyani. And of course, tea with milk. But their briyani and tea are much better
- An overwhelming majority of vehicles are those from the 70’s and 80’s, but very well maintained, a lot are almost like new. The Toyota Corolla is by far the most popular model on the road. I spotted a number of Mazdas and a smattering of Hondas, but oddly enough no Mitsubishi cars, save for the Pajero.
Selamat Hari Raya Oso!
© 2009 The Zik!
