Placekitten.com : Placeholder images for demos

Found a new site called placekitten.com that auto-generates placeholder images.  Just pass the image size in the url, like this : http://placekitten.com/g/200/300. 

JQuery templates and tables : use tbody tag

Lets say you have a table, and you want to hide and show a couple of rows with JQuery.  If you're obsessed with div tags, you might try something like this :

<table id="tbData">
<tr><td>Name</td><td>Phone</td></tr>
<div id="phoneList">
</div>
</table>

You set up a template like this :

<script id="phoneTmp" type="text/x-jquery-tmpl">
<tr><td>${firstname},${lastname}</td><td>${address}</td><td>${phone}</td></tr>
</script>

If you do this, your header will show up at the bottom of the table in Firefox, but Internet Explorer will hate you. Or you will hate Internet Explorer. One of those. I get confused. The solution : use tbody tags instead of div tags when you're inserting, showing, or hiding rows in a table with jquery. This forces me to break my longstanding policy of not using any html tags developed after 2000, but it's saved me a lot of headaches.

<table id="tbData">
<tr><td>Name</td><td>Phone</td></tr>
<tbody id="phoneList">
</tbody>
</table>

Click "Result", or the little "play" arrow to see what this code does

JSFiddle : Javascript example website

JSFiddle lets you create editable javascript examples similar to those found on my previous post.  You can create an account and start building examples that other people can play with.  I'm looking forward to trying it out, but for now, I'll show what their examples look like when embedded in a page.

The example window needs to be 500px wide, or it won't work. I had to mess with my blog settings and make the main window wider to get it to work.

It looks like you can't edit the code and experiment with it when the code is embedded in another page. You have to go to the main site here to do that. So it's not as great as I thought it would be. Still useful for complicated examples though.

The following is one of their default examples that uses jquery to display a message and do an animated fade after a second.  Click the "run" arrow, or the "result" tab to see what the code does.

javascript isNumeric

My google search for a javascript isNumeric function yielded almost no useful information, so I thought I'd post something about validating data quickly using regular expressions.  If you are validating a form, you can use the jquery validation library for this, but I wanted something simpler.

On w3schools, I noticed that javascript supports the regular expression syntax that you'd use in perl or vi. 

var patt=/pattern/modifiers;

In my case, I wanted to see if my string contained anything that wasn't a number, period, or dollar sign.  The following code does the trick

function isNumeric(str) {
   var alpha = /[^0-9$.]/g
   return !alpha.test(str);
}

The regular expression [^0-9$.] searches the string for any character that isn't a number (0-9), a dollar sign, or a period. Alpha.test returns true if any "bad" characters are found.  If alpha.test is false, then we have a valid number

JQuery Templates

JQuery templates let you seperate data from display code on the client. I'll explain why this is useful in future posts (if I get around to it). For now, I'll show you how it works.

First, I include the jquery library, and the jquery Template library.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js" type="text/javascript"></script>
<script src="http://ajax.aspnetcdn.com/ajax/jquery.templates/beta1/jquery.tmpl.min.js"></script>

Next, I embed a JSON string on my page. (This is javascript, so it goes in javascript tags).

var strData = '[{"firstname":"Dave","lastname":"Stillman","phone":"555-1212","address":"555 1212 Road, Nampa, ID"},{"firstname":"Donald","lastname":"Trump","phone":"555-5512","address":"255 Somewhere Lane, New York NY"}]';

I use eval to turn my json string into a javascript object.

var data = eval("(" + strData + ")");

 Next, I create a template script.  I create it the same way I would include inline javascript in a page, but I give it type='text/x-jquery-tmpl' instead of type='javascript'.  I also give it a unique ID, so I can access it later.

<script id="addressTmp" type="text/x-jquery-tmpl">
<b>${firstname},${lastname}</b><br>
${address}<br>
${phone}<br>
</script>

Next, I add a div where I want the data to be displayed

<div ID="addressDiv" />

Finally, I use a jquery template command to display the data

$("#addressTmp").tmpl(data).appendTo("#addressDiv");

Links

• jquery template documentation
  
• JQuery template overview at encosia.com
  

Continue reading to view source code and a live demo