I am using dojo script to create custom dropdown list. when I create dropdown,
dojo.forEach(tags, function(tag) {
var option = dojo.create("option", {
innerHTML: tag.name
});
dojo.place(option, Select);
});
});
I create this drop-down to achieve the autocomplete.
Now the problem is I would like some of the opitions disabled, so user cannot select them.
how can I do this?
AFAIK and was trying there is not such a possibility. I think it makes very little sense to mix autocomplete with disabled values. Possible solutions:
Get rid of autocomplete feature and use dijit.form.Select or native Select, both works fine with <option disabled="true"></option>.
Use dijit.form.FilteringSelect and don't add or dynamically remove options you want to disable.
Please note that dijit.form.FilteringSelect and dijit.form.ComboBox are primarily designed to work with model based on API of dojo.data and from Dojo 1.7 also dojo.store. You should update Model (dojo.data/dojo.store) because View (FilteringSelect/ComboBox) is observing the model and updates UI when needed. See my jsFiddle examples.
N.B.: If you are not familiar with dojo.data API and you can use the latest version of Dojo don't bother to dive into dojo.data API and start with dojo.store. It's terribly wrong and complicated way to manage model via dojo.data.
Related
is there a class similar to a SelectWidget which allows to select multiple items from a list in the OOUI library? I want to use that in a MediaWiki VisualEditor instance I'm extending.
I guess I can also rewrite SelectWidget myself, but yeah maybe there's a solution already.
OOUI appears to have only CapsuleMultiselectWidget (tag list / capsule control).
Also, you should note this is a JS-only widget (no PHP implementation, or "PHP pendant" in OOUI-speak).
After quite an extensive search, it appears there's no simpler multi-select dropdown - there are a few open tasks to implement one:
T91147: Create a generalised multi-select widget
T108489: Generalise CapsuleMultiselectWidget into a MultiselectWidget
T117782: Implement CheckboxMultiselectWidget (and CheckboxMultiselectInputWidget)
JIRA has a nice search tool built into the issue tracker -- date-pickers, multi-select label pickers, number filters (min/max), and the like. For the label filter specifically, I'm wondering if this is a feature that Atlassian home-rolled; or did they use a plug-and-play framework that I too can add to my site; or something in between? I realize there's some back-end stuff that needs to happen in order to populate the list, but the UI element itself looks really slick.
The image below, from jira.atlassian.com, shows the label filter I'm interested in.
I tried pulling apart the source on the page, but I only found things that appear to be unrelated: AUI (Atlassian's UI standards?) and AJS (a low-level jQuery-esque library?).
I think that this plugin is the one you need. But you still will need to do the backend magic to ensure it works.
http://harvesthq.github.io/chosen/
I'm trying to implement a data driven test approach using Selenium (Python) but I've run into an issue selecting dynamic values from multiple combo boxes. I'm currently aware of one option, using method driver.execute_script("JAVASCRIPT TO GET COMBO BOX OPTION") but hard coding the values defeats the purpose of automated data driven testing. Is there any other solution?
P.S Please let me know if there is any additional info needed.
Thanks,
Eric
Don't do that.. that's bad.. don't delegate this to JS when Selenium can handle it just fine.
You can try something like -
el = driver.find_element_by_id('id_of_select')
for option in el.find_elements_by_tag_name('option'):
if option.text == 'The Option I Am Looking For':
option.click()
I can't find any documentation for it in Python, but there is a class named SElect which has a couple methods that you can use, like, select_option_by_visible_text
I think this should $("#id").val() give you the value i guess
I really like projects like this: http://harvesthq.github.com/chosen/ but they use jQuery, which is not an option for the project I am on. I just need a regular Javascript example that styles select boxes but I cannot find any. Does anyone know of one that does not have a dependency on a Javascript framework?
Edit: Since someone thinks they should close this question, how about this instead: could you provide an example of how one would use Javascript to mimic a select box with html/css and still get the form value from a select box?
If your site is in HTML5, you could use the <datalist> element which basically does the same thing as the jQuery chosen plugin (the datalist element in the HTML5 specification).
The problem is that it is far from being implemented in all modern browsers yet and there’s no polyfill I’m aware of that do not rely on jQuery (but you can always make it degrades gracefully using this fallback solution).
I'm looking for a Javascript multiselect to use on my Spring Roo / Web MVC project, and worried that I could spend a while adding a widget from a library that then breaks other stuff. Requirements:
Prettier and more functional than the standard Dojo multiselect which Roo uses when scaffolding ManyToMany relationships, ie the user shouldn't have to hold down ctrl or shift to select more than one item.
Plays nicely with the javascript that is already used in the Roo scaffolding - so I guess that means first prize is something built on top of Dojo, although I'm not completely against adding other libraries.
Relatively self-contained... the less of my own javascript lying around, the better.
I'm aware that there are different styles of multiselect widget, eg an "available" list and a "selected" list vs a single list with select/deselect checkboxes vs autocomplete combobox... I'm open to any - it just has to be better than what I get for free with Roo.
Have you looked in dojox.form? Does CheckedMultiSelect help?
I know this is a bit late in the game as you may have finished your project, but for future, I had problems with multiSelect widgets as those I was testing were modifying DOM so <select multiple="multiple">
<option>...</option>
....
</select>
was effectively changed to something different like<div id="...">
<input>...
</div>
I found one widget which works differently: it hides original select and creates its' own element and when user selects or deselects element it syncs its' state with original select.
It is called dropdown-check-list and here is the link dropdown-check-list
This way you can use original select for e.g. Spring binding.