Timed redirect without the php, javascript fuzz

Having worked on a few MVC projects in different languages like PHP, C# and Java, there always that "thank you" or "success" page you show after successful operation like an insert or update. Often these pages are automatically redirected to some URL after a set amount of time, normally 10 - 15 seconds. Normally, I use javascript; Something like this:

 <script type="text/JavaScript">  
 <!--  
 setTimeout("location.href = 'http://google.com';",1000);  
 -->  
 </script>  

It works but then I found out there's an easier way to do this via a HTML meta tag. Wikipedia explains it here. This one just automatically redirects you to google.com after 10 seconds.

<meta http-equiv="refresh" content="10;URL='http://google.com/'">  

It does have drawbacks but it works and I don't have to really concern myself if the browser's javascript is on or off.

Tapestry 5.3 and the case of Twitter-Bootstrap disabled attributes

Making Tapestry5 use Twitter-Bootstrap as its style is quite easy but not everything is as it seems.

Bootstrap as some nice form style rules. It's quite easy to add them into normal tapestry5 common components. Like if you need some a textfield to look like a "search-query" field then you would write something like:

// Rounded corners
<input t:type="textfield" t:id="keyword" class="search-query" placeholder="Callslip ID"/>  

or if you need a page or event link to look like a button:

// Tapestry5 eventlink styled as a button via Bootstrap
<a t:type="eventlink" t:event="add" class="btn brn-primary" href="#">Add 1</a>  

But I have recently came across a scenario where I need to display a textfield with data that's by default is uneditable but under certain conditions can be edited. Reading the bootstrap documentation, you have to do something like this:

// As shown in the Bootstrap documentation
<input class="input-xlarge" id="disabledInput" type="text" placeholder="Disabled input here..." disabled>

OK, that should be easy to convert into tapestry5 component and use javascript to enable or disable the field. When done via jquery, removeAttr() or prop(). There's an equivalent to add an attribute.

// Tapestry5 is not happy about disabled attribute
<input class="input-xlarge" id="disabledInput" t:type="textfield" placeholder="Disabled input here..." disabled>

And that's this is where the problem crops up. Tapestry5 doesn't like any unpaired attributes. I'm talking about the disabled attribute at the end of the input element above. Fortunately, Peter Wendorff in the Tapestry mailing-list pointed me to a html microsyntax spec document explaining this unique nuance of html. You have to do a disabled="true" attribute to makeTapestry5 happy.

// How Tapestry5 wants it done
<input disabled="true" class="input-xlarge" t:id="name" t:type="textfield" placeholder="${name}" />

Other ways to write this doesn't work, even if the spec doc says its OK.

• disabled="" -> doesn't work
• disabled="disabled" or disabled='disabled' or disabled=disalbed -> also doesn't work
• disabled -> obviously doesn't work

CoffeeScript and JQuery

Writing JQuery code with CoffeeScript was bit of a Challenge for me. I sort of had to unlearn my previous coding habits so not to make my CoffeeScript look like JavaScript. With me its more of a coding style problem but overall writing DOM manipulation code with CoffeeScript (with JQuery) is more pleasant that I expected. It's certainly shorter.

Let's start with the HTML doc that we will be playing with.

<html>  
   <head>  
     <title></title>  
     <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">  
     <link href="css/mystyle.css" rel="stylesheet">  
     <script src="js/jquery-1.9.1.js" type="text/javascript"></script>  
     <script src="js/Control.js" type="text/javascript"></script>  
   </head>  
   <body>  
     <div id="hoverElem">Hover over <a href="#" id="target">this</a> to show message</div>  
     <div id="message" class="hidden">I be rollin' with CoffeeScript and   
     they be hatin'!</div>  
   </body>  
 </html>   

It's quite easy to figure out what I'm trying to do here. I have a target "this" when you hover over it, it shows some kind of message.

The CSS is also quite simple.

root { 
    display: block;
}

#message{
    border: 1px solid #9966cc;
    margin: 10px;
    padding: 10px;
    text-align: center;
}

.hidden{
    display: none;
}

The real work is again done with our CoffeScript file.

$ ->
  $('#target').mouseover (e) -> $('#message').removeClass 'hidden' 
    
  $('#target').mouseout (e) -> $('#message').addClass 'hidden'

The first line "$ ->" is equivalent to the document.ready() or $.function() for JQuery. The next two lines are where the work is done. The syntax is quite compact to handle a mouseover and mouseout events. The (e) element is the event parameter. The arrow part leads to inside of the function with the removeClass and addClass methods.

The sample here is quite trivial but it does show the basics of using CoffeeScript with JQuery. A couple of more weeks (or months) of puttering around with it I think I can get pretty good with CoffeeScript and another popular JavaScript libraries like underscore, knockout or maybe gmap.

Can't wait to try this out with a real project. Let's see if Odesk got some. *grin*