Enter your email address to subscribe to this blog.

Recent Comments

Intro to Spring Security Core for Grails
Eric Pierce said: Thanks for these screencasts, Dan! You made it crazy simple to get up and running w/security core h... [More]

Removing duplicates from an array of objects
Arvind said: Great tip, can't thank you enough for this. [More]

Intro to Spring Security Core for Grails
Santosh said: Thanks much for putting up these screencasts. As the others here I'm a beginner and I've been having... [More]

Grails Spring Security Plugin - Logout postOnly setting
eriihine said: I still had some issues with this one. It seems that the href link is always generating a GET method... [More]

Intro to Spring Security Core for Grails
Dan Vega said: Just a heads up but I decided to write up a quick post on your question just in case it trips up any... [More]

Ajax asynchronous vs synchronous request

There are times (like the one I ran into today) where you don't want an ajax request to be asynchronous. By default all ajax requests are set to asynchronous by default which can cause some strange behavior if your'e not paying attention. I am going to create a really basic example here that should outline the problem. First we have a basic template that allows the user to enter their name, click a button and somewhere we will write some output to the container div. Next I will setup a click handler on our button. We will get the name of the user by grabbing the value of our input box. Finally we will call a get messages function that will contain the logic to get our messages. That method will return an array and we will loop over that array and print the messages to our container div.

Now its time to build out our get messages function. First lets just start by adding some static messages to an array and returning that. This works great so far but I forgot that one of my messages in api call somewhere else. I need to make a request to this API and it will return another message for me to add to my messages array. API.cfc
So everything looks pretty good here right? The problem is our program still only prints out our first 2 static messages. If you remember to the beginning of this post I mentioned that all ajax request are asynchronous by default. So while our program is talking to our API execution is returned to our program and the 2 static messages are returned. There are a couple approaches to solving this but the easiest is making our ajax request synchronous and to do that all you have to do is set the async property of the ajax method to false. Then your request will finish, return and you can add your new messages to the messages array. Simple example but important to understand.


jQuery.each() gotcha

I had an issue at work today that really had me scratching my head. The $.each() function can be used to iterate over any collection, whether it is a map (JavaScript object) or an array. Take the following example. I have an array of numbers and during each iteration I want to print out the current value. Remember JavaScript is 0 based index so if you printed the index out you would be 1 behind on every loop.

So that's the basics of each and what it can do for you. I can't use the exact problem I had at work so I have worked up a scenario that will illustrate the issue I was having. Say we had a list of 10 items each with an id and some text. What I want to do is create a random number from 1-20 and then loop through my list items to see if I have a node with an id of my random number. First I create a random number and then pass it to our itemExists function. The item exists function will check to see if it exists and if it does return true, else false. You would expect that for numbers 1-10 you would see "x exists" but no matter what the number is you will see "x does not exist". Do you know why? If so what will that function return every single time?

The problem lies in the fact that I didn't really understand how each() works. If you look in the docs you will see the following.

We can break the $.each() loop at a particular iteration by making the callback function return false. Returning non-false is the same as a continue statement in a for loop; it will skip immediately to the next iteration.
So basically in our example when I find the random number in our list i just continue looping. When we don't find it and return false we basically break out of the loop and continue execution. So its basically getting to the end of the function block and returning control to the caller. Back to JavaScript basics here, what does a function return if no return is defined? If you said undefined you're correct. So basically no matter what happened in our item exists function we were returning undefined and because it was not true we were printing "x does not exist" every single time.


Writing efficient code

What is efficient code?

Efficient: Achieving maximum productivity with minimum wasted effort or expense.
In some instances this means writing less code but but that's not always the case. When we first start off as eager programmers (and wanna be hackers) our goal is simply to get something to work. As we gain experience we start to recognize patterns and problems that we have encountered before. With this experience we should have a understanding of how to better solve a problem. This is where refactoring comes into play and has become one of the greatest tools I have. The reason I bring this up is because I was writing some jQuery today and came across a problem that I would have solved differently even 3 years ago. I would like to share this example with you.

I have 2 select boxes that are not related to each other in any way. I do want to force the user to select something from the 1st drop down before a choice from the 2nd one can be made. I have decided to disable the 2nd drop down so that when the page loads they can't interact with it. When the user selects an item from the first drop down and that items value is not empty (default) we will enable the drop down. If we add a change handler to the first drop down we should be able to accomplish this. First we grab the value of the first drop down and if its not empty we enable the second drop down. If the second drop down is enabled and for whatever reason select the default (Select Device Type) then we need to disable the second drop down. Here in lies another problem, If I disable the second drop down I would like to revert to its default state. Now I could set the value of the drop to empty which will accomplish this.

This would of been my thinking 3 years ago but wiser Dan knows there is a better way to accomplish the same task. The disabled attribute of our second drop down is tied to the state of the first drop down. What we can do is use that state, in the form of a ternary operator to make our "if" decision for us. We can also chain our methods and set the value of this drop down to empty.

I know this is a fairly small example of writing efficient code but we could write a book on this subject (many have). Next time you are looking at a problem no matter how small or trivial just ask yourself if there is a better solution to your problem. If there is you will be doing your future self a big favor!


TV Tuesday: Dreamweaver CS5.5 - jQuery Mobile Pages

jQuery Mobile greatly simplifies the implementation of mobile-specific interfaces while still using clean, semantic HTML and CSS. However, the way pages are implemented in jQuery Mobile can be a bit of a shift for new mobile designers. In this video we'll look at the components of a jQuery Mobile "page", and how you can quickly build out an entire jQuery mobile application within a single HTML file.


Flickr Browse: tinyMCE custom toolbar button

The other day I ended up building a custom toolbar button for tinyMCE. I put it out on twitter and asked if anyone was interested in a demo. I got a couple responses so I decided to sit down and write a more practical example. I put a quick video tutorial that you can view by clicking on the image below. I have also pushed the code for this example up to my github account.

On a side note I was thinking about building some plugins for tinyMCE. I could image selectors for Flickr, Facebook and Twitter being really useful. So the question is would anyone be interested in this and would anyone be interested in paying a couple bucks for these plugins (10/20).


More Entries