Develop Reference

Firefox firing change event on input.attr("type", "number")

I'm experiencing a problem, only in firefox, when an input is focused, and I change the input type from "text" to "number", a change event is triggered and the input loses focus.
What I want to achieve is to change the input to a number field on focus, allow edit, and change the input toLocaleString() on blur.
Here are my codes:
$("input").focusin(function() {
$(this).val(toNumber($(this).val()));
$(this).attr("type", "number");
});
$("input").focusout(function() {
$(this).attr("type", "text");
$(this).val("$ " + toCost($(this).val()));
});
// Added during edit to make code testable
$('input').on('change', function(){ console.log('changed'); })
function parseNumber(value) {
var result = parseFloat(toNumber(value));
if (!isNaN(result)) {
return result;
}
return 0;
}
function toNumber(str) {
return str.replace(/\s/g, "").replace(/\$/g, "").replace(/,/g, "");
}
function toCost(number) {
return parseNumber(number).toLocaleString();
}
<!-- Added during edit to make code testable -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<input/>
I can't figure out why in Firefox the input is triggering a change event and losing focus when I select it. It works the way I want it to when I try to use $("#myInput").focusin() on the console though.
It works fine on Chrome and Microsoft Edge.
Thanks in advance for taking a look at this!

I'm currently using this as a solution:
function is_firefox() {
return navigator.userAgent.search("Firefox") >= 0;
}
$("input").focusin(onFocusIn);
$("input").focusout(onFocusOut);
$('input').change(onInputChange);
function onFocusIn() {
$(this).val(toNumber($(this).val()));
$(this).attr("type", "number");
// remove on 'change' and 'focusout', and add back after a short delay
if (is_firefox()) {
$(this).off("change");
$(this).off("focusout");
setTimeout(function(element){
element.change(onInputChange);
element.focusout(onFocusOut);
}, 15, $(this));
}
}
function onFocusOut() {
$(this).attr("type", "text");
$(this).val("$ " + toCost($(this).val()));
}
function onInputChange() {
console.log("changed");
}
$("input").focusout();
function parseNumber(value) {
var result = parseFloat(toNumber(value));
if (!isNaN(result)) {
return result;
}
return 0;
}
function toNumber(str) {
return str.replace(/\s/g, "").replace(/\$/g, "").replace(/,/g, "");
}
function toCost(number) {
return parseNumber(number).toLocaleString();
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<input value="1000"/>
I don't think it's the perfect solution, but it works for me now.

Hide popover on body click only if already visible

Hiding a div (for example #popover) on click is easy:
$(document).ready(function() {
$("#trigger").click(function(e) {
$("#popover").toggle();
e.stopPropagation();
});
$(document).click(function(e) {
if (!$(e.target).is('#popover, #popover *')) {
$("#popover").hide();
}
});
});
But isn't this function fired every time the user uses a click? (Which does not make sense for me). Can I somehow limit this function to fire only if #popover is already visible?

In that case you can try using $(document).one(function(e) {...}); every time you show #example.
$(document).ready(function() {
var didBindToBody = false;
function closePopOverOnBodyClick() {
didBindToBody = true;
$(document).one('click', function(e) {
if (!$(e.target).is('#popover, #popover *')) {
$("#popover").hide();
}
else {
closePopOverOnBodyClick();
}
didBindToBody = false;
});
}
$("#trigger").click(function(e) {
$("#popover").toggle();
e.stopPropagation();
if (!didBindToBody && $("#popover").is(":visible")) {
closePopOverOnBodyClick();
}
});
closePopOverOnBodyClick();
});
DEMO

You could try something like
$(document).click(function(e) {
if (!$('#example').is(":visible")) {
return false;
} else if (!$(e.target).is('#popover, .login-panel *')) {
$("#popover").hide();
}
});
Or you could combine the two conditionals into one, just thought I'd keep it separate for readability and to make my suggestion easier to spot.

Getting checked checkboxes with jQuery

I have a function that is supposed to catch changes to all checkboxes. It works when the boxes are clicked manually, but does not work when the toggleAll() function triggers them.
Anyway to correct this?
$(function() {
$(":checkbox").change(function(){
if ( this.checked ) {
alert(this.id+' is checked');
} else {
alert(this.id+' is not checked');
}
});
});
function toggleAll() {
var selectAllCheckbox = $("#selectAllCheckbox");
if ( selectAllCheckbox.prop('checked') ) {
// uncheck them all
$("[id^=friendRequestCheckbox]").attr('checked', false);
} else {
// check them all
$("[id^=friendRequestCheckbox]").attr('checked', true);
}
}
I am running an old version of jQuery and have not updated to the new version including prop, just in case that's relevant.

When changing elements programmatically, you also have to trigger the event programmatically. Try :
$("[id^=friendRequestCheckbox]").trigger('change')

JQuery trigger element itself in a bind

Can someone explain me why this snippet can't work ?
I can't use specific features like window.location, submit(), (instead of trigger()), because this function is bound to elements that are very differents.
$('a, button').bind('click', function(oEvent, oData) {
var oButton = $(this);
var bSkip = (oData && oData.skip);
if(true === bSkip) {
return true;
} else {
oEvent.preventDefault();
//oEvent.stopPropagation();
if(confirm('This is a confirm box')) {
$(oButton).trigger('click', { skip: true });
}
}
});
Thanks in advance ! ;)

In your case even though the click event gets fired the default behavior of the links may not be triggered because of the constraints imposed by the browser
If I understand what you are trying to do correctly(if the action s not confirmed then cancel the default behavior), then you can achieve it by the below... there is no need to fire the event again
$('a, button').bind('click', function (oEvent, oData) {
if (confirm('This is a confirm box')) {
return true;
} else {
oEvent.preventDefault();
}
});
Demo: Fiddle

JQuery Check if input is empty not checking onload?

I am using this code to check if an inputbox is empty or not and it works fine but it only checks check a key is press not when the page loads.
It's does what it should but I also want it to check the status when the page loads.
Here is the current code:
$('#myID').on('keyup keydown keypress change paste', function() {
if ($(this).val() == '') {
$('#status').removeClass('required_ok').addClass('ok');
} else {
$('#status').addClass('required_ok').removeClass('not_ok');
}
});

Try the following:
$(function() {
var element = $('#myID');
var toggleClasses = function() {
if (element.val() == '') {
$('#status').removeClass('required_ok').addClass('ok');
} else {
$('#status').addClass('required_ok').removeClass('not_ok');
}
};
element.on('keyup keydown keypress change paste', function() {
toggleClasses(); // Still toggles the classes on any of the above events
});
toggleClasses(); // and also on document ready
});

The simplest way to do is trigger any of the keyup,keydown etc event on page load. It will then automatically call your specific handler
$(document).ready(function(){
$("#myID").trigger('keyup');
});

try checking the value on a doc ready:
$(function() {
if ($('#myID').val() == '') {
$('#status').removeClass('required_ok').addClass('ok');
} else {
$('#status').addClass('required_ok').removeClass('not_ok');
}
});
EDIT: just as an update to this answer, a nicer approach might be to use toggle class, set up in doc ready then trigger the event to run on page load.
function check() {
var $status = $('#status');
if ($(this).val()) {
$status.toggleClass('required_ok').toggleClass('ok');
} else {
$status.toggleClass('required_ok').toggleClass('not_ok');
}
}
$(function () {
$('#myID').on('keyup keydown keypress change paste', check);
$('#myID').trigger('change');
});

Well then why dont just check the field after the page is loaded?
$(document).ready(function(){
if ($('#myID').val() == '') {
$('#status').removeClass('required_ok').addClass('ok');
} else {
$('#status').addClass('required_ok').removeClass('not_ok');
}
});

$(document).ready(function(){
var checkVal = $("myID").val();
if(checkVal==''){
$('#status').removeClass('required_ok').addClass('ok');
}
else{
$('#status').addClass('required_ok').removeClass('not_ok');
}
});