jQuery checkbox trigger change not working - javascript

I have the following JS function:
const bindSwitches = function() {
$(document).on("click", ".lever", function() {
var checkbox = $(this).siblings("input[type=checkbox]");
var hiddenField = $(this).siblings("input[type=hidden]");
if (checkbox.prop("checked") === true) {
checkbox.prop("value", 0);
hiddenField.prop("value", 0);
} else if (checkbox.prop("checked") === false) {
checkbox.prop("value", 1);
hiddenField.prop("value", 1);
}
$(checkbox).trigger("change");
});
};
It interacts with a switch component provided by the Materialize library. I have just added the final line, as there is some behaviour that needs to occur whenever a checkbox is triggered. But that change event never fires. I also have this function in my app:
const bindAllChecks = function() {
$(document).on("change", ".select-all-check", function() {
var checks = $(this).closest(".table, table").find(".multiple-check:visible");
if (this.checked) {
$.each( checks, function( index, checkbox ){
if ($(checkbox).prop("checked") === false) {
$(checkbox).prop("checked", true);
$(checkbox).trigger("change");
}
});
} else {
$.each( checks, function( index, checkbox ){
if ($(checkbox).prop("checked") === true) {
$(checkbox).prop("checked", false);
$(checkbox).trigger("change");
}
});
}
});
};
Notice how I use the exact same $(checkbox).trigger("change"). In this function it works perfectly.
I've tried changing the order in which I bind the events, to make sure the change event is definitely defined beforehand. I've made sure that the rest of the function is being triggered correctly and that there are no issues in that regard. I've also tried different variations of alternative syntax, nothing has worked.
Here is the code it is supposed to trigger:
const bindCheckboxOverride = function() {
$(document).on("change", ".checkbox-collection input[type=checkbox]:not(.select-all-check)", function() {
var hiddenField = $(this).prev();
if(hiddenField.attr("disabled") === "disabled") {
hiddenField.removeAttr("disabled");
} else {
hiddenField.attr("disabled", "disabled");
}
});
};

I still don't have an exact solution to the question I asked, but I have come up with an alternate method. Instead of trying the trigger a change, I have pulled out the functionality I want from the change even into its own function:
const bindCheckboxOverride = function() {
$(document).on("change", ".checkbox-collection input[type=checkbox]:not(.select-all-check)", function() {
handleCheckboxDisable(this);
});
};
const handleCheckboxDisable = function(checkbox) {
var hiddenField = $(checkbox).prev();
if(hiddenField.attr("disabled") === "disabled") {
hiddenField.removeAttr("disabled");
} else {
hiddenField.attr("disabled", "disabled");
}
};
So now I'm able to call this function directly from my other function:
const bindSwitches = function() {
$(document).on("click", ".lever", function() {
var checkbox = $(this).siblings("input[type=checkbox]");
var hiddenField = $(this).siblings("input[type=hidden]");
if (checkbox.prop("checked") === true) {
checkbox.prop("value", 0);
hiddenField.prop("value", 0);
} else if (checkbox.prop("checked") === false) {
checkbox.prop("value", 1);
hiddenField.prop("value", 1);
}
handleCheckboxDisable(checkbox);
});
};
It doesn't answer the question but I thought that may be of help to somebody. Would still like to know why the original code doesn't work if anybody has any insights.

Related

Disabling prevent.Default action

I have a piece of javascript code which initiates mobile menu dropdown. But while I was working on this, I wasn't paying attention and stupidly copied a code from another source and now I can't click on parent items on mobile menu.
When I remove e.preventDefault();, I'm getting an error in console and menu is not working. Here is the full code. What can I do with my code to make the parent items clickable?
var $dropdownOpener = $('.mobile-header-navigation .menu-item-has-children > a');
if ($dropdownOpener.length) {
$dropdownOpener.each(function () {
var $thisItem = $(this);
$thisItem.on('tap click', function (e) {
e.preventDefault();
var $thisItemParent = $thisItem.parent(),
$thisItemParentSiblingsWithDrop = $thisItemParent.siblings('.menu-item-has-children');
if ($thisItemParent.hasClass('menu-item-has-children')) {
var $submenu = $thisItemParent.find('ul.sub-menu').first();
if ($submenu.is(':visible')) {
$submenu.slideUp(450);
$thisItemParent.removeClass('qodef--opened');
} else {
$thisItemParent.addClass('qodef--opened');
if ($thisItemParentSiblingsWithDrop.length === 0) {
$thisItemParent.find('.sub-menu').slideUp(400, function () {
$submenu.slideDown(400);
});
} else {
$thisItemParent.siblings().removeClass('qodef--opened').find('.sub-menu').slideUp(400, function () {
$submenu.slideDown(400);
});
}
}
}
});
});
}
}
Maybe try to call e.originalEvent.preventDefault() with null checks like :
e && e.originalEvent && e.originalEvent.preventDefault()

Custom Event Event Handler Not Firing

I'm working on translating a small piece of JQuery into vanilla javascript. the code here is for controlling my forms' UI.
in the debugger I am able to see that at line 36 elem.dispatchEvent(checkValEvent) is firing repeatedly for each run or the .foreach loop, however, the event handler for the "checkval" event does fire. Can't seem to find a solution.
The following is the translation(or attempted translationat least)from Jquery code.
var onClass = "on";
var showClass = "show";
elems.forEach(function(elem) {
var checkValEvent = new CustomEvent("checkval");
elem.addEventListener("changeval", function(e) {
var label = e.target.parentElement.previousElementSibling;
console.log(label)
if (this.value !== "") {
label.classList.add(showClass)
} else {
label.classList.remove(showClass)
}
})
elem.addEventListener("keyup",function(e){
e.dispatchEvent(checkValEvent)
})
elem.addEventListener("focus",function(){
label.classList.add(onClass)
})
elem.addEventListener("blur",function(){
label.classList.remove(onClass)
})
elem.dispatchEvent(checkValEvent)
});
Also, if it helps, Here is the Jquery it came from:
$(function() {
var onClass = "on";
var showClass = "show";
$("input,textarea")
.bind("checkval", function() {
var label = $(this)
.parent()
.prev("label");
if (this.value !== "") {
label.addClass(showClass);
} else {
label.removeClass(showClass);
}
})
.on("keyup", function() {
$(this).trigger("checkval");
})
.on("focus", function() {
$(this)
.parent()
.prev("label")
.addClass(onClass);
})
.on("blur", function() {
$(this)
.parent()
.prev("label")
.removeClass(onClass);
})
.trigger("checkval");
});
Any possible fix you guys can think of would be greatly appreciated,
thanks!

Changing required field dynamicly via JS in Contact Form 7

I need to write custom validated form in Wordpress. After the click on For-Author radio button some checkboxes group should be marked as not required. I tried to change "aria-required" attributes to "false" or remove and add class "wpcf7-validates-as-required" but it doesn't work. I also tried to reinit wpcf7 by
$('div.wpcf7 > form').wpcf7InitForm();
but it's also doesn't work.
This is a code sample:
$radio.button.click(function (event) {
isAuthor(event)
});
var isAuthor = function (event) {
if ($(event.target).attr('data-author') == 'true') {
authorClicked = true;
} else {
authorClicked = false;
}
fieldUpdate();
};
var fieldUpdate = function () {
var $text = $('[name=pres-title]');
if (authorClicked) {
$text.prop('disabled', false).attr('aria-required', true).addClass('wpcf7-validates-as-required').attr('aria-invalid', false)
$fieldRequired.each(function () {
$(this).prop('disabled', false).attr('aria-required', true).addClass('wpcf7-validates-as-required').attr('aria-invalid', false);
});
} else {
$text.prop('disabled', true).attr('aria-required', false).removeClass('wpcf7-validates-as-required').attr('aria-invalid', false);
$fieldRequired.each(function () {
$(this).prop('disabled', true).attr('aria-required', false).removeClass('wpcf7-validates-as-required').attr('aria-invalid', false);
});
}
}

If...then function for button press

How would I do an if...then statement for this piece of code?
$('body').on('click', '.icon-lock', function () {
var lockedarea = $(this).parents(0).eq(2);
$(lockedarea).find('input[type=text],input[type=checkbox],textarea,select').prop('disabled', true);
});
Right now when I click it, what I want to happen happens as far as those inputs becoming uneditable. However I'm trying to say that if this button is pressed, then this happens. And if it's pressed again, then .prop('disabled', false). However as I'm just starting out, I get confused easily when doing this sort of thing.
You need to keep track of whether you want to disable it or not in some sort of variable. Try this:
var disable = true;
$('body').on('click', '.icon-lock', function () {
var lockedarea = $(this).parents(0).eq(2);
$(lockedarea).find('input[type=text],input[type=checkbox],textarea,select').prop('disabled', disable);
disable = !disable;
});
Use some flag:
var isDisabled = false;
$('body').on('click', '.icon-lock', function () {
var lockedarea$ = $(this).parents(0).eq(2),
inputs$ = lockedarea$.find('input[type=text],input[type=checkbox],textarea,select');
if ( isDisabled ) {
isDisabled = false;
inputs$.prop('disabled', false);
} else {
isDisabled = true;
inputs$..prop('disabled', true);
}
});
Just replace your current .prop with this:
.prop('disabled', function (_, val) { return ! val; });

Events being bound twice or more jquery

I'm trying to generate html on the fly with javascript. I'm binding on the click of buttons on my page. There are multiple buttons on my page which are causing my elements to be bound multiple times which produces the desired results to appear in the amount of times the button has been clicked.
My question is there something that can check if a element is already bound in jquery? If so, how do I incorporate that with the .live() function in jquery.
Here is my code:
$(document).ready(
function () {
$(':button').live("click", ".textbox, :button", function () {
alert("binding");
$(".textbox").click(function () {
defaultVal = this.defaultValue;
if (this.defaultValue) {
this.value = "";
}
});
$(".textbox").blur(function () {
if (this.value == "") {
this.value = defaultVal;
}
});
$('[name="numsets"]').blur(function () {
if (!parseInt(this.value)) {
$(this).val("you need to enter a number");
}
});
$('[name="weightrepbutton"]').click(function () {
var $numsets = $(this).parent().children('[name="numsets"]');
if ($numsets.val() != "you need to enter a number" && $numsets.val() != "Number of Sets") {
var numbersets = parseInt($numsets.val())
repandweight.call(this, numbersets)
$(this).hide();
$numsets.hide();
}
})
});
});
The problem is line 4, every time a button is clicked, all functions that were previous bound seem to be bound to the same function twice, which is a problem.
Thanks for the help!
You are doing it twice ! One inside another. Take out the outer binding and it should work
$(document).ready(function () {
$(document).on("click",".textbox",function () {
defaultVal = this.defaultValue;
if (this.defaultValue) {
this.value = "";
}
});
$(document).on("blur",".textbox",function () {
var item=$(this);
if (item.val() == "") {
item.val(defaultVal);
}
});
$(document).on("blur","input[name='numsets']",function () {
var item=$(this);
if (!parseInt(item.val())) {
item.val("you need to enter a number");
}
});
$(document).on("click","input[name='weightrepbutton']",function () {
var $numsets = $(this).parent().children('[name="numsets"]');
if ($numsets.val() != "you need to enter a number" && $numsets.val() != "Number of Sets") {
var numbersets = parseInt($numsets.val())
repandweight.call(this, numbersets)
$(this).hide();
$numsets.hide();
}
})
});
if you are using jQuery 1.7+ version, consider switching to jQuery on instead of live.
EDIT: Updated live to on as OP mentioned it in the comment.

Categories

Resources