Dojo: How to get the ID of an element.

To get the ID of an element using Dojo Framework, you need to use the dojo.attr function.

Given the following HTML:

<img src="/path/to/imageA.jpg" id="myImage1" />
<img src="/path/to/imageB.jpg" id="myImage2" />
<img src="/path/to/imageC.jpg" id="myImage3" />

You can get the IDs of each image in Dojo like so:

dojo.query("img").forEach(function(currentNode) {
    var theElementId = dojo.attr(currentNode, "id");
    console.log("id: ", theElementId); // debug

If you have debugging on and something like Firebug, the console output would be like so:

id: myImage1
id: myImage2
id: myImage3

Thickbox 3.1 with jQuery 1.3 – Stuck on loading image.

Thickbox hasn’t been updated in a while, and it is now incompatible with recent versions of jQuery (1.3+). What happens is that when you click the thickboxed element, the screen goes gray and the the loading “barber pole” image loads as expected, but then nothing happens… it just hangs on the loading image. The reason why is because Thickbox uses ‘@’ in jQuery, which is now deprecated.

To fix, simply open up the un-compressed thickbox.js file and go to line 79 and change the following:

TB_TempArray = $("a[@rel="+imageGroup+"]").get();

… into …

TB_TempArray = $("a[rel="+imageGroup+"]").get();

Once you make that change, Thickbox should work as expected!


FCKEditor: Remove & prevent <p> tags from wrapping your content.

For some reason, FCKEditor automatically wraps any content entered into the textbox with a <p> tag. This can cause for some problems in your layout when you’re actually displaying the content. Instead of trying to fix this in your layout with CSS, there is a quick and easy way to turn the auto-wrap off in FCKEditor: Change the FCKConfig.EnterMode setting from ‘p’ to ‘br’. There are a few ways to handle this:

  • Edit fckconfig.js:
    Change FCKConfig.EnterMode = 'p'; to FCKConfig.EnterMode = 'br';
  • Change the setting programatically when you instantiate the object, like so (in PHP):
    $oFCKeditor = new FCKeditor('description');
    $oFCKeditor->BasePath = '/fckeditor/';
    $oFCKeditor->Value = 'some text';
    $oFCKeditor->Config['EnterMode'] = 'br'; // turn off auto <p> tags wrapping content

I prefer the latter way because you can do it on a page by page basis, and there’s no messing with FCK’s core JavaScript files.

jQuery: using jquery.autocomplete.js plugin in noConflict mode

When attempting to implement Dylan Verheul’s excellent auto-complete jQuery plugin on a project, I ran into problems due to the fact that we are using noConflict mode for jQuery by calling noConflict(); A few quick minutes poking around jquery.autocomplete.js and I had updated it to work in both noConflict and standard modes. For those of you looking to use jquery.autocomplete.js in noConflict mode, I’ve made it available for download here: jquery.autocomplete.js

UPDATE: Dylan has updated jquery.autocomplete.js to be compatible with noConflict mode. It also contains additional bug-fixes and improvements. You can download it at:

Now playing: AFX – SteppingFilter 101
via FoxyTunes

jQuery: How to set one <select> element to the value of another (using onchange equivalent)

Say you have an HTML <select> form element and you want to set another <select> element equal to the first one when it changes. Here’s an easy way to do so with jQuery:

$('#id_of_select1').change(function() {
    var select1_value = $(this).val();

Now playing: Drexciya – Astronomical Guidepost
via FoxyTunes

jQuery: How to get the ID of an element.

Say you want to know the ID of an element using jQuery. You can achieve this easily using jQuery’s attr() method:

var currentId = $('#element').attr('id');

But this is fairly useless, because it requires you to already know the ID of the element that you want. Usually you’ll want to find out the ID if you don’t already know it — given a jQuery ‘this‘ object:

var currentId = $(this).attr('id');

This will only work provided that you have a valid jQuery object $(this) that you are working with, eg:

$(document).ready(function() {
  $('input.text').focus(function() {
    $('input.text').removeClass('onFocus'); /* remove focus state from all input elements */
    $(this).addClass('onFocus'); /* add focus state to currently clicked element */
    var currentId = $(this).attr('id');

Using the code above, you will now know the ID of the currently focused input element. This can come in handy later on if you want to perform further actions on the element.

Now playing: Amon Tobin – Precursor (feat. Quadraceptor)
via FoxyTunes