WooCommerce - Triggering variation select with custom select boxes - javascript

I'm trying to use FancySelect.js to style the select boxes used on WooCommerce and have managed a few but I'm struggling with the Variation form on product pages.
While FancySelect triggers a change event on the original select box, it appears to affect nothing. Looking at the javascript used in the variations form, it looks like they've unbinded the change event on the select box and are handling it some other way, by triggering events on the .variations_form instead. I can't seem to get it to work though.
My code is something along the lines of:
$('.summary select').fancySelect().on('change.fs', function() {
$(this).trigger('change.$');
$('.variations_form').trigger('woocommerce_variation_select_change');
});
I've tried triggering multiple events but none seem to have any affect.
Any ideas?
Thanks.

So it turns out that the original trigger didn't work, for reasons I can't quite work out. However, manually triggering a change event on the original select box worked to some degree, but it wouldn't update fancySelect's "Trigger" element. I think this was because the original select's options didn't get a :selected attribute (for whatever reason). I've had to add a custom event to fancySelect to manually trigger it's updateText() method.
Updated code:
$('.summary .options li').on('click', function(){
$('.summary select').trigger('change').trigger('select.fs');
});
And the additional event for fancySelect (which I'll try contribute to if I get chance):
sel.on('select.fs', function(){
updateTriggerText();
});
Cheers.

Related

How to detect click event on dropdown, but not on the options menu in Javascript (or differentiate between the two)?

So I have a simple dropdown in my code that I attach a click hander to, like so (code is technically typescript)
this.highElement.click(() => {
console.log(event);
});
This event is triggered both when I click the select box AND when I click one of the options (Here's a Js fiddle that demonstrates what I mean https://jsfiddle.net/Kolichikov/zmdL6q2d/). What I would like ideally is for the event to only fire when I click the select box itself, not the resulting list of items.
I tried setting a delegated event for the option this.highElement.on("click", "option", () => { console.log("option!"); });, but that didn't work.
I have noticed that the MouseEvent properties are different (the mouse coordinates aren't populated when an item is clicked), but this seems like a browser implementation that could change (maybe?).
Is there a way to properly differentiate between the two events?
I'll give you 2 options, you pick the one it's best for you:
First you can differentiate between the 2 events like this:
$("#selectItem").click(function(event){
if (event.target.id == 'selectItem')
console.log(event)
});
the event has a different target when it returns from clicking in select and from choosing an option.
But I think it would be much clearer if you used the change event
$("#selectItem").change(function(event){
console.log(event)
});
it fires only when you select an item. Depending on what you need this could be better.
EDIT
Checkingwhat #libzz said, I notice that the first part of the above response is wrong. I didn't edit it because the OP accepted the answer as is and I'd be changing the code that lead to his decision.
But as #libzz said, the event when fired has always the same id.
What I also noticed now is that the click event only fires when an option is clicked, not when the select box is clicked. That levels the onclick with the onchange event. They basically do the same thing in this case.
So in order to make code clearer, the best would be using only onchange event for selects.

jQuery: select default value and trigger change for multiple Selects

I am new to jQuery and found a couple of different approaches for this online but nothing worked for me so I hope someone can help me.
I have a number of Selects. Each of them has one option with a class "defaultSel" to indicate that this should be selected as the default when a certain event is triggered.
My approach was the following which does change the Selects value but I can't get it to actually trigger the change (neither adding .change() nor .trigger('change') worked for me here).
Also, if there is a way to avoid .each here at all please let me know as well.
My jQuery:
$(this).closest('div').nextAll('div.hiddenDiv').show().find('.defaultSel').each(function(){
$(this).prop('selected', true).change();
});
Many thanks in advance for any help,
Mike
If your option is the thing with the defaultSel class then this should work:
$(this).closest('div').nextAll('div.hiddenDiv').show().find('select:has(option.defaultSel)').each(function(){
$(this).find('option.defaultSel').prop('selected', true).end().change();
});
Just changing two things here:
find('select:has(option.defaultSel)')
will get the select set you're actually wanting, and
$(this).find('option.defaultSel').prop('selected', true).end().change();
this here is the select so you need to find the default option, then end() will return you to the select and you can trigger change() on it.

jQuery: generate Select element

I have a table with data, and when I click on a cell in a certain column, I want it to change into a select dropdown for the user to choose a category for that row (which will be written to the database by AJAX but that'll come later).
I've done something similar before with text boxes using this, which works great, but I'm not sure if I'm modifying it correctly.
I've created a JSFiddle which shows the problem I'm having. I click on the text and it turns into a select element as expected, but when I click on that to choose an option, the dropdown doesn't stay open and I can't select anything. Debugging has shown me that when I click the dropdown, it runs the $("td.ChooseType").click() routine again so I've tried to suppress that by removing the class then adding it back on on selection, but that hasn't solved it. On the rare occasion that the dropdown stays open, I am unable to select anything by either mouse or keyboard.
All of the users will be on IE8 unfortunately, so I need it to be compatible with that.
Thanks!
You need to use event delegation, as otherwise that click event is always bound to that td - regardless of whether its class changes.
Simply change:
$("td.ChooseType").click(function() {
To:
$("table").on('click', '.ChooseType', function () {
JSFiddle demo.
Purely as an alternative to the accepted answer, you can remove an attached handler with unbind. So instead of adding and removing the class, you could unbind and rebind your handler. Only requirement is that the function can't be in-line, but has to be declared separately.
example: http://jsbin.com/qiqunici/1/edit
var handler = function () {
$(this).unbind('click', handler); //unbind the clicked element only
//create and change the element
//inside the select-change event, instead of addClass, re-attach:
{
//$(this).parent().addClass("ChooseType").text(selected).find('select').remove();
$(this).parent().click(handler).text(selected).find('select').remove();
}
};
$("td.ChooseType").click(handler);

How can I choose a select option in jQuery as though it were clicked with the mouse?

I am building a search tool with various select drop downs that populate with options via AJAX. The possible options populated are based on the the option chosen in the preceding select drop down. For the purpose of this tool, I want to have the first select box hidden but still need to select an option in that box so that it triggers the AJAX call on the following box, something that is supposed to happen as the result of an "onchange" event.
I've tried all kinds of different code to simulate a mouse click selection of a particular option but, while I can get the option selected, it still isn't triggering the event properly to set off the AJAX call in the following select. This is as far as I've gotten:
jQuery('#form select').first().val('the-value').trigger('click').trigger('change');
From everything I've read, that should set the option value and trigger a change event much like clicking the option. Still, this isn't working. Thanks!
You only have to use val(), like any other field...
$("select").val("2").change();
http://jsfiddle.net/Loenix34/3LbjY/
We also use change() to call associated events.
Instead of setting the value of the select, set the selected property of the given option, and then trigger a change.
$("option[value='the-value']").prop('selected', true);
$("#form select:first").change();
Fiddle Demo

jQuery click event / event bubbling issues when trying to highlight an element & check a checkbox at the same time

Please have a look at this fiddle: http://jsfiddle.net/mrmartineau/53fkV/embedded/result/
The intended outcome is that when a .poll_option td is clicked, the background colour changes to pink & the checkbox is checked. Each option has different bugs, these are:
Option 1:
The problem I have is that on Option 1, when I click the checkbox itself, it does not check but everything else works fine. By that I mean that when I click the label & the <td> the outcome is correct. It seems that the event is not bubbling correctly..
Option 2:
For this one, I tried another solution (removed the .toggle() method) and tried to figure out what element is actually being clicked (console.log(e.target.nodeName);) and now I can click the checkbox but not the label, rather the label does not make the event work.
Could you please have a look at my code & see where I'm going wrong because I'm sure it can't be this hard...
Cheers
Proposed simpler solution:
$('.poll_option.one td').click(function (e) {
$(this).toggleClass('highlight');
$(this).find('input').prop("checked", $(this).hasClass("highlight"));
console.log(e.target.nodeName);
// weird that clicking the label does not naturally propagate
// the click event to the parent
}).find("label").click(function () {
$(this).closest("td").click();
});
​Demo.

Categories

Resources