Ajax and Ajax Frameworks

I have been a developer for nearly 20 years and a web developer for about 10 years. Over the years, I have considered creating a blog to share the things I have learned (and am learning) about web design and development, but I never seemed to have the time. When I began learning about web development using Ajax and Ajax Frameworks, I decided to take the time to create this blog.

My intention for this blog is to focus primarily on Ajax Frameworks, but since web development requires knowledge of many technologies, I will occasionally write about things such as CSS, Javascript, PHP, MySQL, Flash, etc.

Lately, I have been using JQuery as my primary Ajax tool. Although I have used other Ajax Frameworks in the past (Dojo Toolkit, Yahoo! User Interface Library, Scriptaculous/Prototype), JQuery has thus far been the easiest to learn. In my first few posts I will discuss some of the JQuery Plugins that I have created. Some of these include: a plugin for Google Maps (jquery.imGoogleMaps), Form validation and submission  (jquery.imValidateForm), Page Populater (jquery.imPagePopulate), and a plugin to create lists (jquery.imList).

While I am still learning about some of the other Ajax Frameworks, I hope that what I have learned will be helpful to others. Just remember, “When you can pull the pebbles from my hand…”

Dojo: Adding Items to a Combobox Dynamically

Monday, May 25th, 2009

I was trying to fill a dijit.form.combobox dynamically without using ItemFileReadStore, but it has proven to be quite a challenge. I was trying to fill the combobox from an array. It appears that Dojo’s combobox does not inherit all the attributes of a regular HTML combobox. When using just Javascript to dynamically fill a combobox, I made use of the ‘options’ attribute:

var tld = new Array('.com', '.net', '.org', '.info', '.biz', '.me');
var ln = tld.length;
var cb = document.getElementById('ext');
for (var i=0; i<ln; i++) {
     var label = tld[i];
     var value = tld[i];
     cb.options[cb.options.length] = new Option(label, value);
}

This is fairly straightforward, but when I wrote the code using Dojo:

var cb = dijit.byId('ext');
dojo.forEach(tld, function(item){
     var label = item;
     var value = item;
     cb.options[cb.options.length] = new Option(label, value);
});

I received the errror: “cb.options has no properties”.

So I then used the ItemFileReadStore to dynamically populate the combobox. I could have done this programmatically or using declarative markup, but I decided to use a combination of the two:

HTML:

< select id="ext" name="ext" dojoType="dijit.form.ComboBox">

Javascript:

dojo.addOnLoad(function() {
     var dmStore = new dojo.data.ItemFileReadStore({url: "js/test_data/tld.json"});
     var cb = dijit.byId('ext');
     cb.attr('store', dmStore);
});

This works well, but I really wanted to use an array, so I added the values of the array into an itemFileWriteStore:

dojo.addOnLoad(function() {
     var options = new dojo.data.ItemFileWriteStore({data: {identifier: 'name', items:[]}});
     var ln = tld.length;
     for (var i=0; i < ln; i++) {
          options.newItem({name: tld[i]});
     }
     var cb = dijit.byId('ext');
     cb.attr('store', options);
});

While this works, I really do not like this implementation. I wish Dojo’s combobox inherited all attributes/properties of an HTML combobox.

Related posts

One Response to “Dojo: Adding Items to a Combobox Dynamically”

  • Seth Says:


    You and me both. Royal PITA if you ask me.

CommentLuv Enabled