I want the select2 element to lose the focus when the select2-close event is triggered, what I have tried so far was:
.on("select2-close", function (e) {
var $focused = $(':focus');
$focused.blur();
});
and some variations to get focused element like document.activeElement, $(e.target) non f these worked.
JSFiddle
You need to remove the .select2-container-active class from the containing divider:
.on("select2-close", function () {
setTimeout(function() {
$('.select2-container-active').removeClass('select2-container-active');
$(':focus').blur();
}, 1);
});
I've used a setTimeout here as a hacky way to ensure that this triggers after the plugin itself finalises the close.
JSFiddle demo.
Related
I have a magento test-shop with onepagecheckout extension. This uses a onepagecheckout.js. There should be added 'click'-event observers to the payment radio buttons. But when clicking on them, nothing happens.
The observers are added to the single input elements while each-ing through them:
addObservers: function () {
$$('input[name="payment[method]"]').each(function (el) {
el.observe('click', function () {
checkout.update({
'review': 1,
'payment-changed': 1
});
});
});
}
The eached elements are, as can be seen in the Chrome debugger and fit to the input-element ids and names:
el = input#p_method_bankpayment.radio
el = input#p_method_paypal_express.radio
el = input#p_method_cashondelivery.radio
el = input#p_method_phoenix_cashondelivery.radio
The update function is calling new content via AJAX when page is loaded, but is not executed and no network-activity can be seen, when events should be fired.
The installation can be seen here: http://5.175.9.22/gp_de/onepagecheckout/
(Put something in the cart/Warenkorb, go to checkout/Zur Kasse, not further)
Can somebody tell me why the observers are not working? Other installations are working with this extensions, what's
Your input elements are hidden by
style="display:none;"
so nobody can click them. If you remove display:none in dev-tools and then click the radio button, an alert 'Click' pops up.
Try to use a change event instead of click
addObservers: function () {
$$('input[name="payment[method]"]').each(function (el) {
el.observe('change', function () {
checkout.update({
'review': 1,
'payment-changed': 1
});
});
});
}
Update:
I've taken a closer look to this. This could not work with a change event, because there are onclick Attributes on each radiobutton. These are not triggered 'onchange'. So try to trigger the (example):
onclick="payment.switchMethod('phoenix_cashondelivery')"
event with something like this
$$('input[name="payment[method]"]').each(function (el) {
el.observe('change', function () {
$(this).simulate('click');
checkout.update({
'review': 1,
'payment-changed': 1
});
});
});
I am trying to get an onblur/onfocus combination working for a pair of text boxes which I am selecting via class in jquery. I am not getting any errors in debug, but the blur function never seems to be called. When debugging my breakpoint in the blur function is not hit.
$(document).ready(function () {
var row = $(this).closest('tr');
$('.editClass').click(function () {
var editBoxes = $(row).find('.editClass');
var focus = 0;
$(editBoxes).focus(function () { focus++ });
$(editBoxes).blur(function () {
focus--;
setTimeout(function () {
if (!focus) {
alert('LOST FOCUS'); // both lost focus
}
}, 50);
});
});
});
Pretty sure the problem here was that the editBoxes were dynamically added to the page. This was not apparent in my question. Since they were dyncamically added I need to use
$(document).on('blur', '.editBoxes', function (){
...
}
The last two lines of your code example should be this
});
});
This is needed for closing the ready and click function call.
Another possible problem is that you wrap the focus and blur listeners in a click handlers. Why did you do this?
A variety of elements on my page have the content editable tag.
When they are clicked I do this:
$('[contenteditable]').on('click', this.edit);
p.edit = function(e) {
console.log(e.currentTarget);
e.currentTarget.on('keydown', function() {
alert("keydown...");
});
};
I get the current target ok, but when I try to add keydown to it, I get the err:
Uncaught TypeError: undefined is not a function
It's a native DOM element, you'll have to wrap it in jQuery
$(e.currentTarget).on('keydown', function() {
alert("keydown...");
});
e.currentTarget should equal this inside the event handler, which is more commonly used ?
It's a little hard to tell how this works, but I think I would do something like
$('[contenteditable]').on({
click : function() {
$(this).data('clicked', true);
},
keydown: function() {
if ($(this).data('clicked'))
alert("keydown...");
}
});
Demo
First issue is you are trying to use jQuery methods on a DOM element. Second issue is I do not think you want to bind what is clicked on, but the content editable element itself.
It also seems weird to be adding the event on click instead of a global listener. But this is the basic idea
$(this) //current content editable element
.off("keydown.cust") //remove any events that may have been added before
.on('keydown.cust', function(e) { //add new event listener [namespaced]
console.log("keydown"); //log it was pressed
});
Edited: I had a fail in code. It works fine now.
Getting your code, I improved to this one:
$(function(){
$('[contenteditable]').on('click', function(){
p.edit($(this));
});
});
var p = {
edit: function($e) {
console.log($e);
$e.on('keydown', function() {
console.log($(this));
alert("keydown...");
});
}
}
You can check it at jsFiddle
You need to wrap the e.currentTarget(which is a native DOM element) in jQuery since "on" event is a jQuery event:
$(e.currentTarget).on('keydown', function() {
alert("keydown...");
});
EDIT:
$('[contenteditable]').on('click', p.edit);
p.edit = function(e) {
$(e.currentTarget).on('keydown', function() {
alert("keydown...");
});
};
You're defining p.edit AFTER $('[contenteditable]').on('click', p.edit); resulting in an error since p.edit doesn't exist when declaring the on.
In case you don't know, you are defining p.edit as a function expression, meaning that you have to define it BEFORE calling it.
I have this code in my page
$("#ddlBirthdayDay,#ddlBirthdayMonth,#ddlBirthdayYear").change(function () {
$("form").validate().element("#ddlBirthdayYear");
});
I need to change it to: I haven't the focus in the three input $("#ddlBirthdayDay,#ddlBirthdayMonth,#ddlBirthdayYear"), I validate the element in the form.
How can I do this in jquery??
If all of your elements are in the same wrapper you could use focusout.
http://api.jquery.com/focusout/
Together with the :focus selector.
http://api.jquery.com/focus-selector/
var focusTimer = null;
$("form").on("focusout", function(){
clearTimeout(focusTimer);
focusTimer = setTimeout(function(){
var focusedElements = $("#ddlBirthdayDay,#ddlBirthdayMonth,#ddlBirthdayYear").filter(':focus');
alert(focusedElements.length);
}, 50);
});
Unfortunately you would need the set timeout as tabbing through the input fields would cause wrong results otherwise.
jsfiddle Demo
You can add an attribute to each element to say it lost focus. Then when all elements have lost focus, fire the validate event for each:
var $elems = $("#ddlBirthdayDay,#ddlBirthdayMonth,#ddlBirthdayYear");
$elems.blur(function () {
// Add a flag to this element to say it's lost focus
$(this).attr("data-blurred", "true");
console.log("blurred");
// If the number of elements in total equals the number with the blurred flag...
if($elems.filter("[data-blurred]").length === $elems.length) {
// Iterate over all the original elements and fire the validate event
$elems.each(function() {
$("form").validate().element($(this));
});
}
});
Here is a fiddle.
Sample code:
$(function(){
$('#a,#b,#c').on('blur',function(e){
setTimeout(function(){
if (!$('#a,#b,#c').is(':focus')) {
alert('Lost focus on all controls');
}
}, 50);
});
});
Take a look at my demo: Detect if controls lost focus
I'm trying to have a CSS link disabled for 1 second after it has been clicked.
I have tried this without success;
In the header:
<script type="text/javascript">
$(function() {
$("#link").click(function() {
$("#link").attr("disabled", "disabled");
setTimeout(function() {
$("#link").removeAttr("disabled");
}, 2000);
});
});
</script>
Html:
the link text
CSS:
.link:diabled {
some values here.. }
You have a class="link", but with $("#link") you are addressing the id called link.
So write $(".link") everywhere instead of $("#link").
By the way: with .link:disabled you won't address the link as this only works on inputs and buttons. If you need to address it, use .link[disabled="disabled"] { ... } or even better add a class to it called disabled_link and then do in CSS .disabled_link { ... }.
There are quite a few problems here:
You are using # (the ID selector), but your html is using classes.
<a> does not have a disabled attribute
If it did, you would probably want to use .prop instead of .attr
If you change code to use classes, $(".link").prop("disabled", true) would affect all anchors, so you should probably use this.
Because disabled does not exist for <a>, the :disabled selector does not seem to work for CSS.
A working solution would be something like this:
$(".link").click(function() {
var $this = $(this);
$this.addClass('disabled');
setTimeout(function() {
$this.removeClass('disabled');
}, 2000);
});
$(document).on('click', '.disabled', function (e) {
e.preventDefault();
});
http://jsfiddle.net/ExplosionPIlls/PaYcc/
'link' is a class and you are using it as ID. Do $('.link') instead of $('#link').
I think this approach works better. The other allows you to click the link multiple times and mess up the setTimeout this unbinds the event and then re-attaches the event after the setTimeout ex: double click the link
$(".link").click(linkBind);
function linkBind(){
var $this = $(this);
$this.addClass('disabled');
$this.unbind('click');
setTimeout(function() {
$this.removeClass('disabled');
$this.bind('click', linkBind);
}, 2000);
}
$(document).on('click', '.disabled', function (e) {
e.preventDefault();
});
http://jsfiddle.net/PaYcc/1/