for iCheck plugin, is there a way to avoid "ifChanged" event handler to fire up when setting the checkbox from Javascript?
Old question, but I found a better method is to check the event.target.checked property and only run your code if it returns true. iCheck fires ifChanged twice - first for the un-checked option, then secondly for the checked option. So if you only run your code if event.target.checked === true, you will get the result you are after.
You could create a variable ignoreChange and when subscribing to the event handler, checking whether that variable is true and if it is, then set it to false and stop the function. If it is not true, then you can execute your normal code.
JS code:
var ignoreChange = false;
$('input').on('ifChanged', function(event){
if (ignoreChange) {
ignoreChange = false;
return;
}
// do stuff
});
// When changing the checkbox
ignoreChange = true;
Basically, whenever you set the variable ignoreChange to true, the next event call is ignored. This is quite a hacky workaround, however necessary, as I did not find a way to solve your problem trough the iCheck library.
Related
I am using vue element UI.
and on user input change I want to save data (something like autosave).
So far there is one event provided by element UI, that is "change" event.
But that is also calling when I assign value from backend, in that case data are already saved.
So how to detect whether value has come from user or from our binding (I know I can take flag in this case if there is no other better solution)?
<div id="app">
<template>
<!-- `checked` should be true or false -->
<el-checkbox v-model="checked" #change="changed">Option</el-checkbox>
</template>
var Main = {
data() {
return {
checked: true
};
},methods: {
changed(val) {
alert('This should only change when user inputs, not when data is updated from code');
setTimeout(function(){
//Here alert should not appear as this is not manual input.
this.checked = !this.checked;
},5000);
}
}
};
var Ctor = Vue.extend(Main)
new Ctor().$mount('#app')
Here is a codepen
https://codepen.io/hnviradiya/pen/zYORGRR
Change event was working perfectly fine.
My mistake was (in code I had written, got answer when I wrote code for question which I took from element ui webpage when asked by #Boussadjra Brahim in comment) that I had bind it using (:) instead of (#).
So it was expecting #change and I had provided :change.
For more details.
https://stackoverflow.com/a/46748348/9263418
Solution 1
The #input event should work well for that case. Small diference is, that it triggeres at each key down.
Solution 2
You could use Vue.nextTick
Before setting the value from backend in code, you could set a flag this.isSettingValue = true. Then you set the value and call Vue.nextTick(() => { this.isSettingValue = false });
Now you can avoid autosaving by checking this.isSettingValue == true.
Using Vue.nextTick ensures that the flag isn't set back to false until after the asynchronous data update completes.
Vue.nextTick( [callback, context] )
I am trying to set up a simple boolean variable in js in order to control a few things however I am having some issues relating to when it is being fired. The boolean variable is changed whenever the user clicks a button which runs the function changeVariable(). The issue is that the alerts are firing on page load and not when the user clicks a button which runs the specified function. If anyone could take a look, that would be much appreciated.
Code is here:
var triggered = false;
function changeVariable() {
triggered = ! triggered;
}
if (triggered = true) {
alert(triggered);
}
if(triggered = false) {
alert(triggered);
}
triggered = true it is an assignment. Use == or ===.
=== it checks for type also.
The issue is that the alerts are firing on page load and not when the user clicks a button which runs the specified function.
That's because the code which performs the test and does the alert is not inside the function. Move it.
Aside: = is an assignment, to perform a comparison use == or ===. For boolean tests, consider a simple if (value) instead. Also consider the use of else instead of duplicating a test with a negative modifier.
Currently working on a piece of code written by someone else for event handling. there are parts of the code that I am unsure about and if possible would like to get an explanation of what it all means.
if (div.addEventListener) {
div.addEventListener("click", handleClick, false);
} else if (div.attachEvent) {
div.attachEvent("click", handleClick);
};
function handleClick(e) {
var evt = e || window.event;
var target;
if (evt.target) {
target = evt.target;
} else {
target = evt.srcElement;
}
alert("You clicked on " + target.id);
};
I understand that it is checking to see if there is an event occurring, but why does it addEventListener twice as well as attachEvent twice? Also why does one return a false value and the other does not?
I am unsure as to what the second part of code is doing altogether, any possible explanation? I know it is the code that is called once the event(s) occur.
"addEventListener" doesn't works in IE(older Versions), in IE(older Versions) "attachEvent" works, So here check is maintained that which function is available, so it would be used.
if (div.addEventListener) {
div.addEventListener("click", handleClick, false);
} else if (div.attachEvent) {
div.attachEvent("click", handleClick);
};
Only one of these will happen (it's an IF statement). It first checks if the browser supports addEventListener.
The false parameter it passes in is the useCapture argument:
"The third, now optional, parameter in addEventListener is “useCapture”, which literally means fire the event at “capture” and not “bubble”. When an event is attached to an element, it will fire once the event has fully bubbled up to the document. However, if you set the useCapture flag to true, the event will fire on capture, and not wait for the event to fully bubble up the DOM tree." - from http://benhowdle.im/useCapture-demystified.html
The second part of the code is ran when the user clicks the DIV. It's again, checking to see if the browser supports certain event properties, to get the right element that was clicked.
why does it addEventListener twice as well as attachEvent twice?
It doesn't.
It tests to see if the property has a value, and if it does it calls the function stored in the property.
Also why does one return a false value and the pother does not?
Neither returns a false value. One has false passed in as the third argument. They are different functions and don't work the same way.
I'm wondering which would be the proper way to deal with events which depend on the status of a variable.
Right now, I have a listener which it is only added if the option isTablet is set to true. (as if not, it breaks in old versions of IE). So it looks like this:
if(options.isTablet){
document.addEventListener('touchmove', function(e){
....
});
}
Now, I'm having troubles if I want to change the variable isTablet dynamically with a setter and It won't load the event touchmove.
$.fn.myPlugin.setIsTablet = function(value){
options.isTablet = value;
}
I guess the simple way is always adding the event and inside it deciding whether or not to execute the code:
document.addEventListener('touchmove', function(e){
if(options.isTablet){
....
}
});
But throws an error in IE 8:
Object doesn't support property or method 'addEventListener'
What would be the way of doing it?
Thanks.
Generally, I would always add the listener and check the condition inside. To avoid your error, since you're using jQuery, just use jQuery:
$(document).on('touchmove', function(e){
if(options.isTablet){
....
}
});
If you have a handler that is called very often, you could consider turning it off when not needed. Something like this:
function myHandler(e) { ... }
$.fn.myPlugin.setIsTablet = function(value){
options.isTablet = value;
if (value) {
$(document).off('touchmove').on('touchmove', myHandler);
} else {
$(document).off('touchmove');
}
}
Be careful not to bind the handler more than once (like if true is sent to setIsTablet more than once in a row). You could also use a flag instead of unbinding/binding like I've shown.
I'm trying to execute JavaScript functions that are called when a event (for example onClick event) is performed on a web page with JavaScript code. I'm getting the function from the event like this :
var attributval = document.getElementsByTagName("a").getAttribute('onClick');
and I'm trying to execute this object (which a JavaScript function in fact) as a function (suppose we have <a onClick = alert('whatever');> on this example, I tried:
var attributval = document.getElementsByTagName("a").getAttribute('onClick');
attributval() = function(){attributval};
attributval();
but it didn't work.
A DOM attribute is not the same as a JavaScript property (even though they can have the same name onclick). You should use
var attributval = document.getElementsByTagName("a")[0].onclick;
to retrieve a function (or null) from the JS object (as opposed to getAttribute(), which will most likely return a toString() for the property).
Now, attributval() = is illegal syntax, as attributval() is not an l-value (you cannot assign to it).
attributval(); will work but without the second line (which is illegal JavaScript) it will invoke the original A element onclick handler (if one is defined) or throw an exception (if the onclick handler is null).
Skip trying to create a function around the function. Just call it:
var attributval = document.getElementsByTagName("a")[0].onclick;
attributval();
try
var attributval = document.getElementsByTagName("a")[0].getAttribute('onClick');
By using get attribute you are returning a string so your only way is to use eval(onclickString) or var fn = new Function(onClickString); fn();
attributval is simply a string, correct? If you trust this code, execute it with eval(attributval) -- however any reference to this won't work.
What you probably want is to manually trigger an event. jQuery makes that easy.
If you want to do more than a click, then Chris McDonald's answer at Is it possible to trigger a link's (or any element's) click event through JavaScript? seems to fit the bill, although you might need to heed the third comment.
I thought I'd add a short answer on how to work with events using jQuery, since it seems relevant.
// Select the link using it's ID field (assuming it has one)
var myLink = $('a#myLink')
// Add a click event to the link
myLink.on('click', function(e) {
console.log("I've been clicked!");
});
// Trigger the click event manually. This would result in the above
// function being run. Interestingly, this will not cause the browser
// to follow the link like a real click would
myLink.trigger('click');
// Remove the click event (this removes ALL click events)
myLink.off('click');
// Add a click event to the link that only runs once, then removes itself
myLink.one('click', function() {
alert("I'll only bother you once!");
});
// Add a click event that you can identify from other click events.
// This means that you can trigger it or remove it without bothering other
// click events
myLink.on('click.myClick', function() {
alert("This click event has been identified as 'myClick'");
});
// Now you can trigger it without triggering other click events
myLink.trigger('click.myClick');
// And remove it, also with no harm coming to other click events
myLink.off('click.myClick');
Hope this helps