Develop Reference

Differentiate between user input and data change with vue element ui

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] )

Unable to trigger change after changing value in select box

I'm trying to change a value in a dropdown box and then trigger the event that happens when the value changes. The code is quite simple and looks like this:
zScalerEndPointList.on("change", function(){
// Change the value
$("select#phase1_type").val("string:ddns");
// Trigger the change
$("select#phase1_type").trigger("change");
})
The value is successfully changed, but the event is not triggered. If logging the object with jQuery I can see that the attached change event is null. However, if running the following command manually in the Javascript console window it works:
$("select#phase1_type").trigger("change");
Any ideas on what could be wrong? I do not own the application, this is a Javascript executed via TamperMonkey.
Grateful for any input.
/Patrik

I am not sureI got you but you can use watch for the dorpdown list or anything similar to this
$scope.$watch(function () { return self.filter; }, function (newValue, oldValue) {
if (newFilter != oldFilter) {
// call trigger
}
}, true);

Turns out this is a duplicate question. That I've asked before. A bit awkward. :)
Tampermonkey: Trigger event does not work for element
Solved it with the following function:
function triggerEvent(e, s){
"use strict";
var event = document.createEvent('HTMLEvents');
event.initEvent(e, true, true);
try {
document.querySelector(s).dispatchEvent(event);
} catch(err){
console.log("Unable to fire event " + e + " on selector " + s);
console.log(err);
}
}
Looks like both web applications is using some transpiled framework which makes life hard for me by removing and re-adding elements to the DOM. Hope this helps someone else too.
/Patrik

CodeMirror: Catching Enter Key prevents line breaks

I used the extraKeys-option of CodeMirror 3.12 to detect when the user starts a new line:
extraKeys: {
"Enter": onNewLine
}
onNewLine() does nothing but a console.log(). Now CodeMirror ignores that key. You can't start a new line anymore. Is there a way to hook up additional functionality on a new-line-event without interfering CodeMirror internals? I just want to analyze the text of the recently closed line.

Add a line break at the end of onNewLine function.
This should work
function onNewLine(e){
console.log(e);
editor.replaceSelection("\n" ,"end");
}

I found that returning CodeMirror.Pass also works:
function onNewLine(e) {
console.log("Enter key was pressed!");
return CodeMirror.Pass;
}
From the documentation:
A key handler function may return CodeMirror.Pass to indicate that it has decided not to handle the key, and other handlers (or the default behavior) should be given a turn.
This seems to work even if the handler does perform an action. In my case I was using the editor.indentLine function to indent the current line when the user pressed the enter key.

jquery beginner - function to initiate by time

I am a rookie in JS, have a problem understanding JQUERY semantics.
I have a function written for checking the content of a cell.
Problem: the function just starts when the cell loses focus, if I click Submit, the error shows first, then it will run the function.
I want the function to run even when I am inside the cell. How to do it?
Initiated by this:
$(".user_id").blur(function(){ validateUserId($('.user_id')); });
The function:
function validateUserId(reference) {
if ( 5 == $(reference).val().length ) {
$.get('index.php?user=' + $(reference).val(), function(data) {
if ( "error" == data ) {
$(reference).parent().parent().addClass('error');
alert('error');
} else {
$(reference).parent().parent().removeClass('error');
$(reference).addClass('valid');
$(reference).parent().parent().addClass('success');
}
});
} else {
alert('short');
$(reference).parent().parent().addClass('error');
}
}

$(".user_id").on('keyup', function(){
validateUserId($(this));
});

i would use the keyup event.
So everytime somebody types a key in your input cell, the function will be executed.
$(".user_id").on("keyup", function(){ validateUserId($(this)); });
I changed the $(".user_id"), you take the value from ,to $(this). Since you want the value of the field you did the keyup event on. (And not an other field, if there would be 2 fields with the same .user_id class.)

Try to bind function on focus event

$("input[submit]").click(function(e){
e.preventDefault();
var valid = validateUserId($('.user_id')); // maybe the function could return a boolean value too instead of just adding classes to the HTML part
if (valid) {
$("#your_form_id").submit(); // only if the input is valid, submit it
}
});
sidenote on your problem: if you click the submit button it will first trigger the submit action which may give you an error and then execute the blur() block of code

Here is a working demo http://jsfiddle.net/pomeh/GwswM/. I've rewritten a little the code to:
cache DOM selections into variables,
use jQuery methods chaining,
improve if conditions with tripe equal signs,
separated AJAX calls and application logic,
cache identical AJAX calls,
use jQuery deferred to hide the asynchronous aspect of the verification (linked to AJAX)
Hope that'll help :)

Is there a 'has focus' in JavaScript (or jQuery)?

Is there something I can do like this (perhap via a plugin)
if ( ! $('form#contact input]').hasFocus()) {
$('form#contact input:first]').focus();
}
Basically, set focus to the first input, but only if the user has not already clicked into anything?
I know this will work too, but is there anything more elegant?
$(function() {
var focused = false;
$('form#contact input]').focus(function() {
focused = true;
});
setTimeout(function() {
if ( ! focused) {
$('form#contact input:first]').focus();
}
}, 500);
});

There is no native solution but yes there is a more elegant way you can do it:
jQuery.extend(jQuery.expr[':'], {
focus: "a == document.activeElement"
});
You're defining a new selector. See Plugins/Authoring. Then you can do:
if ($("...").is(":focus")) {
...
}
or:
$("input:focus").doStuff();

$('input:focus')
It's CSS. You don't need to create a "custom selector." It already exists! http://www.w3schools.com/CSS/pr_pseudo_focus.asp
Just attach whatever process you want to do to that selector, and it will weed it out if the element in question is not focused. I did this recently to keep a keyup from instantiating an email input error check when the e-mail input wasn't being used.
If all you're trying to do is check if the user has focused on anything themselves, just do this:
if($('input:focus').size() == 0){
/* Perform your function! */
}

jQuery 1.6 now has a dedicated :focus selector.

I had trouble with cletus approach, using jQuery 1.3.2 and Firefox 3.6.8, because the string "a == document.activeElement" was not a valid function.
I fixed it defining a function for the focus key. In fact, all other keys defined in jQuery.expr[':'] are defined as functions. Here's the code:
jQuery.extend(jQuery.expr[':'], {
focus: function(e){ return e == document.activeElement; }
});
So, now it works as expected.
However, I was experiencing some strange behaviour in Firefox 3.6.8 (maybe a bug in FF?). If I clicked on an input text while the page was rendering, and if I called is(":focus") on page load, I would get an error from the browser, reported by FireBug, and the script would break.
To solve this, I surrounded the code with a try...catch block, returning false on error. Use it if you want to prevent your users from experiencing the same error:
jQuery.extend(jQuery.expr[':'], {
focus: function(e){
try{ return e == document.activeElement; }
catch(err){ return false; }
}
});

Frustratingly difficult to find a solution to this problem considering the solution is actually very simple:
if (document.activeElement == this) {
// has focus
}
if (document.activeElement != this) {
// does not have focus
}

No, there isn't.
However, you can simulate it like this:
$(':input')
.data('focused', false)
.focus(function() { $.data(this, 'focused', true); })
.blur(function() { $.data(this, 'focused', false); });

There is a plugin http://plugins.jquery.com/project/focused
Also you can check Using jQuery to test if an input has focus

Here is a succinct way to do it.
$(document.activeElement)
or to plug it into your example..
if ($('form#contact input]')[0]!=$(document.activeElement)) { ... }

I know this is an old question, but may be my solution will help someone :)
since this didnt worked for me:
if ($(this)!=$(document.activeElement)) { ... }
..were "this" is returned from blur function. So i did this:
if ($(document.activeElement).attr("class") != "input_textbox"){ ... }

$('*:focus')
(Necro ftw, but still valid and useful)