5 Things About jQuery I Learned the Hard Way

Going Back to Basics

Going back to when I was first learning jQuery, I made some (looking back on it now) stupid mistakes I had terrible ways to fix them. Hopefully, if you're very new to jQuery, this list will help you!

1. jQuery isn't included in the project

This one was just stupid, whether it was caused by a misspelling or maybe thinking it automatically bundled into the site from a scripts folder, there was a time I would start coding and get frustrated that it wouldn't run my test program. If you are having problems with a quick test to show whether or not it's actually included in your project is this script:

$(function() { alert('jQuery is working!') });

This runs a jQuery function that will alert if jQuery is indeed included with the project or else the alert will not trigger.

2. Scripts can be debugged by Dev Tools

I use Chrome for all my development with a supplementary IE window to make sure my changes aren't screwing up IE (which they often do), but Chrome, I believe, has the best debugging tools out there. For a while, my debugging was with alerts. I was completely oblivious to the tools Google provided with Chrome. I would lay an alert, and if it didn't trigger, then there was an error before that point.

I am going to save you that trouble, pressing F12 will load the debugger which is ESSENTIAL. From there you can debug scripts, set breakpoints, see variable values at those breakpoints, run jQuery and javascript commands from the console (image you are looking for element with an id 'Clients' but it's not working in your code, just do $('#Clients') and it will pull up that element and make you realize you originally spelled Clients Cleints or something like that), and see load times.

3. jQuery can run slow on IE

I was building a forecasting site for how many agents our company needed from the historical data of how busy we were, and because they were not clear AT ALL about what they wanted, I had to use jQuery to do most of the grunt work or else redesign the backend which would have put me offschedule so I went ahead leaving the backend in place and let jQuery and Javascript run these equations. As well, at the change of a radio button they wanted to see different values, so that was included. Man did that thing drag in IE. In Chrome it was almost instantaneous, but in IE it took maybe 5 to 10 seconds to populate all the data. Was a little embarrassing when I presented and didn't really test it on IE, I got lucky it worked. This was one of my first projects though.

4. When building a plugin, .find is your friend

I was building a table making, sorting, heat-mapping, plugin that would help me stylize and generate sortable tables quickly (granted I was still really new to jQuery) but the hardest thing to overcome was how to manipulate an element after it was passed to the plugin. I had a "this" variable and I had no idea what to do with it, and it was such a simple concept that no one really knew what I was having a problem with. How I was searching through all the elements was through selectors i.e:

$('.options option:first')

Obviously an example, but it shows how I didn't understand that the find method is basically the same as that second part of the text. This is what it would look like with .find:

$('.options').find('option:first')

This way, if you are stuck with a $(this) object, you can use it and abuse it with .find (I do not advocate violence towards HTML elements).

5. jQuery really need to be run in a jQuery function

Going back to the first problem, that is a jQuery function. You can also use the document.ready one but trust me, that one in the top example is much easier and does the same thing. What it does is it waits for the DOM (HTML elements of the site) to load and then executes. If it doesn't do this then you can be running commands on elements that aren't there. Imaging the following code:

$('#Options').append($('<option>').text('Option').val('1'));

If you execute this before the DOM loads, before the element with the id 'Options' loads, then you are throwing that function away. You won't see any errors, but it won't append your list with that extra option. This can be really frustrating and a huge time waster.

Postmortem

To wrap up, jQuery was a bit to wrap my head around as mainly an application/mobile developer, but it really is a magnificent javascript extension and life is easier with it in the arsenal. If you have any questions don't hesitate to message me, comment, or direct message me on twitter @WebDevProblems.