Archives

All posts for the month October, 2013

typeaheadjs

Since Bootstrap dropped support for their typeahead they have since told people to use Twitter’s typeahead.js.  It has a lot of great features that I have covered in an older write up about Twitter Typeahead.js.  In this post I wanted to go over the custom events that are triggered and how you can use them to get more out of Twitter Typehead.

There are five triggers in the typeahead.js and you can tap into each of these to do what you’d like when these events are triggered.  Below are those events and when they are triggered.

  • typeahead:initialized – Triggered after initialization. If data needs to be prefetched, this event will not be triggered until after the prefetched data is processed.
  • typeahead:opened – Triggered when the dropdown menu of a typeahead is opened.
  • typeahead:closed – Triggered when the dropdown menu of a typeahead is closed.
  • typeahead:selectedTriggered when a suggestion from the dropdown menu is explicitly selected. The datum for the selected suggestion is passed to the event handler as an argument in addition to the name of the dataset it originated from.  Triggered when the user hits Tab to complete the text provided in the text box.  See comments section below.
  • typeahead:autocompletedTriggered when the query is autocompleted. The datum used for autocompletion is passed to the event handler as an argument in addition to the name of the dataset it originated from.  Triggered when the user clicks, or uses the arrow keys, to select an element from the drop down.  See comments section below.

All of that information comes directly from the typeahead README.  Now that we know what the events are and when they are triggered we can make custom events that happen by using jQuery and tapping into those events using .on().  Say, for example, I wanted to update a title on a page including the input field that typeahead already does.  You could make an on change event that would listen on that input for a change and then alter the title but in our case we can simplify that by tapping into the typeahead:selected event.

Now instead of a second listener on your input object you can just have Twitter Typeahead listen for you and make changes where you need.  Play around with the different variations of the events to help you get the most out of Twitter Typeahead.  There is an issue on their GitHub page that explains how to use the custom events and gives a very basic example.  Below is the example and here is the link to Getting a custom event to fire.

Hope that helps someone as it took me a bit of digging to find the easiest way to use those triggers.  Comment below on other useful ways you’ve used Twitter Typeahead and the custom event triggers.

Clearing Float Elements

float

As you develop web pages you may come across moments when you need to float an element.  Using the CSS float you can make elements be pushed around to make room as more elements are added.    A nifty feature in and of itself but there is a common problem that tends to crop up.

Recently I was working on a small navigation header that included two buttons and a search box.  The buttons were standard <button> elements and the search box had been floated to move with the varying size of the screen.  The problem that happened came when you made the screen too small and the floated box dropped to the next line.  Directly beneath this row of elements was a header row that had a background and when the search box dropped down it would be hidden by this header instead of pushing the header down as would be expected.

After doing some research into float elements I came across this question on StackOverflow asking What is the best way to clear the CSS style “float”?  In it the top answer explained that you can add an arbitrary <br> element with clear:both as the style to force floated elements down a line but that isn’t ideal.  Their solution was to wrap your float elements in a parent div and simply give that div the CSS of overflow: hidden.  This forces all floated elements to stay within the parent div.  With this parent and CSS in place the parent div will grow depending on what happens within, floated element or not.

Becomes

This solved my problem perfectly and works cross browser so feel free to use it everywhere and anywhere.  Hope this helps someone else out there who is having similar problems.  Float elements can be very tricky sometimes.

After updating from Ubuntu 13.04 to 13.10 I found that my SmartGit was broken.  I could just use the standard git commands but that’s boring and I like to have a GUI so SmartGit is nice for that and it needed to be fixed.  Apparently Ubuntu 13.10’s GTK libraries aren’t very compatible with SmartGit, any version of it.  The fix is simple.

  1. sudo nano smartgithg.sh
  2. Add the line UBUNTU_MENUPROXY=0 just underneath the comments at the very top of the file.
  3. Save.

That’s it!  Fixed.  Hope this helps.  I’ll update when there is an official patch.  In the mean time this works fine.

UPDATE

They just released RC1 which fixes the problem.  Download SmartGit 5 RC1 here.

Making jQuery Ajax Requests

ajax

In a lot of my other posts I show sample code that makes heavy use of ajax calls and today I wanted to take a step back and explain what exactly are ajax requests, when you should use them, and how to get the job done.  First, ajax stands for Asynchronous JavaScript and XML which may still be a bit too technical but essentially what it does is allow you to make a request to the server for data without having to refresh the page.  Obviously this is a very useful tool to have no matter what you are doing on the web.  No one likes to have to wait for the entire page to reload all of the images and content just because you clicked a button to show more data on a section of the page.

Ajax calls should be used anywhere you want to get data without doing a hard refresh.  This can range from something small like updating a table every ten seconds automatically or to something complicated like automatic submission and verification of individual form fields.  One way to leverage the asynchronous nature of these calls is to load your main html page that merely holds placeholder divs with no content in them.  Once that very light page is loaded you make a series of ajax requests to the server to fill in those various portions of the page.  This gives the user a very quick response time so they see that your site is up and running and other, more intensive, portions of the site can be loaded when they get processed.  Ever gone to a site and after the page has loaded there is still a spinning wheel on some section of the page?  That’s an ajax call running and they have let you know something will be there soon.

To make an ajax call using jQuery requires very little code but you need to understand the back and forth interaction to make sure you use and display the data correctly.  An ajax call consists of the method call and a dictionary of parameters to be used.  There are many optional ones but I will go over the more commonly used ones.

In the example above we are submitting a form and then adding the returned html data to the table.  This allows us to dynamically add to an HTML table without needing to refresh the page every time.  Let’s go through each of the parameters in the dictionary that is passed with the ajax request.

  • URL – This is obviously the URL where the request is going to be made.  It can be relative, as it is in this example, or an explicit URL like http://www.google.com/.
  • TYPE – How the request is being sent.  Generally speaking a GET request is used when you are reading from the database and requesting information and a POST request is one in which you are doing a write or update to the database.  In our case here we are adding a post so that would fall under the write category and we do a POST.
  • DATA – The parameters that are going to be held in the request.  This includes all of your fields in your form, which is what I’m doing in the example above, or any GET parameters if you use type GET.  The .serialize() command will take all of your named fields in a form and put them in a dictionary to pass in an ajax request.
  • ERROR – If the server responds with an error code of any kind this is what will be triggered.  The data variable that is passed to the error function contains all of the data sent back from the server.
  • SUCCESS – When the server responds with a 200 code, a success, this will be triggered.

You’ll notice that the error and success sections are functions that use a data variable.  That data variable is what is sent back from the server.  It can be anything you’d like it to be.  In the example above the server is sending back pure HTML.  If you want to use other things like lists and dictionaries you’ll need to specify another parameter called dataType and set it to JSON.  Then have your server send back a JSON string and you’ll be all set.  Because they are functions you can really do whatever you’d like at the point of return.

Ajax calls are crazy powerful and unbelievably useful for nearly aspect of web development.  Play around with it and make your websites better.  There are a lot of ajax parameters you can use with your jQuery call.  I only touched on a few of the more important ones here.

My IDE of choice for developing lately has been Komodo Edit.  It’s lighter than Eclipse and does what I need it to do.  Installing and updating on most OS’s is easy but on my Ubuntu installation I always have to do a few more tricks to make everything work just right.  This post is to help me remember exactly the steps of installing and updating so that I don’t need to Google it every time.

  1. Download the latest version of Komodo Edit
  2. tar xvzf Komodo-Edit-8.5.2-13850-linux-x86.tar.gz Update this to your downloaded version
  3. cd Komodo-Edit-8.5.2-13850-linux-x86
  4. sudo ./install.sh
  5. When prompted for installation location enter /opt/Komodo-Edit-8/
  6. If you already have Komodo Edit installed in that location run sudo rm -r /opt/Komodo-Edit-8/ to uninstall it first.
  7. export PATH="/opt/Komodo-Edit-8/bin:$PATH"
  8. Search for it in your Dash and all should be good.

Hope this helps someone else, I know it will help me.

Windows-8-1-Betta-Fish

Windows 8.1, the long awaited updated to Microsoft’s latest OS, is now available through their App Store as an update.  Why they didn’t just do it through the traditional System Update is a bit confusing but it’s in the App Store.  I have had the preview installed for a week or so and really like it.  A lot of the problems that people had with Windows 8 are fixed, to an extent, with 8.1.

A few notable changes, for desktop users, is the ability to boot directly into your desktop rather than the tiles.  I love that feature and it should have been in from the beginning.  They also brought back the Windows button in the bottom left though it does not bring up the traditional Start menu it instead brings up the tiles.  Tiles have been improved as well giving better customization of tile size and even naming columns.  Backgrounds and customization all around the OS has improved.  For the most part I think that it is a solid improvement and fixed on a lot of the issues people had when trying out the new Windows 8.  I’ve always liked the OS and think that if you are put off by the tiles and radical change to the operating system that you take some time and play with it.  Windows 8 is really fun and works really well and fast.

One very important note.  If you installed the preview and want to get the real version of Windows 8.1 they are suggesting that you re-install Windows 8 with your original key and then upgrade.  They say that they are having a hard time verifying old keys without having the original Windows 8 installed.

That’s it.  If you are on your Windows 8 machine now you can upgrade to Windows 8.1 by clicking that link.

A very important tool when working with JQuery is the ability to traverse through elements in the DOM.  When a user clicks on a button you may want to change the color of the nearest row to display the click.  Maybe after an input you want to change the nearest column to be hidden or show that input value.  Whenever you need to walk through the elements in your page JQuery has a way to do it.  All of the methods shown here can be called with no arguments but are more helpful if you call them with a selector of some kind either an id, class, or element type.

The first question you have to ask yourself is where is the element I’m looking for from my current location?  For instance, that button that was clicked is on a row.  The row element contains the button so we need to travel upwards.  When traveling up you can do one of two things, $.parent() or $.parents().  The difference between the two is that the latter travels more than just a single level in the DOM.  Obviously that makes it a bit less efficient but it is exhaustive.  If you know you’ll need to travel up a layer or two to find the parent element you’re looking for then use parents.  The example below demonstrates the button changing the parent row it is in.

$( "button" ).parents("tr").css("font-family", "Times New Roman" );

If you need to go down in the DOM you can use either $.children() or $.find().  Again the difference is that the latter travels more than one layer.  An interesting thing that may happen is when you are at the level you want to be but need to find an element at that same level.  That is where $.siblings() comes in.  It will search for the element on the current level of the DOM you are in.  Combining these methods together can help you locate elements all throughout your page.  For example, once I needed to find the nearest error messages div because I had one near a variety of inputs and place text inside of it.  I first used $.parents('error-row') to find the row it was in.  Then used $.children('.error-display') to find the div within that held the text.

Obviously naming things uniquely with id’s is the safest way to go as you can reference things directly but in the case of a complicated page with many layers and hidden elements it may be nice to traverse your page to find your elements.  It also may be easier to simply change the nearest element rather than name every little item on your page.  JQuery traversal has its place and remember if you can’t find it at one level you may need to go up one more.