When using AJAX to auto populate html datalist, why does selecting datalist item trigger another event? I am using jquery keyup to auto suggest queries, after I select a list item the string is placed in the input box correctly but then it triggers the keyup event again which makes the datalist dropdown stay open, covering button.
$(function () {
$('#searchTerm').keyup(function (e) {
var search = $(this).val();
$.post(host/search, {search: search}, function (data) {
$('#list').html(data);
});
});
});
I expect clicking a datalist item to populate the input field with the string selected and then the datalist to disappear, but instead it triggers an additional .keyup event and persists.
The auto suggest feature is quite common so I apologize if I am overlooking anything obvious.
$(function() {
var keyupFired = false;
$('#text').keyup(function(e) {
if (!keyupFired) {
console.log("Yes...");
keyupFired = true;
setTimeout(function() {
alert("OK!!!");
keyupFired = false;
}, 3000);
} else {
console.log("No...");
e.preventDefault();
}
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script>
<input type='text' id='text' name='text' placeholder='please enter text....' />
$(function() {
var keyupFired = false; // intialize the flag
if (!keyupFired) {
keyupFired = true; // before starting the task
$('#searchTerm').keyup(function(e) {
var search = $(this).val();
$.post(host / search, {
search: search
}, function(data) {
$('#list').html(data);
keyupFired = false; //completed its task so again make `keyupFired =false`
});
});
} else {
e.preventDefault();
}
});
To implement this functionality you need to maintain one flag.
I am trying to create a chrome extension that only records user data when the checkbox is checked (visually, it is a slider but a checkbox nonetheless). However, I am having trouble saving the value of the checkbox after a user has clicked it. Whenever the popup closes the checkbox (or slider) goes back to unchecked.
I have tried adding (from background.js) the attribute 'checked' to the checkbox in popup.html when the value is true (checked) and then removing the attribute when the value is false (unchecked).
Then, I read something that the .attr in jquery is no longer supported and the new way to do it (as of jquery 3+) is to use .prop('checked', true);
//background.js
var switchStatus;
chrome.storage.onChanged.addListener(function(changes, areaName){
console.log('received');
chrome.storage.local.get('sS', function(status){
switchStatus = status.sS;
console.log(switchStatus);
if(switchStatus === true) {
$('#togBtn').prop('checked', true);
chrome.storage.local.set({'sS': true});
console.log('when checked ' + switchStatus);
}
if(switchStatus === false) {
$('#togBtn').prop('checked', false);
chrome.storage.local.set({'sS': false});
console.log('unchecked ' + switchStatus);
}
});
});
//popup.js
$(function() {
var switchStatus;
$("#togBtn").on('change', function() {
chrome.storage.local.get('sS', function(status){
switchStatus = status.sS;
});
if(($('#togBtn').is(':checked')) === true) {
switchStatus = $("#togBtn").is(':checked');
alert(switchStatus); //to verify
chrome.storage.local.set({'sS': true}, function(){
alert('saved' + ' : ' + switchStatus);
});
}
if(($('#togBtn').is(':checked')) === false) {
switchStatus = $("#togBtn").is(':checked');
alert(switchStatus); //to verify
chrome.storage.local.set({'sS': false}, function(){
alert('saved' + ' : ' + switchStatus);
});
}
});
});
//popup.html
<label class="switch">
<input type="checkbox" id="togBtn">
<div class="slider round" id="thisthing">
<span class="on">ON</span>
<span class="off">OFF</span>
</div>
</label>
Again, I'm trying to save the value of the checkbox after the popup is closed. So when a user clicks the checkbox, and the slider switches to green and 'on', if the user were to click out of the popup window or go to a new tab, the checkbox would still show green and 'on'
It looks like you can simplify your code a little bit.
// background.js
chrome.storage.onChanged.addListener(function(changes, areaName){
chrome.storage.local.get('sS', function(status){
var switchStatus = status.sS;
if(switchStatus) {
$('#togBtn').prop('checked', true);
} else {
$('#togBtn').prop('checked', false);
}
});
});
and
// popup.js
$(function() {
$("#togBtn").on('change', function(e) {
if (e.target.checked){
chrome.storage.local.set({'sS': true}, function(){
alert('saved: True');
});
} else {
chrome.storage.local.set({'sS': false}, function(){
alert('saved: False');
});
}
});
// I think that you may need to include this to initialize the checkbox.
// I could be wrong though.
chrome.storage.local.get('sS', function(status){
var switchStatus = status.sS;
if(switchStatus) {
$('#togBtn').prop('checked', true);
} else {
$('#togBtn').prop('checked', false);
}
});
});
i will create website with validate in input field, i used Mottie Keyboard in every input field, and i use validation on it. i will create disable button when validation is not correct. And I get a script for it, directly from github page mottie keyboard. I want is if the validation was not correct then the button in a virtual keyboard can not be pressed. Here's the script:
var toggleKeysIfEmpty = function( kb ) {
var toggle = kb.$preview.val() === '';
console.log( toggle, kb.$preview.val() );
kb.$keyboard
.find('.ui-keyboard-bksp')
.toggleClass('disabled', toggle)
.prop('disabled', toggle);
};
And this my script before adding script above:
$(function() {
// change default navigation keys
$('#jkeyboard2, #jkeyboard').keyboard({
layout: 'num',
// setting alwaysOpen does odd things with input focus on initialization
// best to leave it false and focus on the desired input
// alwaysOpen: true,
autoAccept: true,
usePreview: false,
position: {
of: $(window),
// null (attach to input/textarea) or a jQuery object (attach elsewhere)
my: 'center bottom',
at: 'center bottom',
at2: 'center bottom'
},
maxLength: 4,
layout: 'custom',
customLayout: {
'normal': ['1 2 3', '4 5 6', '7 8 9', '0 . {b}'],
},
visible : function(e, keyboard) {
toggleKeysIfEmpty( keyboard );
},
tabNavigation: true,
initialFocus: false,
initialized: function() {
setTimeout(function(){
$('#jkeyboard').focus();
}, 200);
},
change: function(e, keyboard, el) {
if (keyboard.$el.val().length >= 4) {
// switchInput( goToNext, isAccepted );
keyboard.switchInput(true, true);
} else if (keyboard.$el.val() === "" && keyboard.last.key === "bksp") {
// go to previous if user hits backspace on an empty input
keyboard.switchInput(false, true);
}
}
})
});
$(document).ready(function() {
$('#jkeyboard').bind('keyboardChange', function (e, keyboard, el) {
if (validatePhone('jkeyboard')) {
$('#spnPhoneStatus').html('');
$('#spnPhoneStatus').css('color', 'green');
} else {
$('#spnPhoneStatus').html('<b>Wrong Number</b>');
$('#spnPhoneStatus').css('color', 'red');
}
});
});
function validatePhone(jkeyboard) {
var a = document.getElementById(jkeyboard).value;
var filter = /^0(?:8(?:(?:1(?:[789][0-9]{0,9})?|3(?:[1238][0-9]{0,9})?|5(?:9[0-9]{0,9})?|7(?:[78][0-9]{0,9})?)?)?)?$/;
//var filter = /^0([8]([1357]([123789]([0-9]{0,8}))?)?)?$/;
if (filter.test(a)) {
return true;
} else {
return false;
}
}
I want disable backspace button if validation was not correct, so i added the script. And become like this:
$(function() {
// change default navigation keys
$('#jkeyboard2, #jkeyboard').keyboard({
layout: 'num',
// setting alwaysOpen does odd things with input focus on initialization
// best to leave it false and focus on the desired input
// alwaysOpen: true,
autoAccept: true,
usePreview: false,
position: {
of: $(window),
// null (attach to input/textarea) or a jQuery object (attach elsewhere)
my: 'center bottom',
at: 'center bottom',
at2: 'center bottom'
},
maxLength: 4,
layout: 'custom',
customLayout: {
'normal': ['1 2 3', '4 5 6', '7 8 9', '0 . {b}'],
},
visible : function(e, keyboard) {
toggleKeysIfEmpty( keyboard );
},
tabNavigation: true,
initialFocus: false,
initialized: function() {
setTimeout(function(){
$('#jkeyboard').focus();
}, 200);
},
change: function(e, keyboard, el) {
if (keyboard.$el.val().length >= 4) {
// switchInput( goToNext, isAccepted );
keyboard.switchInput(true, true);
} else if (keyboard.$el.val() === "" && keyboard.last.key === "bksp") {
// go to previous if user hits backspace on an empty input
keyboard.switchInput(false, true);
}
}
})
});
$(document).ready(function() {
$('#jkeyboard').bind('keyboardChange', function (e, keyboard, el) {
if (validatePhone('jkeyboard')) {
$('#spnPhoneStatus').html('');
$('#spnPhoneStatus').css('color', 'green');
} else {
$('#spnPhoneStatus').html('<b>Wrong Number</b>');
$('#spnPhoneStatus').css('color', 'red');
var toggleKeysIfEmpty = function( kb ) {
var toggle = kb.$preview.val() === '';
console.log( toggle, kb.$preview.val() );
kb.$keyboard
.find('.ui-keyboard-bksp')
.toggleClass('disabled', toggle)
.prop('disabled', toggle);
};
}
});
});
function validatePhone(jkeyboard) {
var a = document.getElementById(jkeyboard).value;
var filter = /^0(?:8(?:(?:1(?:[789][0-9]{0,9})?|3(?:[1238][0-9]{0,9})?|5(?:9[0-9]{0,9})?|7(?:[78][0-9]{0,9})?)?)?)?$/;
//var filter = /^0([8]([1357]([123789]([0-9]{0,8}))?)?)?$/;
if (filter.test(a)) {
return true;
} else {
return false;
}
}
it's doesn't work, and i try put the code i get at the top of my code. it's work but backspace button can not be pressed from the start. Anyone can fix it?
Here's my fiddle: DEMO
I have changed your code to update the fiddle here : you wanted to
disable backspace button if validation was not correct
so here's what I did:
I renamed toggleKeysIfEmpty to toggleBackspaceKey and changed its implementation to add the CSS classes to render the button correctly depending on the desired state:
var toggleBackspaceKey = function( kb, toggle ) {
console.log( toggle, kb.$preview.val() );
var $bkSpaceBtn = kb.$keyboard.find('.ui-keyboard-bksp');
if (toggle) {
$bkSpaceBtn
.attr({
'disabled': 'disabled',
'aria-disabled': 'true'
})
.removeClass(kb.options.css.buttonHover)
.addClass(kb.options.css.buttonDisabled);
} else {
$bkSpaceBtn
.removeAttr('disabled')
.attr({
'aria-disabled': 'false'
})
.addClass(kb.options.css.buttonDefault)
.removeClass(kb.options.css.buttonDisabled);
}
};
I changed the implementation of the bksp keyaction handler to ensure that if it's invoked when the button is disabled, no action is executed. The handler for the backspace will be invoked if you press the corresponding key or if you double click on the backspace button in the keyboard even when it's disabled (this might be a bug). Here is the handler code: if the backspace button is enabled it simply invokes the default backspace processing handler. Also, this function is invoked once from the visible callback:
var processBkSpcKey = function(kb) {
var originalBkSpaceHandler = $.keyboard.keyaction.bksp;
$.keyboard.keyaction.bksp = function(base) {
// If the backspace button is disabled, do not process it.
var $bkSpaceBtn = kb.$keyboard.find('.ui-keyboard-bksp');
if($bkSpaceBtn.hasClass(kb.options.css.buttonDisabled)) {
return false;
}
return originalBkSpaceHandler.apply(kb, arguments);
}
};
With these changes in place, the backspace button is disabled if the input is empty or if the validation fails, in this case though, how would the user clear the contents of the input?
I've a kendo menu to dynamically enable or disable the kendo grid columns. When I select the options from the KendoMenu, the selection is firing twice. I've created the demo version below.
demo
$("#menu").kendoMenu({
dataSource: [{
text: "Menu",
items: ds
}],
openOnClick: true,
closeOnClick: false,
open: function () {
var selector;
$.each(grid.columns, function () {
if (this.hidden) {
selector = "input[data-field='" + this.field + "']";
$(selector).prop("checked", false);
}
});
},
select: function (e) {
// don't show/hide for menu button --- calling twice
if ($(e.item).parent().filter("div").length) return;
console.log("******");
var input = $(e.item).find("input.check");
var field = $(input).data("field");
if ($(input).is(":checked")) {
grid.showColumn(field);
} else {
grid.hideColumn(field);
}
}});
Check the console log while selecting the menu items.
Adding the checkbox to the menu item seems to lead to kendo firing the event for the menu click and the checkbox check. It seems hard to differentiate between the two instances, so it might be better to do something different to indicate the check. The following icons can be used - maybe use the tick icon instead of an actual checkbox:
http://demos.telerik.com/kendo-ui/styling/icons
I've fixed the issue with the updated code
$("#menu").kendoMenu({
dataSource: [{
text: "Menu",
items: ds
}],
openOnClick: true,
closeOnClick: false,
open: function () {
var selector;
$.each(grid.columns, function () {
if (this.hidden) {
selector = "input[data-field='" + this.field + "']";
$(selector).prop("checked", false);
}
});
},
select: function (e) {
// don't show/hide for menu button
if ($(e.item).parent().filter("div").length) return;
var removeItemFlag = false;
var input = $(e.item).find("label");
var selectedValue = input[0].innerHTML;
if(selectedValue)
{
for(var i=0; i< droplist.length; i++){
if(droplist[i] === selectedValue){
removeItemFlag = true
input[0].classList.remove = "fa fa-check-square-o";
input[0].className = "fa fa-square-o";
break;
}
}
var selectedIndex = droplist.indexOf(selectedValue);
if (selectedIndex > -1 && removeItemFlag) {
droplist.splice(selectedIndex, 1);
grid.hideColumn(selectedValue);
}else{
droplist.push(selectedValue);
grid.showColumn(selectedValue);
input[0].className = "fa fa-check-square-o";
}
}
}
});
I have two fields. An autocomplete field and a simple textbox. When user selects an item from autocomplete field I want to set focus on the next field and call a function when enter key is pressed on it. Here is the code:
this.initPiecesAutocomplete = function (){
$('#product_autocomplete_input1')
.autocomplete('ajax_products_list.php', {
minChars: 1,
autoFill: true,
max:20,
matchContains: true,
mustMatch:true,
scroll:false,
cacheLength:0,
formatItem: function(item) {
return item[1]+' - '+item[0];
}
}).result(self.getCount);
this.getCount = function(event, data, formatted) {
if (data == null)
return false;
$('#pieceCount').focus();
$('#pieceCount').on('keypress', function(e) {
if (e.which == 13) {
self.addPiece(event, data, formatted)
}
});
}
After selecting an item from the autocomplete field (by pressing the enter key), instead of setting focus on the #pieceCountfield, self.addPiece() is called. What's wrong?