jQuery Chosen plugin - first option doesn't trigger change event? - javascript

So I'm using the pretty nice jQuery plugin, Chosen; http://harvesthq.github.com/chosen/
What I'm doing is actually working with TWO Chosen style dropdowns in an 'either/or' fashion, ie the user needs to select an option from one OR the other.
So when the user selects one of the dropdowns, the other one (via javascript) gets set back to its default disabled value.
Both dropdowns are backed by ONE hidden parameter to actually hold the selected value, no matter which dropdown it came from. This is populated by having listeners on both dropdown's on the .chosen().change() event.
The only problem is, it doesn't appear to fire a "change" event when the user selects one of the first options in either dropdown, I guess as this appears to be the already selected option and is therefore not a "change". But both dropdowns actual first option (ie in the jsp) is a disabled option with the normal "Please select" text.
Is there a way to fire the change event even if the option selected was already selected? Or is there just a "select" event that fires even if there hasn't been a change?

you can use .trigger("change"), or .change() on your jquery object to manually trigger the change event.

This worked for me:
//Get the dynamic id given to your select by Chosen
var selId = $('your_select').attr('id');
//Use that id to remove the dynamically created div (the foe select box Chosen creates)
$('#'+ selId +'_chzn').remove();
//Change the value of your select, trigger the change event, remove the chzn-done class, and restart chosen for that select
$('#'+selId).val('your_new_value').change().removeClass('chzn-done').chosen();
In a nutshell you are hard reseting chosen for your select. There might be an easier way than this, but this worked for me.

I just had the same problem using Select2 plugin (remake of Chosen plugin).
I forgot the line "allowClear: true" when I 've declared the Combobox as a select2 one.
$('#selectLabelMap').select2({
placeholder: "Sélectionner un label",
allowClear: true // <= don't forget "allowClear: true (re-init the comboBox)
}

Trigger the change first time when (DOM) is ready.
jQuery(function ($) {
$('#myselect').trigger("change");
});

Related

Dropdown events on options data changed

I have a question about dropdown events. Assume I have two dropdowns, when the option of the first dropdown is changed, all the options of the second dropdown are replaced with other. For example, assume the first dropdown holds the following options:
Car
Bike
Now, if I select the option Car, the second dropdown will contain the following options:
Ford
Toyota
while if I select the option Bike, the second dropdown will contain the following options:
Harley Davidson
Ducati
Is there an event that can be used to detect the refresh of the options for the second dropdown?
Thank you
No such basic event exist. If it really needs - you can create your own event, triggered when changes second select and listen it.
Not realy clear but full docs: https://developer.mozilla.org/en-US/docs/Web/API/Event
Clear, but very short: JavaScript custom Event Listener
But i think that more preferable way is listen change of first select and on this event look at the html of second select.
I am assuming you have dropdowns as shown below
<select id="vehichleDropdown" onchange="onVehichleDropdownChange()">
....
<select id="makeDropdown" onchange="onMakeDropdownChange()">
....
And you have implemented onVehichleDropdownChange() and onMakeDropdownChange() in your javascript to make ajax calls to perform actions. If you have this setup, when you change the first dropdown, the second dropdown's value will change. You can fire the onChange event of the second dropdown in a number ways as described here - How can I trigger an onchange event manually?
I have set up a working fiddle here for your reference - https://jsfiddle.net/t2tak52f/1/
Something like this
onVehichleDropdownChange = function() {
....... //logic to populate second dropdown
makeDropdown.onchange();
}

Refresh/Call PrototypeJs Event from jQuery

I have a Magento Website. I have two js files, one written in Prototype an one in jQuery.
I have two select elements, with about 10 options. From jQuery I'm changing the first select's attribute "selected" (an some more). In Prototype I have a class that creates dependencies between two select elements.
If I click on the first select element and choose an option with the mouse, on the second select element will appear only the options that are linked to the option I choosed in the first select element. This is allready done in prototype.
The idea is that I want to do the click/trigger automatically from jQuery. The first select change it's selected option. But the second select element display all the options (and should display only the options linked to the first select element).
On the Prototype file I have some Event Observers, and I guess that these observers are not triggered from jQuery:
var select_el = $('select_' + id);
...
Event.observe(select_el, 'change', this.update.bindAsEventListener(this));
Event.observe(select_el, 'swatches:change', this.update.bindAsEventListener(this));
...
update: function(event) { ...
So I need somehow to trigger these events from jQuery, or to set an autocheck in Prototype.
Please tell me what should I do.
I've read on stackoverflow that events from Prototype can't be triggered from jQuery. There should be a way to do that. I just haven't found it.
I've tried jQuery functions like:
jQuery("option[value='" + checkedId +"']").attr("selected","selected").parent().focus();
jQuery("option[value='" + checkedId +"']").parent().trigger("onchange");
jQuery("option[value='" + checkedId +"']").parent().trigger('change');
Where the "parent()" is the first select element. The first select element changes as I want, but the second select element should automatically change after the first select is changed. And this never happens. It works only if I click with the mouse on the select and choose manually an option. I want to do this from jQuery, without being necessary to manually click on the desired option.
Thanks for reading this, and now just give me a fix for this problem.
Regards.

Unable to deselect option with Chosen and Knockout Binding

When trying to deselect the currently selected item in chosen through a knockout binding it seems to get reset back to what it was before the reset:
Here's the example:
http://jsfiddle.net/WPpH2/7
Select jQuery from the drop down and click "clear" to see this behavior.
Here's how the data bind is being done:
data-bind="value: selected, chosen: {}">
Any thoughts on how I can make this actually reset?
The reason you're seeing this is because of how the control works. When you click clear, you set the observable to null. The plugin then tries to find an option that has the value null. Because it doesn't find it, it resets your selection to what was last selected.
In your jsfiddle, if you change this line:
myViewModel.selected(null);
to this line:
myViewModel.selected("");
then your example will work. The reason is that you have an option where the value is an empty string.
Also, if you want your plugin to update on the UI, you will need to use this as well:
$(".chosen").trigger("chosen:updated");

jQuery .prop("disabled",true) not working

I have a dropdown that loads the data and there is a Add button and when the add button is being triggered it will be disabled. It works in the first load, but when the dropdown is onchange the disabled button will be false or not disabled. So how can I still disable the button when the dropdown is being changed. I have also a input field to store the values of the button that has been clicked. Check http://jsfiddle.net/leonardeveloper/qy9u5/.
Problem is, you are appending a new element every time your <select> is changed. You need to be showing and hiding the same respective table each time. You can use jQuery to create those tables using the <option>s. Like so:
$("#loads option").each(function(){
thisNumber = this.value;
$("#displays").append("<table data-table="+thisNumber+"><tr><td>"+thisNumber+"</td><td>"+thisNumber+"</td><td><button class='materialId' value='"+thisNumber+"'>Add</button></td></tr></table>");
$("#displays table").hide();
});
We append the tables (2 in this case) to #displays, and then hide them. When we change the <select> now, we hide all tables, and show the one we selected, I've used data-table for this but there are many ways to target your specific table.
$(document).on("change","#loads", function(){
$("#displays table").hide();
$("#displays table[data-table="+this.value+"]").show();
});
JSFiddle
Try to bind click event also.
Demo
$(document).on("change click","#loads",...

YUI Custom Event for Dropdown value pre-selection?

I have a dropdown field and its value is pre-selected as soon as its rendered (Say, its a Country field in a signup form). And I have other dropdowns or other components which change the selected value of the first dropdown dynamically. Now I want to fire a method with every "value getting selected" in the dropdown. Is it possible?
To put my question in much more clearer way, I want to create a onDefaultValueSet event and subscribe the first dropdown to it. So in which ever way the dropdown gets any value selected, the corresponding handler (my function) gets called.
I tried to do it with YUI Custom Events, but I am not sure how the browser will be calling(understanding) my handler every time a value is selected in the dropdown.
onSelect (from Default DOM) is not a right answer I guess, as I tried it.
Please help me in tackling this problem.
I am not sure whether this is an answer, but I've found a workaround. Please validate this.
So I was making a item "selected" using javascript-dom manipulation. Meaning, using
domElement.options[5].selected = True;
So with the (YUI)custom event I created, I started calling "fire()" right after this. So the code becomes:
domElement.options[5].selected = True;
onDefaultValueSetEvent.fire(domElement.name);
But I am not sure, what if the particular option is selected in a gui fashion. Meaning, how automatically fire() method is called

Categories