SOS

Shane O'Sullivan's technical blog… really ties the room together

Getting the selected ID from a Dojo ComboBox

Posted by Shane O'Sullivan on July 30, 2006

While fiddling around with the Dojo ComboBox widget today, I noticed that while it does support name-value pairs, it doesn’t provide an explicit way of getting back the “value”. For example, if you provide it with the JSON object:

[ {"Pat":1}, {"Mary":2}]

you can use the ComboBox’s getValue() function to retrieve the names “Pat” and “Mary”, but not the second value, which is generally what you really want.

So, FYI, to get the value, get a handle to the ComboBox, and retrieve it’s comboBoxSelectionValue.value attribute. For example, given a ComboBox with a widgetId of “myCombo”, use

var selectedId = dojo.widget.byId(‘myCombo’).comboBoxSelectionValue.value;

Alternatively, and possibly simpler, you can set the setSelectedValue attribute on the div when you’re creating the ComboBox. For example, if I had a hidden input field that I wanted the selected id to be copied to:

<input type=”hidden” name=”userid” id=”userid”></input>

you would define the ComboBox like:

<div dojoType=”ComboBox”

setSelectedValue=”dojo.byId(‘userid’).value=arguments[0]” …….(whatever other args you want)

> </div>

This results in the hidden input field being automatically populated with the selected id value. Simple enough, but it would be better if the ComboBox had a parameter where you could simply give it the id of an input node to mirror itself to.

About these ads

40 Responses to “Getting the selected ID from a Dojo ComboBox”

  1. Mr Moon said

    Thank you very much , 5* rating

  2. you’re very welcome, glad this helped

  3. Ryno said

    Awesome work, you’ve saved me potentially hours of frustration!

  4. DavidP said

    Sweet. Just what i was looking for. Mucho appreciated.

  5. Glad to help :-)

  6. Bruno said

    Thank you very much, it was very helpful.

  7. Great idea!

    Only one observation: in order for the dojo.widget.byId to work on a Combobox created from existing markup, the markup should be constructed using “” and not “” as it is presented in the manual.

  8. If you’re entering markup into a comment, you’ll probably have to escape the angle brackets, use &lt; for < and &gt; for >

  9. Yes, you are right.

    What I meant was:
    “<select>” and not
    “<input>”.

  10. Zenaida said

    I’m sorry, but I prefer to have a complete sample.

    Can you, please, publish a sample, or send me a sample on this to asd [_at_] 37 [_dot_] com?

    Thank you,

    Zenaida

  11. Um, ok…. my working rate is €100 per hour, but just for you I’ll make it €200. Please send a cheque to
    1 AreYouKiddingMe St.,
    GetOffYourAss,
    AndDoSomeWork,
    Co. Cork,
    Ireland

    This is open source, which means we work for free, giving our free time for the benefit of ourselves and the community. In the open source world, there is little in the way of hand holding, you’re expected to contribute back, and to work hard. I suggest you try reading this post again, and applying it to your problem.

    Then you can figure it out, and publish your own sample for others to learn from. You can even post it here as a comment. Hmm, it took me 4 mnutes to type this, that’ll be 30 bucks please….

  12. Rai Singh said

    Very nice. Thank you!

  13. Rai Singh, you’re very welcome

  14. Michael Smith said

    It’s nice to see these kinds of answers on blogs. However, isn’t the Dojo Select widget meant to solve this problem? The Select widget provides the getLabel(), setLabel(), setValue(), and getValue() (inherited from ComboBox) functions. I’m surprised you didn’t mention this at all. At any rate, thanks for the article.

  15. Monthy said

    Super thanks. Great post just what I’ve been looking for.

  16. Randy May said

    Excellent!

    Thanks

  17. elias said

    Great Post, thx!

    (I had to add the dataUrl=”xxx.json” to the div… don’t know if this is obvious…)

  18. Ashley said

    I also really appreciate the info, dojo docs are not so great and this is exactly what I needed to know.

    But this {{“Pat”:1},{“Mary”:2}} is not legal JSON. I think you mean [{“Pat”:1},{“Mary”:2}] or better for security {“myData”:[{“Pat”:1},{“Mary”:2}]}.

  19. Hi Ashley,

    Yes, you are correct of course, that was not valid JSON. I’ve updated it.

    Thanks,

    Shane

  20. Tattybogle said

    Do you know if there’s a way to retrieve Pat | Mary by using the value?

    I have a value being passed in via the url (e.g. 1) and want to initialise the combobox to the appropriate value (i.e. ‘Pat’)

    Thanks

  21. Tattybogle said

    P.S. I’m still on 0.4 (don’t ask…)

  22. There is a way, but it depends on the data store you are using. If you are using the dojo.widget.basicComboBoxDataProvider, it has an variable called “_data” that contains an array mapping display value to hidden value.

    You can search it using something like:

    var searchVal = “some string”;
    var array = myCombo.dataProvider._data;
    for(var i = 0; i < array.length; i++) {
    if(array[i][1] == searchVal) {
    myCombo.setAllValues(array[i][0], array[i][1]);
    }
    }

    Hope this helps

    Shane

  23. Henrique Ho said

    Very good! I’m looking for this information a long time! Excellent! Thank!

  24. Henrique, you’re very welcome

    Shane

  25. nice Post.
    Finally I found another way to get the field I wanted when posting th form. I used the ‘identifier’ key in json input to force my FilteringSelect to use something different than ‘label’ or ‘value’.
    Feeding him with something like that:
    {“identifier”:”key”,”items”:[{“label”:”A1″,”name”:”A1″,”key”:13},{“label”:”AA24″,”name”:”AA24″,”key”:14},{“label”:”AAAA”,”name”:”AAAA”,”key”:15}]}
    I obtain 16 as submitted value and not A1 or AA24. By changing identifier to ‘name’ or ‘label’ I could retrieve some other field.

  26. Oliver said

    Interesting post.

    I am reading this in July 2009 using Dojo version 1.3 and a few things seem to have changed since this was first posted.

    First of all dojo.widget.byId can now be used as dijit.byId.
    Secondly “comboBoxSelectionValue” does not exist.

    I tried to somehow make use of the “identifier” keyword when using the datastore, however after examining the source code for ComboxBox it seems that it doesn’t get used. It appears that the store is mostly used to set the label:

    var label = this.store.getValue(item, this.labelAttr || this.searchAttr);

    In the end I noticed that there is an “item” field in the ComboBox API:


    // item: Object
    // This is the item returned by the dojo.data.store implementation that
    // provides the data for this cobobox, it's the currently selected item.
    item: null,

    So by using a combination of a “hidden” input form element with the “onChange” event of the ComboBox I was able to set the value of the hidden input element whenever someone changed the combobox value.

    The datastore is:

    {“identifier”:”userID”,”items”:[{“name”:”Bob Smith”,”userID”:”1″},{“name”:”John Doe”,”userID”:”2″}}]}

    The comboxbox was defined as:

    Where “userID” is one of the data store properties as above.

    Below the combobox is a hidden input element:

    So conclusion is that still works for dojo 1.3. I believe that the “identifier” is not neccessary in the case of a data store used for a combobox. As it says in ItemFileReadStore.js:

    // Note that it can also contain an ‘identifer’ property that specified which attribute on the items
    // in the array of items that acts as the unique identifier for that item.

    // Step 4: Some data files specify an optional ‘identifier’, which is
    // the name of an attribute that holds the identity of each item.
    // If this data file specified an identifier attribute, then build a
    // hash table of items keyed by the identity of the items.

    Cheers!

  27. enez said

    I have similar problem with dijit.form.FilteringSelect (dojo 1.3). I want to set initial value for that control on page loaded but I can not find way. Same template which I use with dojo 1.2 work fine. In dojo 1.2 I just set value property and it work fine. Now this control show error flag.

  28. enez said

    Ia have problem with setting value of filteringSelect control in dodjo 1.3.
    I try with attr(“value”, “my value”), setValue() , value= , but still nothing. All other stuff works fine. I can select some item and similar things but problem was with initialization.

  29. strick said

    Just incase you do want to use an id and combo box: (For instance you have a listing from a database and want to add a new entry to the table if the user types something that is not already in the listing.)

    var input = dijit.byId(‘widget_id’);

    input.store.fetch({query: {name: input.attr(‘value’)},
    onComplete:function(items, request){
    if(items.length == 0){
    // … no items in query
    }
    else{
    console.log(items[0]); // Gives you access to all attributes of the item.
    }
    }
    });

    There is also an onItem(item) function you can use that will run for each item found.

  30. […] found this post: http://shaneosullivan.wordpress.com/2006/07/30/getting-the-selected-id-from-a-dojo-combobox/ which held the answer in one of the comments. Here’s the javascript I’m now using to […]

  31. It’s very effortless to find out any topic on web as compared to textbooks, as I found this paragraph at this web page.

  32. I’m not sure exactly why but this weblog is loading very slow for me. Is anyone else having this issue or is it a issue on my end? I’ll check
    back later and see if the problem still exists.

  33. Your method of describing everything in this paragraph is genuinely
    nice, all be able to effortlessly be aware of it, Thanks a lot.

  34. web site said

    For hottest news you have to pay a visit world-wide-web and on world-wide-web I found this site
    as a best web site for newest updates.

  35. My spouse and i appreciate, cause I stumbled upon just what I’m taking a look with regard to. You’ve was over my personal three morning extensive quest! The almighty Thanks a lot guy. Possess a great morning. Bye

  36. I’m impressed, I must say. Rarely do I come across a blog that’s both equally educative and
    entertaining, and let me tell you, you have hit the nail
    on the head. The problem is something which too few men and women are speaking intelligently about.
    Now i’m very happy that I stumbled across this during my hunt for something regarding this.

  37. Hello there I am so excited I found your blog, I really found you by accident, while I was searching on
    Digg for something else, Nonetheless I am here now and would just like to say kudos for a marvelous post and a all round enjoyable blog (I also love the theme/design), I don’t have time to read through it all at the moment but I have bookmarked it and
    also added your RSS feeds, so when I have time I will be back to read
    more, Please do keep up the fantastic b.

  38. This website was… how do I say it? Relevant!!
    Finally I’ve found something that helped me. Thanks!

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

 
Follow

Get every new post delivered to your Inbox.

Join 533 other followers

%d bloggers like this: