disable jquery-chosen dropdown - javascript

I have a select div that I'm using the chosen jquery plugin to style and add features to (most notably, search). The div looks something like this,
<select data-placeholder="add a foobar" id="foobar" style="width: 350px;">
<option value=""></option>
</select>
And I'm using the chosen plugin like this,
$('#foobar').chosen();
While some AJAX is loading, I'd like to disable the entire <select> div. Maybe with something like this,
$('#foobar').disable()
or this
$('#foobar').prop('disabled', true)
I think you get the idea.
Any ideas on how to do this? I've tried a number of different things, like using jquery idioms for disabling things, disabling the <select> which just disables the underlying select, not the chosen stuff on top of it. I've even resorted to manually adding another div with a high z-index to just grey out the box, but I think that this is likely to be ugly and buggy.
Thanks for the help!

You are disabling just your select, but chosen renders it as divs, and spans, etc. So after disabling your select you need to update the plugin to make the select widget disabled too. You can try this way:
$('#foobar').prop('disabled', true).trigger("liszt:updated");
//For non-older versions of chosen you would want to do:
$('#foobar').prop('disabled', true).trigger("chosen:updated");
I found the information here
Fiddle
Once you update the widget all it does is it unbinds the click or other events on the plugin and changes its opacity to 0.5. As there is no real disabled state for a div.

In the lastest version of chosen, liszt:updated is not working anymore. You need to use chosen:updated:
$(".chosen-select").attr('disabled', true).trigger("chosen:updated")
Here's a JSFiddle.

PSL was correct, but chosen has been updated since.
Put this after you do the disabling:
$("#your-select").trigger("chosen:updated");

$('#foobar').prop('disabled', true).trigger("chosen:updated");
This works Perfect!!!!
#chosen v1.3.0

You can try this:
$("#foobar").prop('disabled',true).trigger("chosen:updated").chosen('destroy').chosen()

$("chosen_one").chosen({
max_selected_options: -1
});

$(document).ready(function () {
$("#foobar").chosen().on('chosen:showing_dropdown',function() {
$('.chosen-select').attr('disabled', true).trigger('chosen:updated');
$('.chosen-select').attr('disabled', false).trigger('chosen:updated');
$('.search-choice-close').hide();
});
$('.search-choice-close').hide();
});

Related

onChange not working at selectedIndex

I have a CMS and i tried to customize it with jQuery and CSS3 but i got a problem with the language select (drop-down list).
I customized the <select> following this tutorial http://tutorialzine.com/2011/02/converting-jquery-code-plugin/
Everything works fine but the onChange of the select doesn't work. So when I try to change language from the drop-down list (select) this change only the name in the select but doesn't change language of the site.
This is my select:
<select name="lang" class="language" onChange="location.href=\''.$filename.'?lang=\' + this.options[this.options.selectedIndex].value + \''.$trackpage.'\'">
I think that the issue is caused by jquery.tzSelect.js (please see the tutorial) because in this plugin there is a selectedIndex (this in conflict with the selectedIndex of the select):
if(i==select.attr('selectedIndex')){
selectBox.html(option.text());
}
I tried to remove this line code from the plugin but doesn't work.
Please help!
Thank you!
You can use
this.value
instead of
this.options[this.options.selectedIndex].value

Is there a way to prevent a DropDownList from showing list items when clicked in JavaScript?

Just wondering if there is a way with Javascript to prevent the regular click event from happening of a DropDownList. Basically I have a DropDownList that I want to leave enabled, but when it is clicked I don't want the regular list of items to popup. Is there a way to do this at all with like e.preventDefault or something?
Edit #1: Yes I did try to do it with the e.preventDefault() and it didn't work. However I think I implemented it incorrectly and wasn't really sure what it should look like so I couldn't tell if it was working and not doing what I want or not working at all.
First style the DropDownList unclickable by setting z-index: -1;
select {
z-index: -1;
position: relative;
}
Now it will not dropdown anymore. But something like onclick="prettyMenu()" won't work either.
To fix that, wrap a container around the select tag and set the onclick-event for that element:
<div onclick="prettyMenu();">
<select> ... </select>
</div>
Check it out: http://jsfiddle.net/hgtDe/
Use the following code in javascript:
function makeDisable(){
var x=document.getElementById("mySelect")
x.disabled=true
}

blur to close select box do not work in chrome?

When user clicks on select box , I want to hide the options menu which I do by firing blur event on select box . Following code works on firefox but not on chrome .
<select id="myselect" name="city">
<option value="default" id="first">Default value</option>
</select>
<script type="text/javascript">
$('#myselect').click(function(){
$(this).blur();
});
</script>
In chrome options menu stays as it is.
I suspect that this is related to user modal state (although I couldn't find any documentation to support it, I might add). I suspect that any event listeners are ignored until the user has made a selection from the options.
To support this, you can see that $(this).blur() fires exactly as expected when we hook it up to the onchange event of the <select>:
http://jsfiddle.net/TkfPN/
It would be far better to simply disable the <select> element. Blurring a focused element is extremely bad HCI and frustrating to the user.
Here is my hack for my problem
var is_chrome = navigator.userAgent.toLowerCase().indexOf('chrome') > -1;
if(is_chrome) $(".option").hide();
where class "option" represent all the option of select box.
I found a solution to this. Just delete the select box's node then add it back in! Make sure you're using delegated event handlers. Seems to work in all browsers. Here's my solution in jQuery, but if someone wants to write a pure JS solution, that would be good also.
jQuery('.sortSelect').appendTo('.sortParent');
If it wasn't appearant, the markup in this example works if sortSelect is the last direct child of sortParent. $.insertAfter()/$.insertBefore() would work as well.

Function to create/add another select (dropdown) box

I need to find a away to insert/add a <select> (dropdown) box on click of a button. I want each click of the button to keep adding a new <select>.
Tested out some javascript/jquery functions and as I don't have much background in it, I'm having no luck!
Edit:
Sorry just kinda answered my own question with help from other questions to anyone wandering just view source code on this.
http://jsbin.com/ufuxuq/
that was pretty much what I wanted, but had to implement some php within the list so I had extra trouble with that, but it's all good now.
Thanks
You can create a <select> element (or any other element) with $("<select/>");
The append function can be used to append html into an item.
Combining them yields:
$("#buttonToAddDD").click(function () {
var newDD = $("<select/>");
$(newDD).append("<option>New Option 1</option>");
$(newDD).append("<option>New Option 2</option>");
$("#whereYouWantToAddNewDD").append(newDD);
});
<div id="whereYouWantToAddNewDD"></div>
<input type="button" id="buttonToAddDD" value="Add DD" />
Sorry just kinda answered my own question with help from other questions to anyone wandering just view source code on this.
http://jsbin.com/ufuxuq/
that was pretty much what I wanted, but had to implement some php within the list so I had extra trouble with that, but it's all good now.
Thanks
Dynamically creating/removing a html code is easy with JQuery as explained above by Adam. However keep caution to provide users with facility to remove them as well.
Best way would be adding a id to the select box and provide a span/div with a close 'X' on clicking which either it could be removed completely
$(document).ready(function(){
{
$("#close").click({function(){
$("#selectid").remove(); // to remove the select
$("#selectid").hide(); //this would hide it but when submitted, the default/selected option shall still be submitted
$("#close").remove();
}):
});

Title Attribute on Disabled Elements in Firefox

I am building a very dynamic web-based application using a lot of Javascript to handle user events. I am in the process of making things a little more usable and came across a problem that I've never had before.
I am using jQuery, so factor that in to your answers. Thanks in advance.
I have a set of button elements defined as:
<input type="button" title="My 'useful' text here." disabled="disabled" />
I have these buttons with a default style of:
div#option_buttons input {
cursor: help;
}
Then, using jQuery I run something like this as a click-event on a select box:
window.current_column = '';
$('select.report_option_columns').live('click', function() {
var column = $(this).val();
if ( column == window.current_column ) {
// clear our our previous selections
window.current_column = '';
// make this option no longer selected
$(this).val('');
$('div#option_buttons input').attr('disabled','disabled');
$('div#option_buttons input').attr(
'title',
'You must select a column from this list.'
);
$('div#option_buttons input').css('cursor', 'help');
} else {
window.current_column = column;
$('div#option_buttons input').attr('disabled','');
$('div#option_buttons input').attr(
'title',
'Add this option for the column "' + column + '"'
);
$('div#option_buttons input').css('cursor', 'default');
}
});
So, as you can see, when a column is selected in the select box (not shown here), I want the button to be enabled and behave like a button would (with my own click-events). But when a column is not selected (including the default load), I want the button disabled. The usability developer in me wanted to give the users subtle contextual clues as to what they can do to enable the button through the native rendering of the title attribute as a lightweight tooltip. I do this already in other areas of the application (this is a crazy beast of a project) and our usability tests have shown that the users are at least capable of recognizing that when the cursor changes to "help" that they can hover over the element and get some information about what is going on.
But this is the first time I've ever tried this with a form element. Apparently when I put disabled="disabled" in the element, it completely ignores the title attribute and will never display the tool tip.
Now, I know I have a few options (at least the ones I could think of):
Write my own custom tool tip plug-in that is a little bit more robust.
Don't "disable" the element, but style it as disabled. This was the option I was leaning on the most (in terms of ease to develop) but I hate having to do this.
Leave the button as enabled but don't process the click event. I don't like this option as much because I like to leave things natively styled as they should logically be. A disabled button "feels" the most correct and the look of a disabled button is instantly recognizable as a disabled button.
So, with all that said, am I missing something? Is there something easy that I can do that I just haven't thought of? Google searches have failed me on this topic, so I thought I'd toss this out on StackOverflow to get some fresh eyes on this.
**Edit**
I just found another StackOverflow question on this same topic, though that person used a very different set of terms describing his problem (probably why I didn't find it).
The url to the question is: Firefox does not show tooltips on disabled input fields
Both of the answers on that question are pretty good, though I'd like to see if anyone has any other suggestions. Maybe something more jQuery specific? Thanks again.
I had a similar problem and I just surrounded the disabled element in another element and interacted with that div, i was using tipTip to show tooltip for disabled checkbox
<div style="cursor: pointer;" class="disabled" title="Do something to make it work" >
<input disabled="disabled" type="checkbox">
</div>
There are several validation plugins that are very robust. You can find them in the jQuery plugins area.
Another option for you though which I happen to love and tends to be trending now adays is using the "Tipsy" plugin. You can put little '?' icons to the right of your text fields and people can mouse over them to get a "facebook-like" tool tip. This plugin is very sharp and I highly recommend it.
Good luck!
I haven't tested whether or not that solves the problem with the missing title, but you could also disable the button(s) using jquery on $(document).ready()
regards,
harpax
If that doesn't break your design totally, you can replace your button by a "span", "p",... tag with "My 'useful' text here."
And swap it with the button only when the user makes the correct move.

Categories