Bottom of Two dijit.InlineEditBox with dijit.form.Textarea Editor Does Not Open on Single Click

dijit.InlineEditBox is great, but if you have two stacked on each other in containers with undefined heights, things can get a little buggy for a user. Example:

The problem is that if you open up id=”one” first, the page height expands two rows to make a textarea, so when you click on id=”two”, the page re renders and doesn’t open “two”! (This will work going from “two” to “one” since the top part of the page won’t change.)

If you watch the focus and blur events you’d see the following from “two” to “one”:

Focus: two
Blur: two
… click one
… two closes
Focus: one
… one opens
Blur: one

If you watch the focus and blur events you’d see the following from “one” to “two”:

Focus: one
Blur: one
… click two
… one closes
Focus: two
…. NOTHING …..

Basically for some reason it doesn’t open. So to fix this, just implicitly call edit() during onFocus.

onFocus: function()
this.edit(); // Force (technically it may get called twice now, oh well.)

dijit.InlineEditBox editWidget is undefined

So I have a save all button to save all dijit.form elements at once, but first I wanted to make sure that they were all valid. Piece of cake, all of them have isValid() methods so all I have to do is loop through them all and check to see if they are all valid… wrong.

Apparently you can not access the editor, editWidget, editNode etc of an dijit.InlineEditBox until AFTER it has already been displayed. This is retarded since it is HIGHLY likely that a user won’t open every edit box on the page *sigh*. This took some digging in the source code to find out, but if you look at the edit() function for dijit.InlineEditBox around line 190:

this.wrapperWidget.editWidget.attr("displayedValue" in this.editorParams ? "displayedValue" : "value", this.value);
// Placeholder for edit widget
// Put place holder (and eventually editWidget) before the display node so that it's positioned correctly
// when Calendar dropdown appears, which happens automatically on focus.
var placeholder = dojo.create("span", null, this.domNode, "before");

// Create the editor wrapper (the thing that holds the editor widget and the save/cancel buttons)
var ewc = dojo.getObject(this.editorWrapper);
this.wrapperWidget = new ewc({
value: this.value,
buttonSave: this.buttonSave,

You see that the editor isn’t created until the actual edit function is called. So basically to force all editors to be created:

// THIS IS UNDEFINED until edit();
console.log('Editor doesn't have validation');

Randomly Display a List of Data with JavaScript Using Singleton Pattern

Just a small object that loops through data from an AJAX request and updates the diplay every 10 seconds with a new item from the list.


var myList = (function()
var instance = null;

function init()
var myList = [];

function startLoading()
var num = Math.ceil(Math.random()*myList.length);

$('#item-title').fadeOut("slow", function(){
$('#item-title').fadeIn("slow", function(){

setTimeout(function(){startLoading();}, "10000");

return {
start: function()
// Populate objects list.
url: '/service/get-items-list',
myList = JSON.parse(data);

return {

getInstance: function()
if( !instance )
instance = init();

return instance;