SUMMARY: Studied basic jQuery. Figured out how to bind events so they can hide/show elements of a widget when you click on it.

Recapping yesterday’s connect the dots, part I, I was working to create a round-trip between the front-end and the back-end. I got right up to the point where I could define some HTML elements on the page and figure out where I could put my various per-page javascripts. Today, I’m going to hopefully complete the round-trip.

Binding Javascript to HTML Elements

One odd thing I’ve noticed, while playing with the jQuery setup, is that use of the $ variable causes problems in WordPress. So I do a var $ = jQuery; inside my functions. If javascript works like regular scoped languages, whatever $ was will be “masked” by the local variable declaration. I can’t use the standard function($){ wrapper because that’s called in context with jQuery ready() which accepts a handler that is passed the jQuery object is passed.

Moral of the story: when writing a callback function or handler with jQuery under WordPress, follow these steps:

1. Is it a jQuery call or a Javascript handler?
2. Check the parameters being passed to determine how to set up the $ variable.

Here’s the current code.

// create jquery $ object for use in WordPress
// executes when dom is defined
jQuery(document).ready( function($) {
    $(".editdesc").hide();
    $(".desc").bind('click', dsEditDesc);
    $(".editdesc").bind('blur', dsCloseDesc);
});

// create jquery $ object for use in WordPress
// executes when window is rendered
jQuery(window).load( function(e) { 
    var $ = jQuery;
});


// handle editing text
function dsEditDesc(e) {
    var $ = jQuery;
    $(this).hide();
    $(this).siblings(".editdesc").show().focus().val(this.innerText);
}
function dsCloseDesc(e) {
    var $ = jQuery;
    $(this).hide();
    $(this).siblings(".desc").show().text(this.value);
}

I’ve added a TEXTAREA with class editdesc to the component. When the P with class desc is clicked, it is hidden and the textarea is shown. The value is also set with the contents of the P tag. When the textarea loses focus, the opposite happens to update the text.

NOTE: console.log() is the function I can use to write to the javascript console for debugging.

NOTE: When reading/writing the contents of a form element, you manipulate its value (jquery val(), javascript.value()). For other elements, you manipulate its text (jquery text(), javascript.innerText).

ASIDE: I printed out the jQuery Visual Cheat Sheet and tucked this into my old jQuery book. I did a cursory pass over the cheat sheet, but haven’t absorbed it.

Ugh, that only took 3 hours to figure out. I’m starting to get a better feel for javascript and jquery and how they interact with each other, but it’s slow going.

Theoretically, now I want to add calls here that will write to a server. I also will eventually want the ability to create new tasks dynamically, delete them, and so forth. That will require some thinking, so I’m going to take the trash out, and then head to Barnes & Noble to look at books.