Search

Subscribe

Enter your email address to subscribe to this blog.

Recent Comments

Groovy's null safe operator
diana said: Thanks for the cold fusion example..... [More]

Groovy's null safe operator
avi said: thanks danvega for the information.... [More]

Sneakerhead Git Branches
James Brown said: The successful branching model you referenced can be used even if here is only one developer on a pr... [More]

Learning Groovy & Grails at Harvard
Sam Farmer said: Signed up and ready to go! [More]

Groovy & Grails - List of Learning Resources
Eric Pierce said: Thanks for this, Dan! [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.

 
 

Use a single email address for multiple Twitter Accounts

Yes I am @cfaddict and that will not change so keep following me tweeps. I was however surprised to find out that my new addiction (JavaScript) was not taken so I wanted to sign up for the twitter handle @jsaddict. I wanted to sign up with my main email address but when you go through the form they tell you that the email address is already tied to a twitter account. Well that just stinks, I don't want to have to use a different email address.

I found a quick blog entry that highlights a way to get around this. It turns out that in Gmail you can add a dot (.) anywhere in the username and it will act as an alias and forward to the correct address.

Pretty cool huh? Now follow the @jsaddict.

 
 

Exterminating Common jQuery Bugs

I found a really great video by Elijah Manor titled Exterminating Common jQuery bugs. This video goes into some common issues that people come across and explains why they come up and how to solve them. The video is little over and hour and packed with all kinds of great tips. It's a must watch for any JavaScript developer out there. Great job Elijah!

 
 

Removing duplicates from an array of objects

I have a style of programming that generally works well for me. I like to solve a problem and then step back and evaluate my solution. This gives me a chance to see if there is a better way to solve the problem at hand. In the programming world we gave this a fancy name, refactoring. I am also very lucky to have some really smart people at work so when I have the chance to discuss code I take it.

Last week I was working on a problem that I have solved countless times before. I had an array of objects and I wanted to make sure no duplicates of a certain key were returned to the caller. Before I write some code I like to talk the solution out so in plain English this is what I need to do.

  • create an empty array to hold our new array
  • loop over our existing array of objects
  • if the current key doesn't exist in our new array, add it

Seems pretty simple and I am betting a lot of people have taken this approach before. So what does this look in code? First we have our example array of objects. In this array class code is the key we don't want to duplicate. Next we create an empty array that will contain our duplicate free result. Next we are going to loop over our array. During each iteration we loop through our new array and check to see if that value exists, if it does not go ahead and add this object to the new array.

While this works great I was talking with a coworker (Jason Delmore) and he came up with a pretty cool alternative. Instead of creating a new array to hold our result we can simply look ahead to see if this key exists and if it does remove it and decrement the loop index.

We can also do the same thing in JavaScript.

This may seem like a small change or there may be better ways to solve this (I would love to hear them) but I love it. I enjoy looking at problems like this and understanding ways to solve them (in English) and then taking a look at how we can implement them.