Google Analytics has included the ability to track AJAX requests for quite a while, but I don’t know how much awareness there is of this particular feature. Personally, I just discovered it the other day. I was looking at my Analytics data for a particular page on which I heavily use AJAX to replace all of the body content based on form selections. At that point, it occurred to me that, while I was getting good information about the numbers and types of people visiting the page, I wasn’t getting any segmented data based on the information they were requesting.
I’m sure most jQuery users are familiar with the various methods used to attach event handlers (such as “onclick”, “onchange”, etc.) to elements that already exist on the page, but many probably aren’t aware that you can have jQuery automatically add those event handlers to any future elements, too.
Although jQuery can be extremely simple to use once you get the hang of it, there are so many functions and methods that it can be overwhelming and confusing at times.
One issue I had over the last week or so was figuring out how to simply traverse the DOM tree. Using jQuery selectors, it’s a breeze to do so; but what do you do when you’re working on a specific jQuery object and you want to go up or down the DOM tree?
Quite often, I find myself in a situation where I need to change the content of a form based on which checkboxes or radio buttons in a group are checked. I used to do this by adding an onclick and/or onchange event to each individual checkbox or radio button and then running a function to figure out whether or not the changed element was checked.
Then, I discovered how easy it is to do all of this on-the-fly with jQuery.
jQuery offers some really powerful functions and methods to utilize AJAX. One that I’ve discovered recently is the .find() method. The .find() method allows you to search for a specific HTML ID within some HTML and then returns only the content found within that ID.
A few weeks ago, I found myself in a position where I needed a nice, simple, easy-to-use lightbox plugin for jQuery. After some searching, I found that there are quite a few different plugins for this purpose, and they all have their pros and cons. After trying a few different plugins, I finally settled on nyroModal.
During my search, I found Thickbox, but that, while being powerful and easily usable, is no longer under development (and hasn’t been for two and a half years). It looks nice, but there were a few quirks with it that I just didn’t like (they’re hard to quantify, but it just didn’t fit the particular application I was using).
Many of the other plugins I investigated only supported images, and I needed my application to allow for the potential of including inline content, Flash videos and more in the future.
I finally tried nyroModal and was very impressed. nyroModal is simple to use out-of-the-box. Basically, all you have to do is include the appropriate CSS and JS files, and then apply a class of “nyroModal” to the elements you want to open the lightbox. NyroModal is also extremely customizable. You can adjust almost every aspect of the lightbox as it’s applied to your page.