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.
Related
Right now I am using the jQuery plugin Chosen (https://harvesthq.github.io/chosen/)
The multiselect option is exactly what I want to achieve, but I'd like if the selected elements appeared outside of the textbox instead of inline the others. Any quick solutions? Or should I be looking at a custom coded attempt?
A bit brute but might be effective. Add your own chosen().change() event handler (as per their docs) to the texbox and simply move the <li> elements from the textbox to wherever you like. So something along the lines of:
$("#form_field").chosen().change(
// detach from source and append to destination
);
I am experimenting with select2 by adding custom tags to it.
I do this with this code:
$(".js-example-basic-multiple")
.on("select2:selecting",
function() {
e.params.args.data.text = parentTarget + e.params.args.data.text;
});
I am using the multiple attribute BUT i am using the optgroup elemnt of the select list and it acts as a parentId container where only one element per container can be selected. This is solved but what i can not do is remove "MycustomTag" from previous selected option.
MycustomTag is either
Users
Or
Tank
And when selecting a new option i want to remove the Tank/Users tag on the previous selected option. In my debuging process i found that this is getting overriden in the change event but I can't figure out how to stopp it.
the code is pretty huge so I created a fiddle
How can I remove the tag that I am setting?
After some extensive detective work I found a very simple answer...
$(this).data().data.text = $(this).data().data.text.replace(parentTarget, "");
fiddle has been updated
I have a button that is cloning an element on the page each time the user clicks it. It is duplicating a select list for them to choose another option.
However, its cloning the whole element including the option that was selected so all of the new ones appended have a default value which I dont want.
globalLocales = $("<div />").append($('[name=localeID]:first').clone()).html();
$('select').select2();
Is there a way I can remove the selected option during the cloning process so it doesn't carry over to the new element?
I tried using .removeProp('selected') in the append as well as .prop('selected',false); but that didn't work for me
One way to fix the proble is to select a nonexistent value:
$("<div />").append($('[name=localeID]:first').clone().val(-1)).html();
Or you can find selected option and remove selected attribute:
$("<div />").append($('[name=localeID]:first').clone()
.find(':selected').removeAttr('selected').end()).html();
but this is a little clumsy.
you can remove the selected attribute with this code.
$('[name=localeID] option:selected').removeAttr('selected');
I'm using jQuery 1.7.2 and got an on change event for a class like this:
$(document).on('change', '.item_amount', function(){
});
Many selects on the same page have that class and if I change one of those selects the change event triggers X times if I change one of those selects(X is the amount of selects having that class) but I only want it to trigger once since only one select has changed.
Is that normal behaviour or am I doing something wrong?
Edit:
The problem seems to be somewhere else. The elements containing that select get inserted(Ajax call) and when one of them gets inserted into the dom, the change event is triggered for all existing elements.
So basically I got select number 1 which holds some products. When a product is selected HTML code is inserted into a div which holds all current products. When that happens the change event on all products in that div is triggered.
Use this keyword to refer to the current element changed in the change function block.
this --> JavaScript or Native Dom Element.
$(this) ->Your jQuery Object
$(document).on('change', '.item_amount', function(){
alert(this.value);
console.log(this);
});
Set the. on change to the element and pass it as an argument to the function?
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");
});